unroot.design — Design System

1. Visual Theme & Atmosphere

Unroot is a design agency or studio site built around a deep purple cosmological identity — dark indigo backgrounds, violet accents, and periwinkle blue blocks that together evoke something between a digital observatory and an independent design collective. The palette transitions from pale sky blue through violet to near-black navy, creating a sense of depth that feels cosmic without being cliché.

The typography pairs Recoleta (a warm retro-serif with ink-trap character) with Figtree (a clean geometric sans), creating a tension between the nostalgic and the contemporary. This dual-voice system is unusual and memorable: display type carries warmth and history, body copy carries clarity and modernity.

2. Color Palette & Roles

The palette is a continuous purple-blue gradient expressed as discrete surfaces. No warm tones, no neutrals except white text. Color is the design system.

3. Typography Rules

Display: Recoleta — a revival serif with Art Deco-meets-1970s warmth, ink traps, and expressive curves.
Body/UI: Figtree — a clean geometric sans-serif with friendly proportions.

The negative letter-spacing on Recoleta at large sizes (-2.32px) is intentional — the typeface’s wide letterforms need compression to feel designed rather than default. Figtree uses a slight -0.4px tracking throughout to feel snug.

Notably absent: No monospace, no ultra-bold weights, no uppercase text-transform despite the visual boldness of the color system.

4. Component Stylings

• Artifact block — periwinkle rgb(139,170,243) rectangular panel; likely a featured project showcase
• Projects add block — soft purple rgb(153,111,200) surface; secondary project card
• Navbar links — 20px Figtree, -0.4px tracking, white on transparent; space-efficient navigation
• Tag wrapper — .div.tag-wrapper; small pill labels, likely with purple background
• Footer — deep violet rgb(83,11,163) surface; full-width, high contrast
• Motion variable — --moving-coefficient: 1.65 and --video-move-vw: 209vw suggest parallax or scroll-driven animations

5. Layout Principles

• Full-bleed section-based layout; each div.n-section is a viewport-spanning context
• The 209vw movement value suggests horizontal scroll or wide parallax motion effects
• Content blocks (artifact, projects) likely arranged in asymmetric grid within sections
• No max-width token detected — likely full-viewport or very wide container
• Generous spacing between sections implied by the cosmic, unhurried atmosphere

6. Depth & Elevation

• Color depth gradient — rgb(29,4,102) (deepest) → rgb(83,11,163) → rgb(153,111,200) → rgb(139,170,243) creates a natural light-source-from-deep model
• Motion as depth — parallax (moving coefficient 1.65) creates Z-axis perception without static shadows
• White text at 100% opacity — no opacity gradations needed when contrast is already extreme
• No box shadows detected; the dark palette makes them invisible and unnecessary

7. Do’s and Don’ts

Do:

• Use Recoleta exclusively for display sizes (h1, h2); never for body or UI text
• Pair every Recoleta heading with Figtree body copy for tonal balance
• Keep text white — no gray tones needed against these rich backgrounds
• Use the color-as-depth model: darker = deeper in hierarchy
• Apply negative tracking to Recoleta at large sizes (-2px at 68px)

Don’t:

• Use Recoleta for small labels or UI elements — it breaks at tiny sizes
• Add warm or neutral tones to the palette; the entire identity is cool purple-blue
• Use the periwinkle or soft purple for text — they’re background/surface colors only
• Introduce gradients; the flat-surface color system is deliberate

8. Responsive Behavior

No explicit breakpoints captured. The 209vw motion value and viewport-filling sections suggest:

The 68px H2 will need responsive scaling — clamp() or viewport-relative units assumed.

9. Agent Prompt Guide

“Design in the style of unroot.design: deep indigo sections rgb(29,4,102), violet footer rgb(83,11,163), periwinkle featured blocks rgb(139,170,243), soft purple cards rgb(153,111,200), all text white, Recoleta serif for display headings with -2px letter-spacing, Figtree sans for body at 20px/-0.4px tracking, scroll-driven parallax motion, no warm tones, no shadows — cosmic design-studio aesthetic.”

Generated by Sparkbites — extracted from live CSS analysis