HomeServices WorkProcess Playground Testimonials BlogLet's talk →
// 02 · CSS Tool

THEME
BUILDER

Full control over colour, typography, spacing, shape and effects. Export as CSS variables, Tailwind config, or JSON tokens.

← Back to Playground
CONTROLS
Colours ▾
Primary (brand) color
Secondary / accent
Preset palettes
Background mode
Dark Light Midnight Cream
Accent saturation 100%
Typography ▾
Display font
Bebas Neue Playfair Anton Oswald Baskerville Syne
Display Heading
Body font
DM Sans Inter Lora IBM Plex Nunito Source Sans
Body text for paragraphs and descriptions.
Base font size 16px
Line height 1.65
Letter spacing 0em
Heading weight
Regular Semibold Bold Black
Shape & Spacing ▾
Border radius
Sharp Slight Rounded Soft Pill
Card padding 1.4rem
Card gap 0.8rem
Button style
Filled Outline Ghost Gradient
Nav style
Transparent Filled Bordered
Effects ▾
Glow intensity medium
Blur / glass depth 10px
Border opacity 7%
Shadow depth medium
Badge / tag style
Pill Square Dot prefix
Gradient text headings
Animated background blobs
Grid overlay
Noise texture
Animated stat numbers
Surface & Cards ▾
Card surface style
Subtle fill Glassmorphism Solid Outlined only
Surface opacity 4%
Border style
Solid Dashed None
Icon style
Emoji Number Symbol
Hover lift on cards
Hover glow on cards
Show form block
yourbrand.com
Contact →
⚡ Live preview · editing now

YOUR BRAND
LIVES HERE

This preview responds to every control in real time. Adjust colours, typography, shape and effects to build your design system.

Get started →
See our work
Design Development Strategy
48+
Projects
4.9
Avg rating
3yr
Experience
Fast
Built for performance from day one.
◎
Focused
Every element earns its place.
✦
Refined
Details matter. We sweat every one.
Get in touch
EXPORT TOKENS