Sun Home Design System
Typography, buttons, and color tokens from Figma.
Display
display-lg
Large Display
display-sm
Small Display
Headings
heading-1 — 36px / 72px, Medium 500
Heading One
heading-2 — 32px / 40px, Medium 500
Heading Two
heading-3 — 24px / 32px, Medium 500
Heading Three
heading-4 — 20px / 24px, Medium 500
Heading Four
Body
body-lg — 19px / 20px, Regular 400
This is an example of the body large type style used for prominent paragraph text.
body-md — 16px, Regular 400
This is an example of the body medium type style used for general paragraph text.
body-sm — 14px, Regular 400
This is an example of the body small type style used for supporting text and details.
label — 10px, Regular 400
This is the label type style
Captions (Sometype Mono)
caption-lg — 16px, uppercase
Large Caption Text
caption-sm — 14px, uppercase
Small Caption Text
Long-form Editorial Rhythm
Editorial paragraphs use the standard Page body typography. Section spacing is owned by Pattern rather than authored with inline styles or spacer elements.
Major section heading
A major section has a larger separation from the content before it and the standard heading-to-paragraph gap after it.
Subsection heading
Subsections use a smaller, consistent separation that preserves the heading hierarchy.
Section after a callout
Adjacent module margins resolve to one intentional section gap instead of doubling.
CTA Buttons — On Light
CTA Buttons — On Dark
Capacity Tabs
btn-tab-light — Classic pill
btn-tab-dark — Emphasized buttons
Icon Buttons Sm
Default
Hover
Pressed
Focus
Disabled
Ghost
Light
Dark
Media
Icon Buttons lg
Default
Hover
Pressed
Focus
Disabled
Ghost
Light
Dark
Media
Gray Neutrals
0
50
100
200
300
400
500
600
700
800
900
Warm Neutrals
on-surface
surface
light-01
light-02
light-03
dark-01
dark-02
dark-03
Cool Neutrals
on-surface
surface
light-01
light-02
light-03
dark-01
dark-02
dark-03
Brand
orange
orange-end
light-start
orange-50
orange-200
orange-400
light-end
cool-start
cool-end
Semantic
success
success-bg
warning
warning-bg
error
error-bg
info
info-bg
Background Gradients
atmospheric-warm
atmospheric-cool
atmospheric-sunrise
atmospheric-dark