imagine.dev — Design System

1. Visual Theme & Atmosphere

Imagine.dev presents a rare design posture in the developer tools space: confident restraint. Where most dev-tool sites reach for drama through dark themes and neon accents, imagine.dev uses a warm off-white background (rgb(238, 238, 241)) and an extremely tight greyscale palette. The atmosphere is quiet, focused, and typographically precise — closer to a well-designed print publication than a software landing page.

Built in Svelte, the site is leaner and more intentional than most. Every element earns its place. The choice of Neue Haas Grotesk Display — a premium, historically significant grotesque — at featherweight 200 across nearly every element signals extreme typographic confidence. Light weights in premium typefaces are harder to execute well; they require precise spacing and sizing. Here, they work.

The dark footer anchoring an otherwise light page creates clear structural closure. The contrast between the warm-grey canvas and the near-black (rgb(24, 24, 27)) footer and primary text is intentional and studied.

2. Color Palette & Roles

Background / Canvas

• rgb(238, 238, 241) — Primary page background; warm grey with a hint of blue — not paper white, not cool grey
• rgb(255, 255, 255) — Card/panel surfaces within the canvas
• rgb(237, 237, 240) / rgb(215–217, 215–217) — Dividers and subtle surface variants

Text / Foreground

• rgb(24, 24, 27) — Near-black; primary text, footer background, borders
• rgb(172, 172, 175) — Muted/secondary text; labels and captions
• rgb(238, 238, 241) — Light text on dark backgrounds (footer, dark cards)

Interactive / Component

• rgb(244, 244, 247) — Button default background (light mode buttons)
• rgb(156, 163, 175) / rgb(85, 85, 85) — Progress indicators, muted UI elements

Absent: No accent colour whatsoever. No brand colour, no blue, no green, no highlight. This is an intentional commitment to pure greyscale as a system.

3. Typography Rules

Neue Haas Grotesk Display is the singular typeface throughout. No fallback beyond the generic sans-serif. This is a high-confidence, font-loaded stack — the entire typographic personality depends on this font loading.

Scale — near-universal weight 200

• H1: 60px / 200 weight / 64px line-height / −1.5px tracking — graceful display type, light as air
• H2: 24px / 200 weight / 32px line-height — deliberately delicate for a section header
• H3: 14px / 200 weight / 20px line-height — micro, used for labels or sub-categories
• Body: 16px / 200 weight / 24px line-height
• Paragraphs: 14px / 500 weight / 19.25px line-height — the lone exception; paragraphs use medium weight for readability contrast against the light-weight headings
• Buttons: 16px / 200 weight

The inversion: Headings are light, body paragraphs are medium. This reverses the conventional hierarchy. Large type is ethereal; small text is anchored. The result is a page that reads with unusual grace.

No letter-spacing on body text. Only H1 uses negative tracking.

4. Component Stylings

Buttons: Two distinct types:

• Light button: rgb(244, 244, 247) background, rgb(24, 24, 27) text and border, layered shadow (inner white/dark, outer drop) — a classic pressed-button depth effect
• Dark button (.bg-primary): rgb(24, 24, 27) background, rgb(172, 172, 175) text — inverted, subdued

Hover on dark button: oklab(0.999994 … / 0.06) — barely-there white tint, near-imperceptible change. Very restrained interactivity.

Input fields: Transparent background, white border at 24% opacity on dark areas (oklab(… / 0.24)), no background fill. Clean ghost inputs.

Shadows: Extremely nuanced — multi-layer shadows combining drop shadow (0px 1px 1px, 0px 2px 5px), inset top highlight (0px 3px 0px 0px inset), inset bottom shadow (0px -2px 0px 0px inset), and inset bottom border (0px 1px 0px 0px inset black). This is a button that feels physically pressed.

Border radii: 8px (default), 12px, 15px, 16px, 20px, 3.35544e+07px (effectively infinite — full pill).

5. Layout Principles

Section gap is 16px 80px (row / column) — wide column gap for a grid layout. Header has 96px horizontal padding. Footer uses 80px top / 96px bottom padding — generous and intentional closure.

The Svelte architecture keeps component styles encapsulated. The layout appears to use a 12-column grid system (class col-span-12 observed). Content spans full width at the container level; internal layout uses the column grid for feature arrangements.

Breakpoints: 480px, 600px, 767px — three-point mobile-first scale. Compact compared to most modern sites, suggesting a relatively simple responsive restructuring.

6. Depth & Elevation

Elevation is achieved through multi-layer button shadows that simulate physical press depth. This is the most sophisticated shadow use in the dataset — not mere drop shadows but a full light-physics simulation:

• Top highlight (inset, slight white): simulates light from above
• Bottom shadow (inset, slight dark): simulates ground shadow
• Bottom border (inset, black): crisp edge definition
• Outer drop shadow (2–5px): card lift from surface

Cards use rgba(0,0,0,0.04–0.08) 4px 0 20px — lateral shadows suggesting panels floating above the canvas from the side.

The oklab colour space usage in hover states and borders is a modern CSS4 signal — this site is deliberately using cutting-edge CSS.

7. Do’s and Don’ts

Do:

• Use neue-haas-grotesk-display exclusively — weight 200 for all UI, weight 500 for paragraph body text.
• Use the warm off-white canvas (rgb(238, 238, 241)), not white or cool grey.
• Apply the multi-layer button shadow to all button components.
• Use rgb(24, 24, 27) as your near-black text and border colour.
• Keep the palette strictly greyscale — no colour accents.
• Use oklab for transparent borders and hover overlays where supported.
• Apply 80–96px horizontal padding to major layout containers.

Don’t:

• Use colour. The system is deliberately monochromatic.
• Swap Neue Haas Grotesk for a system font or Inter.
• Make headings heavier than 200 weight — the lightness is the brand.
• Add gradients or photographic backgrounds.
• Use border-radius above 20px for non-pill elements.
• Simplify the button shadow to a single-layer drop shadow — the depth physics matter.

8. Responsive Behavior

Three breakpoints (480, 600, 767px) give a lean responsive model. The 12-column grid likely collapses from multi-column feature rows to single-column stacks below 767px. The 96px header padding likely reduces significantly at mobile. Section gaps (16px 80px) probably shift to column-only at narrow widths.

The 3.35544e+07px border-radius value (a floating point maximisation) is a Svelte/CSS quirk for full-pill rounding without 9999px — functions identically.

9. Agent Prompt Guide

Build in the style of imagine.dev: warm off-white canvas rgb(238,238,241), near-black rgb(24,24,27) as text and UI colour, pure greyscale with zero accent colour. Font: Neue Haas Grotesk Display, weight 200 throughout — except paragraphs which use weight 500 for contrast. H1 at 60px/−1.5px tracking. Multi-layer button shadows simulating physical depth: inset top highlight + inset bottom shadow + inset bottom border + outer drop. Horizontal container padding 80–96px. Footer dark background (rgb(24,24,27)). Interactive hover states use near-imperceptible oklab overlays. Svelte component architecture — styles are scoped. Three breakpoints: 480, 600, 767px.

Generated by Sparkbites — extracted from live CSS analysis