Digital Services Design Language demo page
This page showcases the elements of the Digital Services Design Language (DSDL) that are currently implemented.
Color palette
Brand colors
These colors are canonized as CSS variables. Example: --calitp-brand-blue
-
Cal-ITP Blue
(blue-70) -
Cal-ITP Cyan
(cyan-40) -
Cal-ITP Yellow
(yellow-30)
Full range
These CSS variables take the form --dsdl-{color}-{number}. Example: --dsdl-red-40
- red-10
- red-20
- red-30
- red-40
- red-50
- red-60
- red-70
- red-80
- red-90
- red-100
- orange-10
- orange-20
- orange-30
- orange-40
- orange-50
- orange-60
- orange-70
- orange-80
- orange-90
- orange-100
- yellow-10
- yellow-20
- yellow-30
- yellow-40
- yellow-50
- yellow-60
- yellow-70
- yellow-80
- yellow-90
- yellow-100
- green-10
- green-20
- green-30
- green-40
- green-50
- green-60
- green-70
- green-80
- green-90
- green-100
- cyan-10
- cyan-20
- cyan-30
- cyan-40
- cyan-50
- cyan-60
- cyan-70
- cyan-80
- cyan-90
- cyan-100
- blue-10
- blue-20
- blue-30
- blue-40
- blue-50
- blue-60
- blue-70
- blue-80
- blue-90
- blue-100
- purple-10
- purple-20
- purple-30
- purple-40
- purple-50
- purple-60
- purple-70
- purple-80
- purple-90
- purple-100
- indigo-10
- indigo-20
- indigo-30
- indigo-40
- indigo-50
- indigo-60
- indigo-70
- indigo-80
- indigo-90
- indigo-100
- pink-10
- pink-20
- pink-30
- pink-40
- pink-50
- pink-60
- pink-70
- pink-80
- pink-90
- pink-100
- gray-10
- gray-20
- gray-30
- gray-40
- gray-50
- gray-60
- gray-70
- gray-80
- gray-90
- gray-100
- slate-10
- slate-20
- slate-30
- slate-40
- slate-50
- slate-60
- slate-70
- slate-80
- slate-90
- slate-100 (black)
Typography
Fonts
Space Grotesk
Space Grotesk is a proportional sans-serif typeface with modern feeling and strong readability. It has a sense of urbanity and trustworthiness, with strong, clean lines. It is used for headings and display text on Cal-ITP websites.
See it on Google FontsNoto Sans
Noto is designed specifically for accessibility and global communication, offering high-quality fonts with various weights and widths in sans, serif, mono, and other styles. This font family supports over 1,000 languages and 150 scripts. It’s a contemporary, aesthetic font with high reading eligibility. It supports scripts of CA’s main languages: English, Spanish, Mandarin + Cantonese, Tagalog, Vietnamese, Korean, Armenian, Arabic, Russian, Farsi, Hindi, and Japanese. It is used for body copy on Cal-ITP websites.
See it on Google FontsSource Code Pro
Source Code Pro is an open-source monospace typeface designed to work well in user interface and coding environments. It is used on Cal-ITP websites when fixed-width type is appropriate, such as displaying code.
See it on Google FontsCore styles
| Headline | Title | Subtitle | Body | |
|---|---|---|---|---|
| Large |
Amazingly few discotheques provide jukeboxes.
|
Amazingly few discotheques provide jukeboxes.
|
Amazingly few discotheques provide jukeboxes.
|
Amazingly few discotheques provide jukeboxes.
|
| Medium |
Amazingly few discotheques provide jukeboxes.
|
Amazingly few discotheques provide jukeboxes.
|
Amazingly few discotheques provide jukeboxes.
|
Amazingly few discotheques provide jukeboxes.
|
| Small |
Amazingly few discotheques provide jukeboxes.
|
Amazingly few discotheques provide jukeboxes.
|
Amazingly few discotheques provide jukeboxes.
|
Amazingly few discotheques provide jukeboxes.
|
-
Display
- font-size:
- 64px
- font-weight:
- 600
- line-height:
- 1.125
Amazingly few discotheques provide jukeboxes. -
Small caps
- font-size:
- 12px
- font-weight:
- 400
- line-height:
- 1.625
- text-transform:
- uppercase
Amazingly few discotheques provide jukeboxes. -
Caption
- font-size:
- 12px
- font-weight:
- 400
- line-height:
- 1.625
Amazingly few discotheques provide jukeboxes. -
Footnote
- font-size:
- 10px
- font-weight:
- 400
- line-height:
- 1.625
Amazingly few discotheques provide jukeboxes. -
Code
- font-size:
- 16px
- font-weight:
- 400
- line-height:
- 1.625
Amazingly few discotheques provide jukeboxes.
Spacing
| Sample | Variable | px | rem |
|---|---|---|---|
|
A box illustrating the size of something using spacing 05 (half)
|
--spacing-05 | 4px | 0.25rem |
|
A box illustrating the size of something using spacing 1
|
--spacing-1 | 8px | 0.5rem |
|
A box illustrating the size of something using spacing 2
|
--spacing-2 | 16px | 1rem |
|
A box illustrating the size of something using spacing 2-05 (two and a half)
|
--spacing-2-05 | 20px | 1.25rem |
|
A box illustrating the size of something using spacing 3
|
--spacing-3 | 24px | 1.5rem |
|
A box illustrating the size of something using spacing 4
|
--spacing-4 | 32px | 2rem |
|
A box illustrating the size of something using spacing 5
|
--spacing-5 | 40px | 2.5rem |
|
A box illustrating the size of something using spacing 6
|
--spacing-6 | 48px | 3rem |
|
A box illustrating the size of something using spacing 7
|
--spacing-7 | 56px | 3.5rem |
|
A box illustrating the size of something using spacing 8
|
--spacing-8 | 64px | 4rem |
|
A box illustrating the size of something using spacing 9
|
--spacing-9 | 72px | 4.5rem |
|
A box illustrating the size of something using spacing 10
|
--spacing-10 | 80px | 5rem |
|
A box illustrating the size of something using spacing 15
|
--spacing-15 | 120px | 7.5rem |
|
A box illustrating the size of something using spacing 20
|
--spacing-20 | 160px | 10rem |
Note: For lines we want to be exactly 1 logical pixel without scaling, we use a 1px value directly.