Binary Dreams
01 — Brand

Binary Dreams

A studio that builds mobile apps with care. Warm, calm, confident — a cool blueprint canvas with one electric cobalt accent doing the heavy lifting.

Wordmark
Binary.
Dreams
Mobile-first product studio · est. 2026
On dark
bd.
02 — Colors

A cool system, one bright accent

Blueprint paper and deep ink as the canvas, with one bright accent doing the heavy lifting.

Surfaces & ink

Blueprint
canvas
Canvas
#EEF3FA
surface
Surface
#FFFFFF
surf.alt
Surface Alt
#F6F9FD
sunken
Sunken
#E2EAF5
ink
Text
#0E2A66
success
Success
#1F8A52
warning
Warning
#C77900
danger
Danger
#D03A2A

Accent

Cobalt
Cobalt
Electric engineering blue, blueprint default

Accent ramp

Cobalt
soft
Cobalt Soft
#7E94F5
base
Cobalt
#2D52F0
deep
Cobalt Deep
#1A33B0
fg
Accent FG
#FFFFFF
03 — Typography

Apple system, used with restraint

San Francisco as shipped by the OS — no webfonts, no weight. A display/text pair that covers every viewport without ceremony.

Display / H1
Binary Dreams
88/740
H2
Thoughtful software.
64/720
H3
Built by a small team.
44/700
H4
Feature headline
32/700
H5
Subsection
24/600
H6
Small section title
20/600
Body MD
We design and ship mobile products that feel obvious from the first tap.
17/400
Body
Default running text — comfortable for long reads on web and in-app.
15/400
Caption
Supporting information, form hints, metadata.
13/510
Eyebrow
SECTION LABEL
12/600
04 — Spacing

A 4-base rhythm

Every gap, pad, and offset lands on a multiple of 4. The system scales from tight form fields to generous hero blocks.

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-7
32px
space-8
40px
space-9
56px
space-10
72px
space-11
96px
space-12
128px
05 — Radius

Softness on demand

radius-none
0px
radius-xs
4px
radius-sm
6px
radius-md
10px
radius-lg
14px
radius-xl
20px
radius-2xl
28px
radius-3xl
40px
radius-full
full
06 — Elevation

Tinted, quiet shadows

Shadows tinted toward the blueprint ink — cool blue, never pure black. They settle into the canvas instead of punching holes in it.

shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-glow
07 — Blueprint

Engineering blue, paired with the accent

A second narrative colour. The cobalt accent carries actions and brand; blueprint carries craft and engineering — grids, technical surfaces, code, admin chrome. Never a third accent.

Blueprint ramp

--bd-bp-*
bp.soft
Blueprint soft
#6FA0F0
bp.base
Blueprint
#2F6FE0
bp.deep
Blueprint deep
#1A4FB8
bp.ink
Blueprint ink
#0E2A66

Grid surfaces

Pair with --bd-canvas or --bd-surface. Use .bd-bg-grid-fade to taper edges.
Major grid .bd-bg-grid
Blueprint paper .bd-bg-grid-blueprint
Dots .bd-bg-grid-dots
Crosshair .bd-bg-grid-crosshair
Hero blueprint .bd-bg-hero-blueprint
08 — Text gradients

Display-only, used sparingly

Five gradients for hero titles and single-word emphasis. Never on body copy, buttons, or inputs — contrast comes first.

Binary Dreams .bd-grad-text-blueprint
Binary Dreams .bd-grad-text-blueprint-deep
Binary Dreams .bd-grad-text-ember
Binary Dreams .bd-grad-text-dawn
Binary Dreams .bd-grad-text-ink
09 — Motion

Curves, not linear

Fast enough to feel responsive, curved enough to feel alive. Default to base; reserve spring for moments of delight.

fast
1600ms
Hover, focus, micro states
base
2400ms
Default — buttons, tabs
slow
3200ms
Sheets, overlays
spring
3200ms
Emphasis — entrances
enru