Designstudio
Portfolio Grid
Quiet, spacious geometry: muted grays and deep blues, clean sans-serif, airy structure.




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 | national | 112px | 400 | 0.9 | -3.36px | Aa Bb Cc |
| h2 | national | 44px | 400 | 1.2 | -0.88px | Aa Bb Cc |
| body | brutGrotesque | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | brutGrotesque | 14px | 500 | 1.25 | 0 | Aa Bb Cc |
| button | brutGrotesque | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #2184f8;
--color-surface: #761317;
--color-ink: #3c9bfa;
--color-accent: #a17664;
--color-detail: #d0a8ac;
}
/* CSS variables exposed by source */
:root {
--color-text-inv: #1a1a18;
--color-surface-alt: #242422;
--text-2xl: clamp(1.75rem,1.4rem + 1.75vw,2.75rem);
--text-9xl: 8rem;
--text-7xl: 4.5rem;
--text-lg: clamp(1.125rem,1rem + .6vw,1.375rem);
--text-8xl--line-height: 1;
--font-tiempos: "tiemposText","tiemposText Fallback";
--radius-3xl: 1.5rem;
--text-5xl--line-height: 1;
--text-2xl--line-height: 1.2;
--text-base--line-height: 1.6;
--spacing: .25rem;
--font-mono: ui-monospace,"SFMono-Regular",monospace;
--color-brand-950: #030303;
--text-8xl: 6rem;
--color-surface-inv: #fafaf8;
--text-xl--line-height: 1.3;
--font-weight-semibold: 600;
--color-brand-500: #1a1a18;
--text-sm: clamp(.8125rem,.76rem + .26vw,.875rem);
--spacing-section-sm: clamp(4rem,3rem + 5vw,8rem);
--text-9xl--line-height: 1;
--text-lg--line-height: 1.45;
--color-white: #fff;
--color-surface: #1a1a18;
--color-border-bold: #fafaf826;
--spacing-section-lg: clamp(5rem,5rem + 14vw,18rem);
--font-sans: "brutGrotesque","brutGrotesque Fallback",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
--text-4xl: clamp(2.75rem,1.75rem + 5vw,5.5rem);
--font-weight-bold: 700;
--radius-full: 9999px;
--color-text: #fafaf8;
--color-border: #fafaf81a;
--font-brut: "brutGrotesque","brutGrotesque Fallback";
--text-sm--line-height: 1.5;
--text-3xl--line-height: 1.1;
--text-5xl: clamp(3.25rem,1.85rem + 7vw,7rem);
--text-6xl: 3.75rem;
--text-3xl: clamp(2.25rem,1.65rem + 3vw,4.25rem);
--spacing-section: clamp(4rem,4rem + 10vw,14rem);
--color-black: #000;
--color-text-muted: #9a9890;
--font-weight-medium: 500;
--font-weight-light: 300;
--text-xs: clamp(.6875rem,.65rem + .19vw,.75rem);
--text-xs--line-height: 1.4;
--font-weight-normal: 400;
--font-serif: "tiemposText","tiemposText Fallback",Georgia,"Times New Roman",serif;
--font-display: "national","national Fallback",Georgia,"Times New Roman",serif;
--radius-xl: 1.5rem;
--radius-2xl: 2.5rem;
--text-6xl--line-height: 1;
--text-7xl--line-height: 1;
--text-4xl--line-height: 1.05;
--text-xl: clamp(1.375rem,1.15rem + 1.13vw,1.75rem);
--radius-lg: 1rem;
--text-base: clamp(.9375rem,.9rem + .19vw,1.0625rem);
--color-link: #2b53fc;
--color-brand-50: #fafaf8;
}Drop-in prompt
Build a landing page in the visual style of Upperquad.
Reference design system (extracted from the live site):
- Palette: #2184f8, #761317, #3c9bfa, #a17664, #d0a8ac
- Typefaces: national, brutGrotesque
- Macrostructure: Portfolio Grid
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/upperquad-com