Foundations & design tokens

Every color, size, and motion value in the Academy is a token. The system is built to WCAG 2.2 AA (AAA where feasible) — so the contrast figures below are computed live against the current theme. Switch the theme to watch them update.

Brand color — teal ramp

The EqualWeb brand teal #00c0a8 is only ~2.3:1 on white, so it fails text contrast by design. We use it for fills and large decorative shapes (with dark text), and use the darker teal-700/800 for links and text. The readout flags this for you.

  • teal-100
    #c3f5ea
    —
  • teal-300
    #5ce0cc
    —
  • teal-400 · brand
    #00c0a8
    —
  • teal-600 · link
    #0e7c6b
    —
  • teal-800 · emphasis
    #0b5347
    —

Neutrals

  • gray-50
    #f6f8fa
    —
  • gray-200 · border
    #cdd6e0
    —
  • gray-500
    #64748b
    —
  • gray-600 · muted text
    #475569
    —
  • gray-900 · body text
    #0a0e12
    —

Status fills

  • info
    #2a7de1
    —
  • success
    #18a558
    —
  • warning
    #f5a623
    —
  • danger
    #e5484d
    —

Readouts compare each fill against the page background. Fills carrying text in components always pair with a token foreground (e.g. --success-fg) that meets AA, plus an icon and a word — never color alone.

Type scale

--text-4xlAa accessible
--text-2xlAa accessible
--text-xlAa accessible
--text-mdAa accessible
--text-baseAa accessible body text at the readable 66ch measure
--text-smAa accessible

Spacing scale

--space-2
--space-4
--space-6
--space-8
--space-12

Focus & motion

Tab to the link below to see the focus ring (--focus-width / --color-focus). The ring uses a transparent outline + box-shadow so it stays visible in Windows High Contrast Mode. Motion respects prefers-reduced-motion.

Example focusable link