Capacities
Ecosystem Index
Clinical Swiss precision, heavy black serifs against sterile white, neon lime accents




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 | Symbol Helper | 20px | 400 | 1.25 | 0 | Aa Bb Cc |
| h2 | Symbol Helper | 20px | 400 | 1.25 | 0 | Aa Bb Cc |
| h3 | Symbol Helper | 50px | 400 | 1.1 | 0 | Aa Bb Cc |
| body | Symbol Helper | 20px | 400 | 1.25 | 0 | Aa Bb Cc |
| caption | Symbol Helper | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Symbol Helper | 20px | 400 | 1.25 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f46b04;
--color-surface: #fcb484;
--color-ink: #71bd08;
--color-accent: #8c8772;
--color-detail: #a49cd4;
}
/* CSS variables exposed by source */
:root {
--surface-neutral-subtle: #eeeeee;
--secondary-surface-subtle: #f7eef1;
--space-1-5: 1.5rem;
--primary-surface-subtle: #e9f3eb;
--space-4: 4rem;
--primary-border-inverse: #1e3219;
--space-0-5: 0.5rem;
--font-accia-style: normal;
--primary-content: #1e3219;
--font-accia-weight: 90;
--font-weight: 400;
--space-2-5: 2.5rem;
--space-5: 5rem;
--secondary-surface-inverse: #42242e;
--primary-border: #9aff00;
--border-neutral: #bfbfbf;
--primary-content-inverse: #9aff00;
--space-2: 2rem;
--space-3: 3rem;
--space-0-25: 0.25rem;
--primary-surface-inverse: #1e3219;
--space-1: 1rem;
--font-serif: 0;
--secondary-surface: #f66a06;
--primary-surface: #9aff00;
--secondary-content-inverse: #f66a06;
--font-italic: 0;
--primary-content-accent: #1e3219;
--secondary-border: #f66a06;
--space-2-25: 2.25rem;
--secondary-content: #42242e;
--secondary-border-inverse: #42242e;
--secondary-content-accent: #243f42;
--_tone-page-content: #000000;
--_tone-page-surface: #ffffff;
--focus-outline-color: currentColor;
--header-height: 4rem;
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--arizona: "Symbol Helper", "ABC Arizona Serif", Arial, sans-serif;
--list-marker-content: #ffffff;
--block-gap: 2.5rem;
--_tone-cyan-strong: #243f42;
--serif: "Symbol Helper", "ABC Arizona Serif", serif;
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--_tone-yellow-strong: #604900;
--table-highlight-surface: #f5f0ed;
--content-neutral: #303030;
--mono: "Symbol Helper", "Plex", monospace;
--_tone-primary-surface-inverse: #1e3219;
--focus-outline-style: solid;
--selection-surface: #e9318d;
--section-gap: 4rem;
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--_tone-orange-subtle: #f5f0ed;
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--_tone-primary-content-inverse: #9aff00;
--_tone-neutral-subtle: #eeeeee;
--underline-offset: 0.15em;
--_tone-primary-surface: #9aff00;
--focus-outline-offset: 0.25rem;
}Drop-in prompt
Build a landing page in the visual style of Glyphs · Docs.
Reference design system (extracted from the live site):
- Palette: #f46b04, #fcb484, #71bd08, #8c8772, #a49cd4
- Typefaces: Symbol Helper
- 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/glyphsapp-com--learn