Devin
Feature Stack
Loading
Code Understanding, Oversight and Evolution | Sourcegraph
Deep charcoal expanse, crisp sans-serif, a focused, intensely technical clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #e8483aoklch(62.8% 0.199 29)Dominant
- #fcc4bcoklch(86.8% 0.065 28)Surface
- #440404oklch(24.8% 0.094 28)Ink
- #945c5coklch(53.7% 0.074 20)Accent
- #beb7b6oklch(78.5% 0.008 27)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Poly Sans | 80px | 500 | 0.96 | -2.48px | Aa Bb Cc |
| h2 | Poly Sans | 34px | 300 | 1.08 | -0.5px | Aa Bb Cc |
| body | Poly Sans | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Poly Sans | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e8483a;
--color-surface: #fcc4bc;
--color-ink: #440404;
--color-accent: #945c5c;
--color-detail: #beb7b6;
}
/* CSS variables exposed by source */
:root {
--font-sans: "Poly Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "Poly Sans Mono", "SF Mono", "Consolas", monospace;
--font-heading: "Perfectly Nineties", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--sg-theme-border-color-focus: oklch(62.5% .22 265deg);
--sg-theme-shadow-color: oklch(10% .00284 27deg / .9);
--sg-theme-brand-color: oklch(71% .19 27deg);
--sg-theme-background: oklch(16% .00284 27deg);
--sg-theme-border-color: oklch(25% .00284 27deg);
--sg-utils-radius-lg: 8px;
--sg-utils-radius-xl: 12px;
--sg-theme-accent-muted: oklch(41% .13 265deg);
--content-max-width: 640px;
--sg-theme-warning: oklch(68.5% .175 52deg);
--sg-theme-weight-semibold: 600;
--sg-theme-shadow-full: 0 10px 15px -3px oklch(10% .00284 27deg / .9), 0 4px 6px -4px oklch(10% .00284 27deg / .9);
--sg-theme-surface: oklch(18% .00284 27deg);
--sg-theme-success: oklch(51% .08 160deg);
--sg-theme-foreground: oklch(94.5% .00284 27deg);
--sg-theme-foreground-muted: oklch(74% .00284 27deg);
--sg-theme-accent: oklch(57% .2 265deg);
}Drop-in prompt
Build a landing page in the visual style of Code Understanding, Oversight and Evolution | Sourcegraph.
Reference design system (extracted from the live site):
- Palette: #e8483a, #fcc4bc, #440404, #945c5c, #beb7b6
- Typefaces: Poly Sans
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/sourcegraph-com
