Arts Ac Uk
Photographic
Loading
Stanford Edu
Warm ochre and deep forest—crisp sans-serif, spacious grid, grounded in academic authority.
Click any value to copy. Roles are suggestions, not gospel.
- #b4040coklch(48.5% 0.197 28)Dominant
- #54680aoklch(48.4% 0.113 122)Surface
- #fc7d83oklch(73.7% 0.155 19)Ink
- #94896boklch(63.2% 0.045 90)Accent
- #be9185oklch(69.6% 0.058 35)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | edict | 20px | 400 | 1.5 | 0 | Aa Bb Cc |
| h2 | Source Sans 3 | 14px | 400 | 1.4 | 0 | Aa Bb Cc |
| h3 | Source Sans 3 | 20px | 500 | 1.2 | 0 | Aa Bb Cc |
| body | Source Sans 3 | 20px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Source Sans 3 | 20px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #b4040c;
--color-surface: #54680a;
--color-ink: #fc7d83;
--color-accent: #94896b;
--color-detail: #be9185;
}
/* CSS variables exposed by source */
:root {
--spacing-08em: .8em;
--color-spirited-dark: #c74632;
--spacing-prose-wide: 75ch;
--color-grey-20: #d5d5d4;
--spacing-chapter-padding-top-lg: 12.8rem;
--color-sky-med: #98d0ec;
--color-cardinal-red-xxdark: #541107;
--color-force-white: #fff;
--color-grey-100: #2e2d29;
--color-illuminating-med: #ffd044;
--spacing-06em: .6em;
--color-grey-50: #979694;
--color-spirited-light: #f4795b;
--color-digital-green-dark: #006f54;
--spacing-card-padding-lg: 3.2rem;
--color-gray-300: lab(85.1236% -.612259 -3.7138);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-grey-0: #fff;
--color-grey-10: #eaeaea;
--spacing-animate-bg-circle-size: 95%;
--color-content-default: #111;
--color-poppy-med: #f08c28;
--color-illuminating: #fedd5c;
--color-white: #fff;
--color-gray-400: lab(65.9269% -.832707 -8.17473);
--spacing-chapter-padding-top-sm: 6.4rem;
--color-spirited-med: #d24632;
--radius-sm: .8rem;
--spacing-03em: .3em;
--font-sans: "Source Sans 3", "Source Sans 3 Fallback", "Helvetica Neue", helvetica, arial, sans-serif;
--color-fog-light: #f4f4f4;
--font-weight-bold: 700;
--color-gray-100: lab(96.1596% -.0823438 -1.13575);
--spacing-section-padding-top-sm: 4.8rem;
--spacing-07em: .7em;
--color-olive-dark: #7a863b;
--spacing-thumb-width-lg: 22rem;
--color-illuminating-dark: #fec51d;
--color-grey-90: #43423e;
--color-sky: #4298b5;
--spacing-horizontal-margin-lg: 40px;
--color-poppy: #e98300;
--color-lagunita: #007c92;
--spacing-1em: 1em;
--radius-2xl: 2.4rem;
--radius-md: 1.2rem;
--radius-lg: 1.6rem;
--color-spirited: #e04f39;
--color-force-black: #111;
--spacing-thumb-width-sm: 12.8rem;
--color-grey-70: #6d6c69;
--color-grey-110: #111;
--color-grey-40: #ababa9;
--color-palo-alto: #175e54;
--color-archway-light: #766253;
--font-source-sans: "Source Sans 3", "Source Sans 3 Fallback";
--color-digital-red-light: #e50808;
--spacing-section-padding-top-md: 6.4rem;
--spacing-02em: .2em;
--color-red-300: lab(76.5514% 36.422 15.5335);
}Drop-in prompt
Build a landing page in the visual style of Stanford Edu.
Reference design system (extracted from the live site):
- Palette: #b4040c, #54680a, #fc7d83, #94896b, #be9185
- Typefaces: edict, Source Sans 3
- Macrostructure: Photographic
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/stanford-edu
