Atlassian
Ecosystem Index
Soft, electric twilight—geometric forms float on deep indigo, crisp sans-serif whispers.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter | 64px | 900 | 0.9 | 0 | Aa Bb Cc |
| h2 | Inter | 60px | 900 | 1.2 | 0 | Aa Bb Cc |
| h3 | Inter | 36px | 900 | 1.11 | 0 | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.6 | 0 | Aa Bb Cc |
| caption | Inter | 14px | 600 | 1.6 | 0.7px | Aa Bb Cc |
| button | Inter | 16px | 400 | 1.6 | 0 | Aa Bb Cc |
Max content width 416px
:root {
--color-dominant: #6a5bc1;
--color-surface: #2d2460;
--color-ink: #809cf3;
--color-accent: #7878b1;
--color-detail: #b9aedc;
}
/* CSS variables exposed by source */
:root {
--border: 0, 0%, 81%;
--color-orange-600: lab(57.1026% 64.2584 89.8886);
--spacing-page: calc(.25rem * 8);
--text-base--line-height: calc(1.5 / 1);
--radius-4xl: 2rem;
--color-yellow-400: lab(83.2664% 8.65132 106.895);
--font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
--border-high-contrast: 0, 0%, 55%;
--color-green-500: lab(70.5521% -66.5147 45.8073);
--color-white: #fff;
--primary-action-hover: 263, 88%, 65%;
--radius-sm: .25rem;
--border-low-contrast: 0, 0%, 93%;
--color-yellow-300: lab(89.7033% -.480294 84.4917);
--font-weight-bold: 700;
--color-background-highlight: hsla(0, 0%, 97%);
--radius-base: 1rem;
--radius-2xl: 1rem;
--radius-md: .375rem;
--text-xl: 1.25rem;
--radius-lg: .5rem;
--primary-visited: 263, 74%, 41%;
--color-green-600: lab(59.0978% -58.6621 41.2579);
--color-green-950: lab(15.6845% -20.4225 11.7249);
--accent-c: 163, 82%, 33%;
--color-red-300: lab(76.5514% 36.422 15.5335);
--color-orange-500: lab(64.272% 57.1788 90.3583);
--text-md: 1rem;
--spacing: .25rem;
--background: 0, 0%, 100%;
--text-8xl: 6rem;
--background-highlight: 0, 0%, 97%;
--color-green-400: lab(78.503% -64.9265 39.7492);
--primary-high-contrast: 263, 77%, 31%;
--color-red-600: lab(48.4493% 77.4328 61.5452);
--color-border: hsla(0, 0%, 81%);
--color-black: #000;
--color-amber-100: lab(95.916% -1.21653 23.111);
--primary: 263, 75%, 51%;
--text-4xl--line-height: 1.2;
--text-2xl: 1.5rem;
--color-yellow-600: lab(62.7799% 22.4197 86.1544);
--text-lg: 1.125rem;
--text-8xl--line-height: 1;
--color-green-100: lab(96.1861% -13.8464 6.52365);
--color-red-200: lab(86.017% 19.8815 7.75869);
--accent-a: 235, 81%, 58%;
--color-red-400: lab(63.7053% 60.745 31.3109);
--primary-hover: 263, 88%, 65%;
--accent-a-hover: 224, 84%, 60%;
--accent-b-hover: 323, 100%, 66%;
--border-hover: 0, 0%, 67%;
--color-background: hsla(0, 0%, 100%);
--color-red-500: lab(55.4814% 75.0732 48.8528);
--accent-c-hover: 163, 88%, 39%;
--font-inter: "Inter", "Inter Fallback";
--background-medium: 0, 0%, 81%;
--background-high: 0, 0%, 67%;
--color-orange-300: lab(80.8059% 21.7313 50.4455);
--color-yellow-100: lab(97.3564% -4.51407 27.344);
}Drop-in prompt
Build a landing page in the visual style of Ethereum.
Reference design system (extracted from the live site):
- Palette: #6a5bc1, #2d2460, #809cf3, #7878b1, #b9aedc
- Typefaces: Inter
- 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/ethereum-org