Studio/brand
Brand · Components · Tokens · v1.0

The building blocks
for everything we make.

A living style guide — every color, type ramp, component and motion token used across the studio. One source of truth.

01 — Color

Black, white, grey.
Color lives in the accents.

The brand is built on a neutral chassis. Containers are pure white or pure black on a #f4f4f4 canvas. There is no single brand color — accents come from the gradient spectrum.

Canvas
Background
#f4f4f4 · --background
Surface · light
Pure white
#ffffff · --surface
Surface · dark
Pure black
#0a0a0a · --ink
Neutral scale
50
100
200
300
400
500
600
700
800
900
950
02 — Gradients

The spectrum of accents.

Gradients carry energy and personality. Use them for hero tiles, feature illustrations and CTAs — never as body text color.

Sunset
--gradient-sunset
Aurora
--gradient-aurora
Citrus
--gradient-citrus
Meadow
--gradient-meadow
Ocean
--gradient-ocean
Magenta
--gradient-magenta
Ember
--gradient-ember
Spectrum
--gradient-spectrum
03 — Typography

Three voices.
No more, no less.

Plus Jakarta Sans does the heavy lifting. Instrument Serif provides italic accents for warmth. Geist Mono carries metadata, numbers and callouts.

Primary — Plus Jakarta Sans
Design that ships.
Heading 02
Heading 03
Heading 04 — medium body

Body — the workhorse weight. Designed for long-form readability with relaxed leading and balanced rhythm.

Small — captions and supporting copy.

font-family: var(--font-sans) · weights 400 / 500 / 600 / 700
Secondary — Instrument Serif (italic accent)
for everyone
Used sparingly, for emphasis and warmth.
font-family: var(--font-serif) · style: italic
Accent — Geist Mono
MEMBERSHIP BENEFITS
01 · CONNECT YOUR CALENDAR
--gradient-spectrum: linear-gradient(...)
// callouts, numbers, system labels
font-family: var(--font-mono)
04 — Spacing

A 4px rhythm.

All spacing is derived from a 4-pixel base. Use the scale; never invent in-between values.

4px
8px
12px
16px
24px
32px
48px
64px
96px
05 — Radius

Soft, generous corners.

Containers favor large, confident radii. Pills use full radius.

sm
md
lg
xl
2xl
3xl
4xl
full
06 — Elevation

Restrained shadow.

Shadow signals lift, not depth. Use sparingly to separate floating surfaces from the canvas.

shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-pop
07 — Buttons

Pills, primarily.

The brand favors fully rounded buttons. Black is primary, white is secondary, gradients are reserved for hero CTAs.

Standard
On gradient
Shadcn Button variants
Sizes
08 — Pills & Badges

Small signals.

Pills label state, status and metadata. Eyebrows always use mono.

Start today How it works01MEMBERSHIP BENEFITSLifetime Discount — Limited Time
Default
Secondary
Outline
Destructive
09 — Inputs

Forms, clean.

Inputs default to white surfaces with soft borders. Focus rings inherit from --ring.

Text
Controls
10 — Overlays

Tooltips, popovers, modals.

All overlays share the same surface, radius and shadow tokens.

11 — Cards

Containers do everything.

Card patterns derived from real surfaces — feature tiles, numbered steps, pricing, dashed-border highlights.

Design board
Manage your queue with a simple board.
Fixed monthly rate
No surprises. One flat price each month.
Fast delivery
Designs in a couple days on average.
Top-notch quality
Senior-level design at your fingertips.
01
Connect
We'll handle cross-referencing so there are no double bookings.
02
Configure
Block off weekends, set up buffers. We make it easy.
03
Meet
Video chat, phone call, or a walk in the park.
Pause anytime

Temporarily pause your subscription anytime, no sweat.

Try it for a week

Not loving it after a week? Get 75% back, no questions asked.

Start today
Join Studio
Monthly Club
Pause or cancel anytime
Lifetime Discount — Limited Time
$4,995
/month
$5,995
Included
One request at a time
Unlimited stock photos
Avg. 48 hour delivery
Up to 2 users
Unlimited brands
Pause or cancel anytime
12 — Accordion

Frequently asked questions.

13 — Motion

Calm, confident motion.

Animations exist to clarify, never to decorate. Default to short durations and a soft ease-out curve.

Hover lift
Hover me
translate-y -4px · 300ms
Press scale
Gradient drift
Tokens
--duration-fast · 150ms
--duration-base · 250ms
--duration-slow · 400ms
--ease-out-soft
--ease-in-out-soft
cubic-bezier(0.22, 1, 0.36, 1)
14 — Layout

Generous, gridded, gutter-aware.

Max content width is 1400px. Default gutter is 24px on mobile, 40px on desktop. Always breathe.

12-column grid
Do
Stick to neutral surfaces.

White or black containers on the #f4f4f4 canvas. Reserve color for accent tiles and illustration.

Don't
Don't introduce new brand colors.

There is no single brand color. Accents come from the gradient spectrum — never a flat hue.

Studio · Brand v1.0
Living document · Last updated today