Style Guide — UCC Ontario
Design tokens, typography, colors, and component reference
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
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