Buildkite
Ecosystem Index
Loading
Codesandbox
Deep charcoal expanse, crisp sans-serif, illuminated by vibrant, electric green accents.
Click any value to copy. Roles are suggestions, not gospel.
- #dcfc54oklch(93.8% 0.190 120)Dominant
- #748c2coklch(60.2% 0.124 122)Surface
- #e1f28foklch(92.7% 0.125 117)Ink
- #7c8454oklch(59.4% 0.069 116)Accent
- #acbc74oklch(76.6% 0.097 119)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | TWK Everett | 120px | 500 | 1 | -6px | Aa Bb Cc |
| h2 | __Inter_f367f3 | 24px | 400 | 1.4 | 0 | Aa Bb Cc |
| h3 | __Inter_f367f3 | 14px | 400 | 1 | -0.175px | Aa Bb Cc |
| body | __Inter_f367f3 | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #dcfc54;
--color-surface: #748c2c;
--color-ink: #e1f28f;
--color-accent: #7c8454;
--color-detail: #acbc74;
}
/* CSS variables exposed by source */
:root {
--fontSizes-20: 20px;
--colors-foreground100: #FFFFFF;
--colors-foreground300: #E0E0E0;
--fontSizes-18: 18px;
--colors-neutral500: #252525;
--sizes-2: 8px;
--fontSizes-72: 72px;
--space-9: 104px;
--space-4: 24px;
--colors-foreground800: #666666;
--colors-black200: #303030;
--colors-text: #F0F0F0;
--colors-vscode700: #0098FF;
--space-7: 64px;
--space-8: 80px;
--fontSizes-180: 180px;
--colors-vscode400: #99D6FF;
--colors-blue600: #0971F1;
--colors-orange400: #F3A492;
--fontWeights-bold: 600;
--colors-purple100: #F2EFFF;
--colors-black500: #252525;
--sizes-0: 0px;
--colors-orange300: #F4AA99;
--fontSizes-48: 48px;
--sizes-11: 200px;
--sizes-navHeight: 48px;
--colors-lime700: #DCFF50;
--fontWeights-medium: 500;
--colors-yellow400: #FCEBC2;
--colors-foreground700: #858585;
--space-5: 32px;
--colors-purple600: #9581FF;
--colors-blue800: #054491;
--colors-lime100: #FCFFEE;
--colors-red600: #EF7A7A;
--colors-neutral300: #2D2D2D;
--colors-vscode300: #B3E0FF;
--space-3: 16px;
--colors-green700: #6FEC5B;
--colors-black700: #161616;
--colors-black100: #343434;
--fontSizes-10: 10px;
--space-gridGap: 32px;
--colors-yellow200: #FDF5E0;
--colors-lime400: #F1FFB9;
--colors-yellow100: #FFFFFF;
--colors-vscode800: #007ACC;
--space-pageMargin: 32px;
--sizes-pageWidth: 1200px;
--fontSizes-56: 56px;
--space-1: 4px;
--colors-vscode100: #E6F5FF;
--colors-purple800: #644ED7;
--space-10: 152px;
--sizes-12: 240px;
--colors-orange700: #EE8269;
--colors-orange100: #F6BBAE;
--colors-lime500: #EAFF96;
--fontSizes-200: 200px;
}Drop-in prompt
Build a landing page in the visual style of Codesandbox.
Reference design system (extracted from the live site):
- Palette: #dcfc54, #748c2c, #e1f28f, #7c8454, #acbc74
- Typefaces: TWK Everett, __Inter_f367f3
- Macrostructure: Ecosystem Index
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/codesandbox-io
