Lusion · About
Photographic
Loading
Lucidmotors
Cool, deep space-age minimalism - crisp sans serif, muted electric blues and warm metallic grays.
Click any value to copy. Roles are suggestions, not gospel.
- #3c9dc2oklch(65.5% 0.104 227)Dominant
- #1a4454oklch(36.5% 0.054 226)Surface
- #d3bb94oklch(80.3% 0.059 80)Ink
- #947b6aoklch(60.2% 0.040 56)Accent
- #bdb7aeoklch(78.2% 0.014 78)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Lucid Serif VF | 72px | 400 | 1.11 | -0.5px | Aa Bb Cc |
| h2 | Lucid Serif VF | 64px | 400 | 1.19 | -0.5px | Aa Bb Cc |
| h3 | Lucid Sans VF | 20px | 400 | 1.6 | 0 | Aa Bb Cc |
| body | Times | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Times | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #3c9dc2;
--color-surface: #1a4454;
--color-ink: #d3bb94;
--color-accent: #947b6a;
--color-detail: #bdb7ae;
}
/* CSS variables exposed by source */
:root {
--space-size-96: 96px;
--spacing-regular-horizontal-widest: 98px;
--font-lucid-ibm-plex-sans: "IBM Plex Sans",Georgia,Times,"Times New Roman",serif,"Apple Color Emoji","Segoe UI Emoji";
--space-size-32: 32px;
--spacing-section-regular: 90px;
--border-neutral-gray-70: #323232;
--color-primary-colors-gold: #d7be96;
--color-sand: #e1e0dc;
--spacing-section-narrow: 25px;
--color-broken-white: #f2f2f2;
--font-lucid-amiri: "Amiri",Georgia,Times,"Times New Roman",serif,"Apple Color Emoji","Segoe UI Emoji";
--color-satin-linen: #e5e1cf;
--color-off-white: #f9f9f9;
--space-size-24: 24px;
--font-gt-america: "GTAmerica",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Roboto,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
--color-black-2: #141414;
--space-size-12: 12px;
--font-lucid-serif: "Lucid Serif VF",Georgia,Georgia,Times,"Times New Roman",serif,"Apple Color Emoji","Segoe UI Emoji";
--color-yellow-light: #8a6e33;
--space-size-72: 72px;
--border-neutral-white: #ffffff;
--color-yellow-lighter: #e4dfd4;
--border-brand-gold: #d7be96;
--color-pure-black: #000000;
--spacing-regular-horizontal-wide: 174px;
--text-brand-gold: #d7be96;
--font-serif-fallback: Georgia,Times,"Times New Roman",serif,"Apple Color Emoji","Segoe UI Emoji";
--text-neutral-gray-40: #8e8e8e;
--space-size-48: 48px;
--color-snow: #e4dfde;
--surface-neutral-gray-80: #1c1c1c;
--space-size-4: 4px;
--text-neutral-gray-70: #444444;
--text-alert-error: #ff202b;
--space-size-16: 16px;
--color-grey-light: #ededed;
--font-schnyder-s: "SchnyderS",Georgia,Times,"Times New Roman",serif,"Apple Color Emoji","Segoe UI Emoji";
--text-neutral-white: #ffffff;
--color-white: #ffffff;
--font-lucid-serif-italic: "Lucid Serif Italic VF",Georgia,Georgia,Times,"Times New Roman",serif,"Apple Color Emoji","Segoe UI Emoji";
--color-grey: #787878;
--surface-neutral-white: #ffffff;
--spacing-narrow-horizontal: 25px;
--space-size-8: 8px;
--surface-brand-gold: #d7be96;
--font-size-base: 16px;
--font-lucid-saudi-riyal: "dirham-symbol",Georgia,Times,"Times New Roman",serif,"Apple Color Emoji","Segoe UI Emoji";
--color-sand-light: #e4e0d2;
--surface-neutral-gray-5: #f0f0f0;
--spacing-regular-horizontal: 250px;
--color-grey-dark: #555354;
--space-size-160: 160px;
--color-fossil-light: #e7e7e4;
--space-size-120: 120px;
--border-neutral-gray-80: #2d2d2d;
--color-error-red: #eb5858;
--radius-small: 4px;
--color-grey-darker: #40423f;
--space-size-64: 64px;
--color-black: #1b1b1b;
}Drop-in prompt
Build a landing page in the visual style of Lucidmotors.
Reference design system (extracted from the live site):
- Palette: #3c9dc2, #1a4454, #d3bb94, #947b6a, #bdb7ae
- Typefaces: Lucid Serif VF, Times, Arial
- 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/lucidmotors-com--subscribe
