Design System

01 — Color

Color Tokens

Primitives resolve to semantic roles in the SF Tokens v2 variable collection. Flint is the accent — one spark per view.

flint/500

#FEB100

action/primary

flint/400

#FFC803

action/primary-hover

flint/900

#5A3D00

press shadow, links

gray/900

#2F3136

text/primary

gray/700

#5C5F6A

text/secondary (AA)

gray/500

#80838D

decorative only

gray/300

#B1B1BC

disabled

gray/200

#DFE1EB

border, surface/muted

gray/100

#F0F2F8

surface/raised

gray/0

#FFFFFF

surface/page

green/600

#12892A

action/success

purple/500

#9068CD

Notion accent

02 — Typography

Type Scale

Roboto Slab for headings, Source Sans Pro for everything else. Rem-based scale, unitless line-heights.

Display / H1Roboto Slab 800 · 45/1.15

Overcome the overwhelm

H2Roboto Slab 700 · 32/1.25

Your story's command center

H3Roboto Slab 600 · 26/1.25

Plug-and-play Notion templates

BodySource Sans 400 · 18/1.6

Most writers aren't short on ideas — they're short on structure. Body copy runs at 18px with 1.6 line-height in Ink.

SecondarySource Sans 600 · 16 · gray/700

Supporting descriptions and captions — AA-compliant at gray/700.

03 — Components

Buttons

Primary wears the flint spark with an amber press shadow. Secondary is a slate outline. Success is reserved for purchase moments.

Get the Storyteller OS

Buy now — $79

Button text

Browse templates

Disabled