Design System
Inspired by Tiro

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

01 / COLORS
Color Palette
Brand Primary — Tironian Brown
Tironian Brown
#3A2018
Brand primary, CTAs
Brown 950
#2B201D
Foreground text
Brown 800
#5C372B
Hover states
Tironian Brown Scale
Brown 50
#F8F2F0
Tinted surface
Brown 100
#EBDAD4
Badge backgrounds
Brown 200
#D5BAB2
Decorative borders
Brown 300
#C6A296
Muted icons
Brown 400
#9C6D5F
Secondary icons
Brown 500
#885F53
Mid-tone accent
Brown 600
#7A4B3D
Hover text
Brown 700
#674236
Active states
Brown 800
#5C372B
Dark accent
Brown 900
#3A2018
Brand primary
Brown 950
#2B201D
Deepest tone
Stone Neutral Scale
Stone 50
#FAFAF9
Page canvas
Stone 100
#F5F5F4
Alt background
Stone 200
#E7E5E4
Borders, dividers
Stone 300
#D6D3D1
Disabled borders
Stone 400
#A8A29E
Placeholder text
Stone 500
#78716C
Secondary text
Stone 600
#57534E
Body text (secondary)
Stone 700
#44403C
Body text (primary)
Stone 800
#292524
Headings
Stone 900
#1C1917
Max contrast
Stone 950
#0C0A09
Near-black
Surface Modes
Default UI
Perfectly crafted meeting notes
Alt Section
Perfectly crafted meeting notes
Brand Hero
Perfectly crafted meeting notes
Marketing Cream
Perfectly crafted meeting notes
Typography Scale
Brand Hero
Brand Hero — 48px / 700 / 1.10 / Averia Serif Libre
Brand Sub-hero
Brand Sub-hero — 32px / 500 / 1.20 / Averia Serif Libre
Brand Body — Perfectly crafted meeting notes, beyond language barriers.
Brand Body — 18px / 300 / 1.40 / Averia Serif Libre
브랜드 히어로 (KR)
Brand Hero KR — 40px / 700 / 1.15 / Noto Serif KR
ブランドヒーロー (JP)
Brand Hero JP — 40px / 700 / 1.15 / Noto Serif JP
Heading 1
H1 — 36px / 700 / 1.10 / Pretendard JP
Heading 2
H2 — 30px / 600 / 1.20 / Pretendard JP
Heading 3
H3 — 24px / 600 / 1.30 / Pretendard JP
Heading 4
H4 — 20px / 600 / 1.40 / Pretendard JP
Paragraph Large — Your workspace for meetings, notes, and knowledge. All in one place.
Paragraph Large — 18px / 400 / 1.50 / Pretendard JP
Paragraph Medium — Navigation and emphasized text
Paragraph Medium — 16px / 500 / 1.50 / Pretendard JP
Paragraph — Standard reading text for articles and descriptions
Paragraph — 16px / 400 / 1.50 / Pretendard JP
Paragraph Small — Secondary text, metadata, timestamps
Paragraph Small — 14px / 400 / 1.43 / Pretendard JP
Paragraph Mini — Badges, fine print, timestamps
Paragraph Mini — 12px / 500 / 1.33 / Pretendard JP
Caption — Section labels
Caption — 11px / 400 / 1.30 / Pretendard JP / uppercase
03 / BUTTONS
Button Variants
Primary
Secondary
Ghost
Destructive
OAuth / SSO Buttons
Badges & Status
진행중 완료됨 대기중 삭제 보류 Premium
Card Examples
Transcription

Real-time Notes

Record and transcribe meetings as they happen. Support for 15+ languages with real-time translation.

AI Summary

Smart Summaries

Get perfectly structured meeting memos, one-pagers, and action items — generated in seconds.

Sharing

One-click Share

Share meeting notes with your team instantly. One link, every device, always in sync.

05 / FORMS
Form Elements
Default
Focus (brown ring)
Error (red ring)
Spacing Scale
2
4
6
8
12
16
20
24
32
48
64
07 / RADIUS
Border Radius Scale
4px
Buttons, inputs
6px
Default (--radius)
8px
Cards
12px
Large cards
16px
Logo container
9999px
Badges
50%
Avatars
Elevation & Depth
Level 0: Flat
No shadow
Level 1: Whisper
1px solid stone-200
Level 2: Subtle
shadow-sm
Level 3: Elevated
shadow-md
Focus
2px solid brand ring