Artforum
Portfolio Grid
Loading
Awwwards — Features
Deep ochre and charcoal, crisp sans-serif, spacious layout evokes scholarly gravitas.
Click any value to copy. Roles are suggestions, not gospel.
- #cd7345oklch(64.7% 0.129 47)Dominant
- #612c1coklch(36.2% 0.082 38)Surface
- #f3e3ccoklch(92.3% 0.035 77)Ink
- #af8061oklch(63.9% 0.073 54)Accent
- #cdbba6oklch(80.2% 0.035 72)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Inter Tight | 14px | 400 | 2 | 0 | Aa Bb Cc |
| h3 | Inter Tight | 127px | 600 | 1 | 0 | Aa Bb Cc |
| body | Inter Tight | 14px | 300 | 2 | 0 | Aa Bb Cc |
| caption | Inter Tight | 12px | 400 | 2.4 | 0 | Aa Bb Cc |
| button | Inter Tight | 14px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1336px
:root {
--color-dominant: #cd7345;
--color-surface: #612c1c;
--color-ink: #f3e3cc;
--color-accent: #af8061;
--color-detail: #cdbba6;
}
/* CSS variables exposed by source */
:root {
--border-thin: 0.5px;
--bg-primary: #F8F8F8;
--font-medium: 500;
--color-jobs-3: #b4d7f8;
--color-read: #c0ab3c;
--text-size-primary: 14px;
--color-underlined: 34, 34, 34;
--color-learn-3: #fffbe2;
--border-table: #222;
--color-dotteds-rgb: 34, 34, 34;
--rounded-small: 4px;
--color-errors: #FA5D29;
--bg-primary-rgb: 248, 248, 248;
--color-read-3: #DBD6C0;
--border-gray: #ededed;
--bg-input-hover: #f8f8f8;
--font-extrabold: 700;
--text-size-large: 22px;
--bg-secondary: #222;
--color-connect: #FF602C;
--color-odd-rows: #f8f8f8;
--color-inspire-3: #E2F4E9;
--color-orange: #FA5D29;
--bg-input: #fff;
--color-white: #fff;
--font-1: Inter Tight;
--font-black: 800;
--color-learn: #FFF083;
--color-featured: #f8f0ee;
--border-input: #ededed;
--color-connect-3: #FFC5B1;
--color-awards-3: #917eda;
--text-size-small: 11px;
--font-bold: 600;
--color-read-2: #CDC38B;
--rounded-normal: 8px;
--text-size-medium: 18px;
--color-primary-rgb: 34, 34, 34;
--color-connect-2: #FFAE94;
--color-awards: #502bd8;
--color-input: #222;
--color-primary: #222;
--color-red: #FA5D29;
--bg-4rd: #f8f8f8;
--color-inspire-2: #C8E4D3;
--rounded-large: 1rem;
--color-inspire: #AAEEC4;
--color-blue: #49B3FC;
--font-light: 300;
--color-jobs-2: #99ccfc;
--font-normal: 400;
--color-learn-2: #FFF9D0;
--color-awards-2: #6749d1;
--color-jobs: #74bcff;
--bg-white: white;
--bg-3rd: #ededed;
--color-link: #222;
--color-white-rgb: 255, 255, 255;
--header-height: 71px;
--check-toggle-color-ball: #fff;
}Drop-in prompt
Build a landing page in the visual style of Awwwards — Features.
Reference design system (extracted from the live site):
- Palette: #cd7345, #612c1c, #f3e3cc, #af8061, #cdbba6
- Typefaces: Inter Tight
- 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/awwwards-com--product
