Planetize Design System
v alpha Outfit · Mint 2026
Brand & Style

Quiet luxury,
organized by design.

A single typeface, a single color family, and a strict 8px rhythm — engineered so AI agents and humans produce on-brand artifacts across web, documents, and decks without needing to ask.

Overview
Foundations
Family
Mint
11-step scale
Type
Outfit
5 weights
Rhythm
8 px
14 px exception
Voice
Considered
Confident · quiet
Typography
Outfit
Family
Outfit

Heading

Outfit · 44px / 400 / 1.2 / -0.015em

Body

Outfit · 16px / 300 / 1.75

Eyebrow

Outfit · 12px / 500 / 0.1em / UPPER

Wordmark

Outfit · 36px / 500 / 0.08em

Letters

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Numbers

010203040506070809
Web Scale
Display
64 / 400 / 1.1
Aa
H1
44 / 400 / 1.2
Aa
H2
40 / 400 / 1.2
Aa
H3
28 / 500 / 1.25
Aa
Body lg
20 / 300 / 1.6
Aa
Body md
16 / 300 / 1.75
Aa
Eyebrow
12 / 500 / 0.1em
Eyebrow
Doc Scale
H1
28 / 500 / 1.25
Aa
H2
20 / 500 / 1.3
Aa
H3
14 / 600 / 0.02em
Aa
Body
16 / 400 / 1.5
Aa
Quote
20 / 300 / 1.6
Aa
Caption
12 / 400 / 1.4
Aa
Slide Scale
Display
88 / 400 / 1.05
Aa
H1
56 / 500 / 1.15
Aa
H2
36 / 500 / 1.2
Aa
Body
24 / 300 / 1.5
Aa
Callout
32 / 300 / 1.4
Aa
Eyebrow
14 / 600 / 0.16em
Eyebrow
Colors
Mint · Aspirational
Primary
Mint 600
#477371
Text
Mint 800
#385252
Surface
Mint 50
#F3F8F7
Cursor / Deep ink
Mint 950
#1E2D2E
Aspirational · Blue
#0E0F26
Editorial / decks
Aspirational · Green
#32594E
Editorial / decks
Aspirational · Tan
#D9C091
Print / tier-1
Logo
4 lockups · 6 tints
Icon 48 × 48
PLANETIZE
Wordmark 216 × 48
PLANETIZE
Icon + Text 280 × 48
PLANETIZE
Stacked 86 × 48
Spacing
8 px base
32 px
EYEBROW
6 px

Title block

8 px

Description copy reflects the measured line length, icon offset, and CTA spacing rhythm.

8 px
Scale
4 px
8 px
16 px
24 px
32 px
64 px
128 px
320 px
Page margins
Web · 64 px Web mobile · 20 px Doc · 1 in Slide · 80 px
Shapes
Soft · generous
sm
8 px
md
16 px
lg
24 px
xl
32 px
full
pill
Elevation & Depth
Tonal · soft

The brand is essentially flat. Depth is conveyed through tonal layering — page tint over surface over inline accent — and a single soft drop shadow tinted by mint-800 at 8% opacity.

Glass surface

Frosted Mint

Backdrop blur 20 px on a 45 % white. Used only for the nav menu overlay.

Surface
Glass mint
Border
1 px Mint 100
Blur
20 px

Shadow

Soft card

0 4 24 rgba(56, 82, 82, 0.08)

x / y
0 / 4 px
Blur
24 px
Color
Mint 800 · 8%
Components
3 button styles
Buttons · 16 px / 600 / pill / uppercase
Padding · 12 / 24 px · Hover · spring 1.02 ↑
Motion
Gentle springs
Springs
PresetStiffnessDamping
Button hover40025
Link hover20022
Panel entrance30028
Active dot40020
Cursor
4 px dot · 48 px ring · 1.5 px border · velocity stretch max 1.4×
Do's & Don'ts
Guardrails

Do

  • Use mint-600 once per screen as the primary action.
  • Lead with weight contrast (300 ↔ 500) before reaching for color.
  • Snap every font size to multiples of 4 (14 is the only exception).
  • Match the type scale to the medium — web, doc, or slide.
  • Keep the eyebrow → headline → body section pattern.
  • Use Outfit Light (300) as the default body weight.

Don't

  • Introduce a second typeface — no Poppins, no Inter, no Times.
  • Apply 0.08em letter-spacing to display headings (wordmark only).
  • Use pure black on screen — use mint-800 or mint-950.
  • Mix the aspirational accents (blue / green / tan / rose) with core mint inside one artifact.
  • Mix sharp and rounded corners in the same view.
  • Stack drop shadows beyond the documented 0 4 24 mint-800 / 8 %.
Artifact Recipes
For agents
PDF · DOC

One-pager

  • 1 in margins · single column
  • Header: Icon + Text mint-800, 32 px tall
  • Title doc-h1 mint-950 · body doc-body mint-800
  • Pull-quote doc-quote mint-700, no quote marks
  • Footer: eyebrow centered mint-400
Slides · 16:9

Deck

  • 1920 × 1080 · 80 px margins
  • Cover: eyebrow → slide-display → wordmark
  • Section divider: mint-50 fill, slide-h1
  • Max 5 bullets at slide-body 24 px / 300
  • Footer: page no. mint-400 right · wordmark left
Internal · Status

Doc / update

  • Use doc-* scale exclusively
  • Lead with TL;DR in doc-quote mint-600
  • Tables 1 px mint-100 borders · doc-h3 headers
  • No emoji · no exclamation points · no rah-rah
Email

Signature

  • Two lines max
  • Name · label-md mint-800
  • Title · body-sm mint-600
  • Logo: Icon only, 32 px tall, mint-600
Social · 1080²

Post

  • Background mint-50 or white — never both
  • Headline slide-h2 (36 px) mint-950 top-left
  • Subhead body-lg (20 px) mint-700
  • Logo Icon + Text stacked · mint-800 · bottom-right · 48 px
Press · Editorial

Tier-1 layout

  • Use aspirational palette (blue / green / tan / rose)
  • Pair with mint-50 surface and Outfit only
  • Generous 1.5× spacing rhythm vs. web
  • Icon-only logo · subtle hairline rules