lummi.ai — Design System Reference

1. Visual Theme & Atmosphere

Clinical precision meets natural warmth. Lummi pairs a strict black-and-white foundation with two carefully chosen semantic accent colours — forest green for positive actions (free stock imagery) and cobalt blue for premium or navigational cues. The monochromatic base keeps the photography they showcase as the true hero, while Inter’s clean geometry ensures UI chrome never competes with visual content.

2. Color Palette & Roles

• background: rgb(255, 255, 255)
• text: rgb(9, 9, 11) — near-absolute black
• border: rgb(228, 228, 231) — zinc-200 for subtle dividers
• accentGreen: rgb(70, 130, 84) — CTA / free tier, forest green
• accentBlue: rgb(56, 96, 190) — premium / navigation, cobalt
• muted: rgb(85, 85, 85) — secondary text
• disabled: rgb(187, 187, 187) — disabled states

Notably absent: Colour theming beyond green+blue

3. Typography Rules

Typeface(s): Inter

Tech stack fonts hint: Next.js, Tailwind CSS

• h1: 125px / 128px, weight 600, −6.3px tracking — massive display
• h2: Scaled down with tight tracking
• body: 16px Inter 400

Philosophy: Each size level reinforces hierarchy without relying on colour.

4. Component Stylings

Border Radius: Subtle — rounded-md cards, rounded-full pills for tags

Shadows: Minimal utility shadows — content-first approach

Gradients: None

Components lean on spacing and typography for distinction rather than decorative chrome. Buttons likely use filled + ghost variants in the primary colour.

5. Layout Principles

Built on Next.js + Tailwind CSS. Layouts follow a content-first grid — wide gutters, deliberate whitespace rhythm. Section breaks use background-colour contrast rather than divider lines.

6. Depth & Elevation

Elevation system: Minimal utility shadows — content-first approach. Depth is used purposefully, not decoratively.

7. Do’s and Don’ts

Do:

• Use the exact colour roles as defined — each serves a specific semantic purpose
• Respect the typeface role boundaries (each font has one job)
• Preserve generous whitespace — crowding breaks the design language
• Keep interactions restrained: hover opacity or colour-shift, not complex transforms

Don’t:

• Introduce colours outside the defined palette
• Mix typefaces beyond the established pairing
• Add drop shadows where the design is intentionally flat
• Use gradients unless the site already employs them
• Add Colour theming beyond green+blue
• Add decorative gradients

8. Responsive Behavior

Fluid type with tight tracking collapses gracefully; grid narrows to single column

On mobile, the core design language holds — the reduction is spatial (tighter gutters, stacked columns) not stylistic. Colour, typography, and component styles remain unchanged.

9. Agent Prompt Guide

Use this as a one-paragraph brief when prompting an AI to build in this design language:

“Photography SaaS: white+black base, Inter, massive 125px display headers with -6px tracking, forest green CTAs, cobalt navigation, no gradients, content (photos) as the hero element”

Generated by Sparkbites — extracted from live CSS analysis