Strategy · Creative Direction
Creative direction
Why every visual decision in this design system was made the way it was. The bridge between strategy and surface.
The thesis
If we had to write the entire visual brief in three sentences, this is it.
Espanda is a vibrant, content-dense, Indian-rooted operating system that earns trust through the agents that do the work — not through buzzwords.
Visually, that means: bold but disciplined colour, premium type, motion that has meaning, density that respects the user's time, and an aesthetic that feels confidently from somewhere — not from no-where. We are escaping the SAP-grey of enterprise and the blank-white of generalist tools at the same time.
The design system reflects a brand that is grown-up playful, sharp, generous, vibrant, and disciplined. Every choice below is an expression of one of those five.
Colour
Round 1
Decision
Lexicon-tied multicolor system. Anchored by deep ink + warm cream. Eight brand colours, one per lexicon agent.
Why
- ·We rejected enterprise-grey (SAP, Salesforce) and Silicon-Valley-monochrome (Linear, Vercel) as starting points. Espanda's personality is vibrant + grown-up playful — that demands real colour.
- ·We rejected single-accent palettes (one indigo, one saffron) because they couldn't support the lexicon. The lexicon is the brand vocabulary — agents, surfaces, pricing tiers — so each lexicon word needed its own colour identity.
- ·We tied the palette to founder-shared visual references (MP088 Strawberry, MP113 Habañero, Sarvam, Flowify gradients). Anchors got warmer (cream-not-white, ink-not-charcoal) so the palette feels lived-in, not synthetic.
Informed by
- +Sarvam AI — Indian-rooted colour confidence (saffron-red, no apology)
- +Stellar Strawberry palette — warm anchors with saturated accents
- +Flowify gradients — atmospheric, layered colour mixing
What we're not
- ×Pure white surfaces (cold, generic)
- ×Cool slate / blue-grey neutrals (Silicon-Valley default)
- ×Single-accent SaaS palettes (no character)
Typography
Round 2
Decision
Ranade for display, Satoshi for body, JetBrains Mono for code. Both Ranade and Satoshi by Indian Type Foundry.
Why
- ·We needed a display face with character that doesn't fight the colour. Ranade has the geometric-but-warm balance; General Sans was too neutral; Cabinet Grotesk too condensed; Switzer too workhorse.
- ·Inter is the SaaS-default and signals nothing. Satoshi is functionally equivalent (UI metrics, weight range) but has measurably more humanist warmth — better against vibrant colours, equally readable.
- ·Both ITF fonts. Same studio. The brand's Indian-rooted thesis now lives in three layers: name (Espanda from Spanda) + palette (Saffron, Stellar Strawberry) + type (ITF). Three layers is hard to read as accidental.
Informed by
- +Webflow — typography craft as a visible feature
- +Linear — typographic restraint at scale
What we're not
- ×Inter as the body (too generic)
- ×Display fonts with theatrical character (Recoleta, Bricolage)
- ×Heavy condensed display (Cabinet Grotesk for hero copy — too aggressive)
Motion
Round 3
Decision
Every animation maps to one of eight lexicon words. The Espanda mark is itself the motion — one circular bloom that performs every behaviour.
Why
- ·We rejected motion-as-decoration. Every animation in the system has a name (Beat, Pulse, Wave, Spark, Hum, Echo, Surge, Drift) and a meaning. If a motion doesn't fit one of the eight, it doesn't ship.
- ·We rejected literal wave / pulse-line marks (too on-the-nose). The mark is an abstract circular bloom inspired by mandala / yantra geometry — Indian heritage modernised, not literal.
- ·Library stack: Framer Motion (component-level), GSAP (scroll choreography), Lottie (illustration), CSS (basics). Together they cover every animation Claude / Notion / Monday do — no gifs, ever.
- ·Ambient motion on dashboards (Pulse loop, Hum loop) makes the product feel alive without demanding attention. Slow-heart-rate cadence, not dance music.
Informed by
- +Notion — micro-interaction craft and warmth
- +Linear — line-art and ambient motion precision
- +Sarvam — scroll-driven choreography (with less whitespace)
- +Claude (anthropic.com) — restrained, code-driven motion
What we're not
- ×Gifs (always)
- ×tailwindcss-animate defaults (too generic)
- ×Decorative motion that doesn't reinforce the brand
Spacing & density
Round 4
Decision
4-px base scale with deliberate gaps. Content-dense at the component level, generous at the section level.
Why
- ·Espanda is content-dense by design. The brand value of vibrant + sharp + disciplined maps directly onto component density. We're escaping Sarvam-blank as much as we're escaping SAP-cluttered.
- ·The scale skips 28, 36, 44, 56, 72 px deliberately — those gaps prevent in-between values muddying layouts.
- ·Section-level rhythm is generous (64–80 px) because long-form readability demands it. Component-level rhythm is tight (4–16 px) because density is a brand value.
Informed by
- +Monday — content-dense sections with elaborations
- +Linear — section-level rhythm
What we're not
- ×Sarvam-style blank space at component level
- ×Bootstrap-style padding-everywhere (too generic)
Voice & tone
Round 4
Decision
Grown-up playful, vibrant, sharp, generous, disciplined. Each lexicon agent has its own register inside the master voice.
Why
- ·We're escaping two voices at once: enterprise-stiff (SAP, Salesforce) and SaaS-breathless (every YC homepage). The right voice is closer to Basecamp's directness + Duolingo's playfulness + Stripe's clarity.
- ·Sixteen dead words are banned outright (innovative, seamless, empower, disrupt, etc.). They apply to every software company; therefore they say nothing.
- ·Each agent speaks differently. Beat is rhythmic. Pulse leads with numbers. Wave generates options. Spark names the win. Hum reports after the fact. Same brand voice; eight tones. Family of speakers.
- ·Indian-rooted in voice is left unspoken in copy. We don't translate to Hindi (yet); we don't lean on Indian idiom; the heritage shows up in pricing fairness and in the brands we admire, not in linguistic markers.
Informed by
- +37signals (Basecamp) — direct, founder-led
- +Duolingo — playful but never juvenile
- +Stripe docs — technical clarity, generous explanation
- +Zomato — Indian voice with global polish
What we're not
- ×Buzzword voice (innovative, seamless, world-class)
- ×Fear-mongering AI voice (replace your team!)
- ×Therapeutic / patronising voice (we're here to empower you)
Wordmark / logo direction
Parked. Will be locked after the bloom geometry is finalised.
The Espanda mark is currently a circular bloom (8 lexicon petals + halo + bindu). The geometry is a placeholder for designer iteration — we don't lock the wordmark until the founder is satisfied with the petal shape, asymmetry pattern, and detail level. When locked, the logomark will pair the bloom with “Espanda” in Ranade — horizontal lockup for sidebars, vertical for hero use. See Motion for the current bloom.
See also
Inspirations
The websites and brands we admire — what we're stealing from each, what we're skipping.
Brand strategy
The full strategic foundation — mission, customer, problem, solution.
Voice & tone
How Espanda speaks. Per-agent voice. Banned words.
The lexicon
Eight words. Eight colours. The brand vocabulary.