Skip to content

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.

Colors

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.

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.

The MobiMart hero with Space Grotesk and Noto Sans fonts labeled on it

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