Open DS

Accessibility

Five questions every design system answers about accessibility. These are Brand expressive’s answers, and each one points back to the reasons that chose it.

View all 4 accessibility tokens ↓

The reasons this scheme answers from

  • R1People and work contextCustomers who choose us, AA
  • R2Use scenariosOn the move, a few minutes

Question 1

Which states get their own visible value?

  • Hover, focus, disabled
  • Those and pressed (chosen)
  • All, including loading

Why Brand expressive picks it: Pressed for touch.

becauseQ4

default3.25rem
compact2.75rem
disabled0.4
focus

Question 2

How many signals carry each meaning?

  • Two: color and word (chosen)
  • Three: color, icon and word

Why Brand expressive picks it: Color and word.

becauseR1

size2
opacity1
pink light1

Question 3

What contrast floor do we hold?

  • AA (chosen)
  • AAA for text

Why Brand expressive picks it: AA, checked on every vivid color.

becauseR1

  • AA
  • from size
  • from opacity
  • from color.pink.light

Decisions point at primitives, so the rule lives in one place.

Question 4

What is the smallest target?

  • Compact, for a pointer
  • Touch size (chosen)
  • Large

Why Brand expressive picks it: Visitors come from social posts on phones.

becauseR2

  • default
    default
    → size.52
  • compact
    compact
    → size.44
  • disabled
    disabled
    → opacity.40
  • focus
    focus
    → color.pink.light.600· dark → color.pink.dark.700

Question 5

Where are the floors hardest to hold?

  • Dense tables
  • Long text
  • Forms
  • Brand color (chosen)

Why Brand expressive picks it: Vivid brand color is the hardest to keep readable.

becauseColor values

  • button · 2 keys
  • input · 2 keys
  • overlay · 1 keys

When to use

  • Keyboard focusUse: button/focus-ring at border-width.focus. Not: Removing the outline. Focus must show on vivid color.
  • The smallest clickable thingUse: size.control.default (touch). Not: A compact control. Phones first.

All accessibility tokens

4 tokens · each decision and the primitive it points to

  • size · 2size.523.25rem · 52pxsize.442.75rem · 44px
  • opacity · 1opacity.400.4
  • color.pink.light · 1color.pink.light.600#D61F7A
  • Decisions · 4size.control.default{size.52}size.control.compact{size.44}opacity.disabled{opacity.40}color.border.focus{color.pink.light.600}

Decisions reference primitives, so changing one primitive updates every decision and component that uses it.

Accessibility in Brand expressive: touch size. Visitors come from social posts on phones. Vivid brand color is the hardest to keep readable.