Back to Home

Smuch Design System

Color Palette

--color-background#F5F0E1
--color-secondary#A8D8B9
--color-accent-primary#E08060
--color-accent-secondary#90C0D8
--color-text#405020
--color-text-light#5A7830
--color-text-mutedrgba(64,80,32,0.6)
--color-text-inverse#FFFFFF
--color-border#C7BCAE
--color-card#FFFAF0
--color-input#FFFFFF

Typography

Heading 1 Example

Font: Montserrat, Weight: 800, Size: 2.5rem

Heading 2 Example

Font: Montserrat, Weight: 700, Size: 2rem

Heading 3 Example

Font: Montserrat, Weight: 700, Size: 1.5rem

Heading 4 Example

Font: Montserrat, Weight: 700, Size: 1.25rem
Heading 5 Example
Font: Montserrat, Weight: 700, Size: 1rem
Heading 6 Example
Font: Montserrat, Weight: 700, Size: 0.875rem

Body text example. This paragraph demonstrates the standard text styling and line height.

Font: Montserrat, Weight: 400, Size: 1rem, Line Height: 1.6

Spacing

--spacing-xs: 0.5rem (8px)
--spacing-sm: 1rem (16px)
--spacing-md: 2rem (32px)
--spacing-lg: 4rem (64px)
--spacing-xl: 8rem (128px)

Border Radius

--radius-sm: 0.25rem
--radius-md: 0.5rem
--radius-lg: 1rem