Typography
headline-display
Noto Serif
Size: 6rem / Weight: 700 / Lead:
headline-lg
Noto Serif
Size: 2.5rem / Weight: 600 / Lead:
body-lg
Manrope
Size: 1.25rem / Weight: 400 / Lead:
body-md
Manrope
Size: 1rem / Weight: 400 / Lead:
label-lg
Manrope
Size: 0.875rem / Weight: 700 / Lead:
label-sm
Manrope
Size: 0.75rem / Weight: 600 / Lead:
Components
btn-primary
Preview
backgroundColor
#2e7d32
textColor
#ffffff
rounded
9999px
padding
{spacing.md} {spacing.xl}
btn-secondary
Preview
backgroundColor
#f5f5f0
textColor
#5d4037
rounded
9999px
padding
{spacing.md} {spacing.xl}
border
1px solid {colors.secondary}
btn-ghost
Preview
backgroundColor
transparent
textColor
#2e7d32
rounded
8px
padding
8px
card-featured
Preview
backgroundColor
#fff9c4
textColor
#5d4037
rounded
24px
padding
48px
card-standard
Preview
backgroundColor
#f5f5f0
textColor
#1c1c18
rounded
12px
padding
24px
border
1px solid {colors.border}
input-search
Preview
backgroundColor
#f5f5f0
textColor
#5d4037
rounded
9999px
padding
{spacing.md} {spacing.lg}
width
320px
chip-active
Preview
backgroundColor
#e8f5e9
textColor
#2e7d32
rounded
8px
padding
{spacing.xs} {spacing.md}
badge-alert
Preview
backgroundColor
#c62828
textColor
#ffffff
rounded
9999px
size
24px
nav-island
Preview
backgroundColor
#121212
textColor
#ededea
rounded
24px
padding
16px
icon-frame
Preview
backgroundColor
#5d4037
textColor
#ffffff
rounded
9999px
size
48px
fab-action
Preview
backgroundColor
#fff9c4
textColor
#5d4037
rounded
9999px
size
64px
border
2px solid {colors.secondary}
tooltip-info
Preview
backgroundColor
#1c1c18
textColor
#ededea
rounded
8px
padding
{spacing.sm} {spacing.md}
sidebar-panel
Preview
backgroundColor
#1c1c18
textColor
#ededea
width
260px
padding
24px
topbar-header
Preview
backgroundColor
#121212
textColor
#ededea
height
60px
padding
0 {spacing.lg}
modal-dialog
Preview
backgroundColor
#f5f5f0
textColor
#1c1c18
rounded
32px
padding
64px
width
500px
Spacing
xs
4px
sm
8px
md
16px
lg
24px
xl
48px
xxl
64px
Rounding
none
0px
sm
8px
md
12px
lg
24px
xl
32px
full
9999px