back to csds

commonspace design system

UI moodboard

Every atom on one page — in dedicated order: design tokens, the semantic type classes, and the components. The MDS pipeline keeps its own playground.

Design tokens

Colors

Semantic col-* tokens via light-dark().

Background

col-bg

col-bg-soft

col-bg-weak

Foreground (as type)

Ag

col-fg

Ag

col-fg-strong

Ag

col-fg-soft

Ag

col-fg-weak

Line (as border)

col-line-strong

col-line

col-line-soft

col-line-weak

Accent

col-accent-weak

col-accent

col-accent-strong

col-accent-fg

Error

col-error-weak

col-error

col-error-strong

Contrast — weakest bg × weakest fg

The quick brown fox jumps over the lazy dog.

col-bg-weak × col-fg-weak

Design tokens

Font sizes & families

Type scale

Ag Quartz jumpstext-fs-9
Ag Quartz jumpstext-fs-8
Ag Quartz jumpstext-fs-7
Ag Quartz jumpstext-fs-6
Ag Quartz jumpstext-fs-5
Ag Quartz jumpstext-fs-4
Ag Quartz jumpstext-fs-3
Ag Quartz jumpstext-fs-2
Ag Quartz jumpstext-fs-1

Families

The quick brown fox

Signature · font-fam-msq

The quick brown fox

Body · font-fam-main

The quick brown fox

Mono · font-fam-mono

Classes

Headings & structure

Headings use only hero → headline → topic — never eyebrow/label.

Ag Quartz jumpscsds-hero-l
Ag Quartz jumpscsds-hero-m
Ag Quartz jumpscsds-hero-s
Ag Quartz jumpscsds-headline-l
Ag Quartz jumpscsds-headline-m
Ag Quartz jumpscsds-headline-s
Ag Quartz jumpscsds-topic-l
Ag Quartz jumpscsds-topic-m
Ag Quartz jumpscsds-topic-s

Classes

Body & inline

Ag Quartz jumpscsds-copy-l
Ag Quartz jumpscsds-copy-m
Ag Quartz jumpscsds-copy-s
Ag Quartz jumpscsds-tagline

Inline tweaks (size & color inherit)

A line of body copy with an emphasized phrase, an inline const x = 1 snippet, and 1,234.56 in aligned figures.

Color is overridable

csds-copy-m with a trailing text-col-accent utility — the bundled color gives way.

Classes

Supporting

Ag Quartz jumpscsds-eyebrow-l
Ag Quartz jumpscsds-eyebrow-m
Ag Quartz jumpscsds-eyebrow-s
Ag Quartz jumpscsds-meta
Ag Quartz jumpscsds-caption
Something went wrongcsds-error

Classes

Control type

Label sizes (sm · md · lg)

Email addresscsds-label-l
Email addresscsds-label-m
Email addresscsds-label-s

Button label

Save changescsds-button-l
Save changescsds-button-m
Save changescsds-button-s

Components

Typography

Headings with rhythm

Heading 1

A line of default body copy (fs-3) under the heading shows the vertical rhythm.

Heading 2

A line of default body copy (fs-3) under the heading shows the vertical rhythm.

Heading 3

A line of default body copy (fs-3) under the heading shows the vertical rhythm.

Heading 4

A line of default body copy (fs-3) under the heading shows the vertical rhythm.

Heading 5

A line of default body copy (fs-3) under the heading shows the vertical rhythm.

Heading 6

A line of default body copy (fs-3) under the heading shows the vertical rhythm.

Body & lists

Default paragraph. The quick brown fox jumps over the lazy dog while csds-code renders monospace. Body copy carries most of the reading load, so it sets the measure, the leading, and the comfortable line length the rest of the system is tuned against.

  • Unordered item one
  • Unordered item two with a little more text to wrap
  • Unordered item three
  1. Compact ordered one
  2. Compact ordered two

Links: internal · external

Components

Controls — Small

we never share it

Components

Controls — Medium

we never share it

Components

Controls — Large

we never share it