Commercialtype
Type Specimen
Loading
GT Standard
Electric vermillion roar, heavy geometric sans, tight grids on saturated neon
Click any value to copy. Roles are suggestions, not gospel.
- #fb3404oklch(64.0% 0.237 33)Dominant
- #f57a59oklch(71.5% 0.159 36)Surface
- #982004oklch(44.4% 0.159 33)Ink
- #828282oklch(60.7% 0.000 90)Accent
- #c0b4b0oklch(77.9% 0.015 39)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | GT Standard | 200px | 400 | 1 | -5px | Aa Bb Cc |
| h2 | GT Standard | 50px | 400 | 1 | -0.499998px | Aa Bb Cc |
| h3 | GT Standard | 18px | 400 | 1.24 | 0 | Aa Bb Cc |
| body | GT Standard | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1400px
:root {
--color-dominant: #fb3404;
--color-surface: #f57a59;
--color-ink: #982004;
--color-accent: #828282;
--color-detail: #c0b4b0;
}
/* CSS variables exposed by source */
:root {
--text-2xl: clamp(3.25rem,-1rem + 15vw,12.5rem);
--text-xxs: .5625rem;
--color-emmental: #ffca08;
--font-slnt: 0;
--color-pinku: #ffade8;
--color-neutral-300: oklch(.87 0 0);
--text-base-s: 1.125rem;
--spacing: .25rem;
--font-wdth: 100;
--color-teal: #05cf9c;
--font-mono: "GT Standard Mono",monospace;
--border-lg: 4px;
--text-base-sm: 1rem;
--color-fondue: #f3fb88;
--text-base-lm: 1.875rem;
--color-forest: #0b6e49;
--color-selection-text: #fff;
--color-gray: #cbccbe;
--color-robinhood: #0ac100;
--color-pumpkin: #ff6200;
--color-white: #fff;
--font-mono-spezial: 100;
--font-minisite: "GT Standard","GT Standard","GT Standard Icons",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--color-marine: #1414ff;
--font-sans: "GT Standard","GT Standard Icons",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--color-gold: #b4800f;
--font-wght: 400;
--text-base-l: clamp(2rem,1.6786rem + 1.6071vw,3.125rem);
--color-gray-200: oklch(.928 .006 264.531);
--color-red: #ff3500;
--text-xs: .625rem;
--color-selection-bg: #000;
--color-black: #000;
--color-babyblue: #40a0ff;
--color-purple: #80f;
--color-paper: #f2f3e8;
--radius-md: .375rem;
--text-xl: 6.25rem;
--text-base-xs: clamp(.703125rem,.5986rem + .446vw,1rem);
--font-opsz: 30;
--color-blush: #fcc;
--ease-in-out: cubic-bezier(.4,0,.2,1);
--wght-regular: 400;
--wght-heavy: 800;
--opsz-l: 30;
--wght-medium: 500;
--default-transition-timing-function: cubic-bezier(.4,0,.2,1);
--caption-font-size: .5625rem;
--slnt-oblique: 6;
--wdth-expanded: 150;
--tw-outline-style: solid;
--margin-site: clamp(.625rem,.0893rem + 2.6786vw,2.5rem);
--slnt-normal: 0;
--input-range-thumb-size: calc(8px + 1px);
--tw-translate-z: 0;
--tw-translate-y: 0;
--wdth-compressed: 0;
--wdth-narrow: 75;
--tw-rotate-y: rotateY(0);
--wdth-condensed: 37;
}Drop-in prompt
Build a landing page in the visual style of GT Standard.
Reference design system (extracted from the live site):
- Palette: #fb3404, #f57a59, #982004, #828282, #c0b4b0
- Typefaces: GT Standard
- Macrostructure: Type Specimen
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/gt-standard-com
