Espanda Design System · v1.1

Espanda Design

The internal design system for Espanda — the AI-native operating system for digital agencies.

v1.1 · Logo locked (Habañero) · Owner: Ronak · Updated: 2026-04-28

If this is your first day with the system

Pick the path that matches your role. Each takes 15–30 minutes end-to-end.

If you're a

Designer

  1. 01Read Strategy
  2. 02Read Creative Direction
  3. 03Skim Inspirations
  4. 04Open Color foundation
  5. 05Pick a logo palette

Then ping Ronak for the locked Figma file.

If you're a

Engineer

  1. 01Skim Strategy
  2. 02Read Foundations (color → spacing)
  3. 03Tour Components
  4. 04Download Tailwind config
  5. 05Memorise the Lexicon

Then clone the repo, run `npm install`, and read CLAUDE.md.

If you're a

Content / marketing

  1. 01Read Strategy in full
  2. 02Read Voice & tone
  3. 03Memorise the Lexicon
  4. 04Read Inspirations
  5. 05See the logo + motion

Banned words live in the Voice page — bookmark it.

What's locked, what's iterating

v1.0 means foundations are stable. Components are deliberately listed as iterating — every primitive will be refined one at a time with the team.

Strategy
Mission, vision, beliefs, customer, positioning. The substance.
Locked
Creative direction
Why every visual decision was made the way it was.
Locked
Inspirations
Annotated reference library — websites, palettes, anti-references.
Locked
Color
Lexicon-tied multicolor system. ink + cream anchors. 8 lexicon hues.
Locked
Typography
Ranade (display) + Satoshi (body) + JetBrains Mono — both ITF.
Locked
Motion principles
9 animation variants. Each tied to lexicon meaning. No gifs.
Locked
Iconography
Phosphor (brand-character) + Lucide (utility plumbing).
Locked
Spacing & radius
4-px base scale, 7-step radius. Content-dense by design.
Locked
Voice & tone
5 personality adjectives, 6 voice axes, 8 agent voices, banned words list.
Locked
Logo · Bloom
6-petal bloom. Geometry + motion + Habañero palette all locked. v1.1.
Locked
Wordmark · SVG paths
Path-based wordmark generated via scripts/wordmark-to-paths.py. Re-run with Ranade locally for authentic typography.
Locked
Favicon set
Full bloom for ≥ 64 px, simplified 3-petal mark for ≤ 48 px. SVG + PNG + ICO. /public/brand/.
Locked
Components
8 primitives shipped at v0.1. Each will be refined one at a time with the team.
Iterating

The single source of truth

Every colour, font, spacing value, motion curve, and lexicon entry lives in one file. Edit it and everything updates.

File path

lib/tokens.ts

Plus three siblings carrying related content: lib/strategy.ts (brand strategy), lib/voice.ts (voice content), lib/inspirations.ts (reference library). Together these four files contain everything this design system expresses.

How to update

  1. 01

    Find the value you want to change in lib/tokens.ts (or one of the sibling lib files). Edit it locally.

  2. 02

    Run npm run dev and verify on every page that consumes that token (Color, Typography, Components, Logo, etc.).

  3. 03

    Open a PR. The PR title should name the round and the aspect — e.g. “Round 6 · Logo · Lock palette to Habañero.” Document the decision in Phase_2_Decisions.md.

  4. 04

    Merge after design + engineering review. Bump the sidebar version label.

Two ways to enter the system

Strategy

The substance — mission, customer, problem, solution, differentiators. Read this first.

Creative direction

The why behind every visual decision. Read second.

Foundations

Color, typography, motion, spacing — the locked tokens.

Components

Real React primitives. Iterating one at a time with the team.