SYON Styleguide
Design system for minimal decision-making
Colors
Primary
#4F5D75
Secondary
#FFB997
Accent
#AEE0F4
Background
#FAF9F6
Text
#1A1A1A
Typography
Heading Large (Sora)
Font: Sora, Weight: Bold, Size: 36px
Heading Medium (Sora)
Font: Sora, Weight: Semibold, Size: 24px
Body Text Large (Work Sans)
Font: Work Sans, Weight: Regular, Size: 18px
Body Text Regular (Work Sans)
Font: Work Sans, Weight: Regular, Size: 16px
Buttons
Switch
Toggle Setting
Select
Spacing & Effects
Default Border
Subtle definition for cards and buttons
Heavy Border
Strong emphasis for interactive elements