A spatial design system for tools you can step inside.
The tokens, foundations and components behind Ostrid — where flat floor plans become rooms,
routes and light you can walk through. Built on one dark world, Ostrid White, and a single
confident purple.
17color tokens8type sizes13component groupsmapped to the 2D → 3D journey
01
Color
foundations
Surfaces · Ostrid Dark
Canvas
#0F0F0F
Panel
#161616
Field / Card
#1C1C1C
Popover
#232323
Hover
#2C2C2C
Text & hairlines · Ostrid White
Text primary
#F6F6F6
Text secondary
#A0A0A3
Text tertiary
#6B6B6E
Hairline
white · 11%
Primary & spatial palette — mapped to the 2D → 3D journey
Purple 2D · CTA
#6456F6
Live 3D view
#1FC9C0
Walk route
#FB8A5B
Level floor
#46D08A
Critical alert
#F2544A
02
Typography
space grotesk · sora · jetbrains mono
Space Grotesk display
Ostrid
wordmark · headlines
500600700
Sora interface
Ag
abcdefg · 0123456789
300400500600
JetBrains Mono measures
Ag
3.20 m · 24.6 m²
dimensionstokens
Step inside.32 / 600 / -3%
Rooms, routes & light20 / 600 / -1%
Level inspector16 / 600
Live 3D preview14 / 500
Draw a layout in 2D, see it live in 3D, and walk the space like a game.14 / 400
Caption — edited 2 days ago12.5 / 400
Ostrid · Spatialmono 12 / up
03
Space, radius & elevation
4px base · soft corners
Spacing scale
4
8
12
16
24
32
48
64
Radius
7
10
14
20
full
Elevation
card
popover
04
Iconography
phosphor · regular
cursor
wall
room
door
stairs
3D
walk
camera
measure
levels
search
move
undo
lock
show
settings
Components
05
Buttons
06
Inputs & selects
focused
Last edited
Editor
Metric — meters
dropdown · role select · unit
07
Toggles & controls
Switch
Live 3D previewUpdate the 3D view as you draw
Walk modeStep inside and move through the space
View · 2D / 3D · live
Status · lock / visibility
08
Tabs
pill · live
09
Menus & popovers
with keycaps
Editing tools
Copy ⌘C
Move M
Group ⌘G
Align A
Spatial tools
Wall W
Room R
Door D
Stairs S
Floor F
Import formats (<35 Mb)
DWG, DXF & PDF — 2D plans OBJ & glTF — 3D models JPEG & PNG — references