Design System Palette — UCC Ontario
Dev only — design tokens, typography, colors, and component reference. Not linked in public nav.
01
Colors
Primary #00275E
Primary 900 #001a3f
Primary 800 #00275e
Primary 700 #0a3a7a
Primary 600 #1a4d96
Primary 500 #2a5db8
Primary 400 #4a7dd4
Primary 300 #7aa3e5
Primary 200 #b0cbf2
Primary 100 #dce8fa
Primary 50 #f0f5fd
Secondary #6D91AB
Secondary 700 #3d6178
Secondary 600 #4e7591
Secondary 500 #6d91ab
Secondary 400 #8cabc1
Secondary 300 #b0c7d6
Secondary 200 #d4e1eb
Secondary 100 #edf2f6
Secondary 50 #f6f9fb
Accent #FEB729
Accent 700 #b47d00
Accent 600 #d99a00
Accent 500 #feb729
Accent 400 #fec854
Accent 300 #fed97f
Accent 200 #fee9aa
Accent 100 #fff4d5
Accent 50 #fffaeb
02
Typography
Titles & Headings
Heading 1 — 48px
Heading 2 — 40px
Heading 3 — 32px
Heading 4 — 24px
Heading 5 — 18px
Heading 6 — 16px
Body Text
The Ukrainian Canadian Congress — Ontario Provincial Council unites and represents Ukrainian Canadians across Ontario through advocacy, cultural programming, newcomer support, and community building. Body copy is set in Manrope at 16px with comfortable 1.5 line-height for long-form readability.
Bold Hyperlink
- Unordered list item
- Unordered list item
- Ordered list item
- Ordered list item
- Ordered list item
03
Buttons
04
Spacing Scale
--space-1 0.25rem
--space-2 0.5rem
--space-3 0.75rem
--space-4 1rem
--space-5 1.25rem
--space-6 1.5rem
--space-8 2rem
--space-10 2.5rem
--space-12 3rem
--space-16 4rem
--space-20 5rem
--space-24 6rem
--space-32 8rem