Building Visual Identities
A brand identity and design system for a fintech launch
- Type
- Self-initiated concept
- Discipline
- Brand & design systems
- Live build
- Creative Agency demo
01Introduction
A new financial product has to look credible on day one and still feel human. This study develops a visual identity and translates it directly into a coded design system, so the brand looks identical in every touchpoint.
02Challenge
Brand guidelines often live in a PDF that developers interpret differently on every page. Colours drift, spacing is inconsistent and the product ends up feeling less trustworthy than the pitch deck.
03Objectives
- A distinctive identity: palette, typography, illustration style
- Design tokens shared between design files and code
- A component library covering marketing pages and product UI
04Approach
Identity exploration
Bold geometric illustration paired with a restrained neutral palette balances personality with trust.
Tokenise everything
Colour, type, spacing, radius and motion become named tokens — the single source of truth.
Document in code
Components are documented with live examples so usage stays consistent.
05Identity in use
The Fennick demo applies this thinking: a three-colour palette and one type pairing, used with discipline across every page.
- Accent #FF4F1A
- Ink #121212
- Surface #F2EFE8
- Type Funnel Display · Inter
06Design & development
Tokens are exported as CSS custom properties and TypeScript constants, so designers and developers reference the same values. Components consume tokens only — no hard-coded colours.
Contrast pairs are checked automatically when tokens change, keeping the system accessible as it evolves.
Related live buildCreative Agency demoBold, typography-led studio site with a scrolling work rail, services, recognition list and journal.Open the demo07Technologies
08Final solution
The outcome is an identity that scales from a landing page to a full product without losing coherence. The Creative Agency demo shows a similarly bold, typography-led brand expression.
Explore the live demoThis is a self-initiated concept study by Straux Technologies. It does not describe work for a client, and no commercial results are claimed.