Artforum
Portfolio Grid
Loading
Eyemagazine
Cool, precise geometry—muted teal and warm ochre—crisp sans-serif, open and airy.
Click any value to copy. Roles are suggestions, not gospel.
- #f4ed1aoklch(92.2% 0.195 107)Dominant
- #a10c37oklch(45.5% 0.176 14)Surface
- #f7a34boklch(78.3% 0.142 64)Ink
- #5682a4oklch(58.8% 0.071 243)Accent
- #d39e9doklch(74.9% 0.063 20)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Georgia | 14px | 400 | 1.29 | 0 | Aa Bb Cc |
| h3 | Helvetica | 14px | 700 | 1.29 | 0 | Aa Bb Cc |
| body | Georgia | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Georgia | 14px | 400 | 1.29 | 0 | Aa Bb Cc |
| button | Georgia | 14px | 400 | 1.29 | 0 | Aa Bb Cc |
Max content width 1200px
:root {
--color-dominant: #f4ed1a;
--color-surface: #a10c37;
--color-ink: #f7a34b;
--color-accent: #5682a4;
--color-detail: #d39e9d;
}
/* CSS variables exposed by source */
:root {
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--color-link-active: #666;
--spacing-1.5: .375rem;
--font-sans: Helvetica, Arial, sans-serif;
--text-lg: 1.125rem;
--font-weight-bold: 700;
--text-sm--line-height: calc(1.125 / .875);
--color-border: #e0e0e0;
--color-red: red;
--spacing-2.5: .625rem;
--color-black: #000;
--text-base--line-height: calc(1.5 / 1);
--spacing: .25rem;
--color-light-grey: #f4f4f4;
--font-serif: Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--text-xl: 1.25rem;
--text-sm: .875rem;
--color-link-hover: red;
--color-dark-grey: #666;
--color-link: #f60;
--color-dark-grey-hover: #333;
--color-orange: #f60;
--text-base: 1rem;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow-alpha: 100%;
--tw-drop-shadow-alpha: 100%;
--tw-border-style: solid;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--tw-shadow: 0 0 #0000;
--tw-ring-offset-width: 0px;
--default-font-family: Helvetica, Arial, sans-serif;
--tw-inset-ring-shadow: 0 0 #0000;
--default-transition-duration: .15s;
--default-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--tw-inset-shadow: 0 0 #0000;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Eyemagazine.
Reference design system (extracted from the live site):
- Palette: #f4ed1a, #a10c37, #f7a34b, #5682a4, #d39e9d
- Typefaces: Georgia
- 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/eyemagazine-com--blog-post-plucked-out-of-thin-air
