Digital Services Design Language overview

The Digital Services Design Language is an ongoing effort to unify the user experience across all of Cal-ITP’s websites and applications – calitp.org, California Mobility Marketplace (MobiMart), and Cal-ITP Benefits.

End users will benefit from a consistent feeling across each product, increasing usability through predictability and building trust in the Cal-ITP brand.

For our own efforts in maintaining these products, using a unified structure of color, spacing, type, and components will reduce error and increase speed for both design and dev, while including flexibility to meet specific product needs.

For example, a comprehensive color palette is included. Each product can draw on different parts of it and feel unified while maintaining its own individual identity. Similarly, we have base styles and sizes for typography, but can use different font stacks to adapt to each product.

Color

Brand colors

• Cal-ITP Blue

  (blue 70)

• Cal-ITP Cyan

  (cyan 40)

• Cal-ITP Yellow

  (yellow 30)

Full palette

When paired with black, the values of the colors in the 10–50 range have been selected to have a color contrast that complies with WCAG 2.2 Level AA (at least 4.5:1), and the values in the 60–100 range have compliant contrast when paired with white.

1. red
   10
2. red
   20
3. red
   30
4. red
   40
5. red
   50
6. red
   60
7. red
   70
8. red
   80
9. red
   90
10. red
    100

1. orange
   10
2. orange
   20
3. orange
   30
4. orange
   40
5. orange
   50
6. orange
   60
7. orange
   70
8. orange
   80
9. orange
   90
10. orange
    100

1. yellow
   10
2. yellow
   20
3. yellow
   30
4. yellow
   40
5. yellow
   50
6. yellow
   60
7. yellow
   70
8. yellow
   80
9. yellow
   90
10. yellow
    100

1. green
   10
2. green
   20
3. green
   30
4. green
   40
5. green
   50
6. green
   60
7. green
   70
8. green
   80
9. green
   90
10. green
    100

1. cyan
   10
2. cyan
   20
3. cyan
   30
4. cyan
   40
5. cyan
   50
6. cyan
   60
7. cyan
   70
8. cyan
   80
9. cyan
   90
10. cyan
    100

1. blue
   10
2. blue
   20
3. blue
   30
4. blue
   40
5. blue
   50
6. blue
   60
7. blue
   70
8. blue
   80
9. blue
   90
10. blue
    100

1. purple
   10
2. purple
   20
3. purple
   30
4. purple
   40
5. purple
   50
6. purple
   60
7. purple
   70
8. purple
   80
9. purple
   90
10. purple
    100

1. indigo
   10
2. indigo
   20
3. indigo
   30
4. indigo
   40
5. indigo
   50
6. indigo
   60
7. indigo
   70
8. indigo
   80
9. indigo
   90
10. indigo
    100

1. pink
   10
2. pink
   20
3. pink
   30
4. pink
   40
5. pink
   50
6. pink
   60
7. pink
   70
8. pink
   80
9. pink
   90
10. pink
    100

1. gray
   10
2. gray
   20
3. gray
   30
4. gray
   40
5. gray
   50
6. gray
   60
7. gray
   70
8. gray
   80
9. gray
   90
10. gray
    100

1. slate
   10
2. slate
   20
3. slate
   30
4. slate
   40
5. slate
   50
6. slate
   60
7. slate
   70
8. slate
   80
9. slate
   90
10. slate
    100
    (DSDL Black)

Typography

To maintain flexibility across products, we use a set scale with multiple typeface options for brand typefaces (larger, stylized typefaces used for emphasis and headlines, or “display” copy) and base typefaces (highly legible typefaces used for body copy, smaller captions and labels, etc.).

Typefaces

calitp.org and MobiMart use Space Grotesk as their brand typeface and Noto Sans as their base typeface. Cal-ITP Benefits (including the back-end admin interface) uses Noto Sans as both brand and base typeface.

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.

See it on Google Fonts

Noto 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 legibility. It supports scripts of California’s main languages: English, Spanish, Mandarin + Cantonese, Tagalog, Vietnamese, Korean, Armenian, Arabic, Russian, Farsi, Hindi, and Japanese.

See it on Google Fonts

Source 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 products when fixed-width type is appropriate, such as displaying code.

See it on Google Fonts

Core style matrix and type hierarchy

Headlines	Titles	Subtitles	Body
Headline L	Title L	Subtitle L	Body L
Headline M	Title M	Subtitle M	Body M
Headline S	Title S	Subtitle S	Body S

• Heading 1 (Headline L)
• Heading 2 (Headline M)
• Heading 3 (Title M)
• Heading 4 (Subtitle M)
• Heading 5 (Title S)
• Heading 6 (Subtitle S)

Additional common styles

• Display
• Small caps
• Caption
• Footnote
• Code