jsp-dsv0.1

Colourjsp

Semantic colour roles – surfaces, text, borders, actions and status – each with the colour that goes on it, its value in light and dark, and its measured contrast.

Foundation
Source
tokens/themes/jsp/color.json
Dark mode
tokens/themes/jsp/modes/dark.json
  • Roles, not shades

    Pages pick a role by what it is for. The ramps below are never used directly.

  • Two modes

    Every role has a dark value; data-mode="dark" swaps them all at once.

  • Measured

    Each pairing is checked against WCAG 2.2 AA – 4.5:1 for text, 3:1 for icons and boundaries.

Surfaces

Backgrounds, from the page up. Each shows the text that sits on it.

  • surface.page4.5:1
    Text: text.default
    light#ffffff19.80:1 ✓dark#0a0a0a18.97:1 ✓
    The page background behind everything else.
  • surface.default4.5:1
    Text: text.default · Cards, popovers, inputs
    light#ffffff19.80:1 ✓dark#17171717.18:1 ✓
    Cards, panels, inputs and other containers on the page.
  • surface.subtle4.5:1
    Text: text.default · Panels, the side nav
    light#fafafa18.97:1 ✓dark#17171717.18:1 ✓
    Slightly set-apart areas: alternate rows, sidebars, code blocks.
  • surface.muted4.5:1
    Text: text.default
    light#f5f5f518.16:1 ✓dark#26262614.50:1 ✓
    Stronger set-apart areas: tags, wells, selected rows. The darkest surface for default and subtle text.
  • surface.inverse4.5:1
    Text: text.inverse · Inverse bands set data-mode instead
    light#0a0a0a18.97:1 ✓dark#ffffff19.80:1 ✓
    Dark areas such as a footer or a tooltip. Use only text.inverse, icon.inverse and border.inverse on it.
  • surface.disabled
    Text: text.disabled · Exempt: disabled
    light#f5f5f52.31:1 dark#2626261.94:1
    Background of disabled controls.

Text and icons

On the page surface unless noted. Secondary text on a muted surface has its own role.

  • text.default4.5:1
    On surface.page
    light#0a0a0a19.80:1 ✓dark#fafafa18.97:1 ✓
    Body text and headings on page, default, subtle and muted surfaces.
  • text.subtle4.5:1
    On surface.page
    light#7373734.74:1 ✓dark#a3a3a37.85:1 ✓
    Secondary text: hints, metadata, captions. Meets 4.5:1 on page, default and subtle surfaces; on surface.muted use text.subtle-on-muted.
  • text.subtle-on-muted4.5:1
    On surface.muted · Only on surface.muted
    light#5252527.17:1 ✓dark#d4d4d410.21:1 ✓
    Secondary text when it sits on surface.muted, where text.subtle (grey.500) is 4.35:1 and under AA. Into Games TOKEN-CHANGES 1.
  • text.link4.5:1
    On surface.page · Always underlined
    light#17171717.93:1 ✓dark#e5e5e515.72:1 ✓
    Inline links. Always underline links, because colour alone does not set them apart from body text.
  • text.disabled
    On surface.page · Exempt: disabled
    light#a3a3a32.52:1 dark#5252522.53:1
    Text in disabled controls. Exempt from contrast minimums, so never use it for content that must be read.
  • icon.default3:1
    On surface.page
    light#0a0a0a19.80:1 ✓dark#fafafa18.97:1 ✓
    Icons that carry meaning, on light surfaces.
  • icon.subtle3:1
    On surface.page
    light#7373734.74:1 ✓dark#a3a3a37.85:1 ✓
    Secondary icons, on light surfaces. Meets 3:1 on every light surface.

Borders and focus

Boundaries a person must find need 3:1. Decorative dividers and shadcn's focus ring are exempt (ISS-16).

  • border.default3:1
    On surface.page · Inputs, anything to find
    light#7373734.74:1 ✓dark#7373734.18:1 ✓
    Boundaries a user needs to see to find a control: inputs, checkboxes, cards that act as buttons. Meets 3:1 on every light surface – deliberately darker than shadcn's neutral-200 input border, which is 1.3:1 (WCAG 1.4.11).
  • border.strong3:1
    On surface.page
    light#40404010.37:1 ✓dark#d4d4d413.36:1 ✓
    Emphasised boundaries, such as the secondary button outline or a selected item.
  • border.subtle
    On surface.page · Decorative dividers
    light#e5e5e51.26:1 dark#2626261.31:1
    Decorative dividers and outlines only. Below 3:1, so never the only way to see a control.
  • focus.ring
    On surface.page · Matches shadcn's ring
    light#a3a3a32.52:1 dark#7373734.18:1
    Focus indicator colour – shadcn's neutral-400 ring, matched exactly (ISS-16). 2.5:1 on the page, under WCAG 1.4.11's 3:1; shadcn draws it as a 3px ring at 50% plus a solid border on focus.

Actions

Button fills with their labels. shadcn's own variant names are in the notes.

  • action.primary.background4.5:1
    Text: action.primary.text · shadcn default
    light#17171717.18:1 ✓dark#e5e5e514.23:1 ✓
    Primary action fill, e.g. the main call to action on a screen.
  • action.secondary.background4.5:1
    Text: action.secondary.text · shadcn outline
    light#ffffff19.80:1 ✓dark#0a0a0a18.97:1 ✓
    Secondary action fill, e.g. an outlined alternative to the primary action.
  • action.tertiary.background4.5:1
    Text: action.tertiary.text · shadcn secondary
    light#f5f5f516.44:1 ✓dark#26262614.50:1 ✓
    Tertiary action fill, e.g. a low-emphasis filled action. One step darker than surface.muted, so it stays visible on every light surface.
  • action.ghost.background-hover4.5:1
    Text: action.ghost.text · Ghost on hover
    light#f5f5f516.44:1 ✓dark#26262614.50:1 ✓
    Ghost action fill on hover.
  • action.destructive.background4.5:1
    Text: action.destructive.text-on-background
    light#c100076.42:1 ✓dark#ff64676.85:1 ✓
    Filled destructive button. Pair with destructive.text-on-background.
  • action.destructive.surface4.5:1
    Text: action.destructive.text · shadcn destructive
    light#fef2f25.87:1 ✓dark#4608095.60:1 ✓
    The light tint shadcn draws destructive buttons and badges on (its bg-destructive/10).

Status

Messages and alerts. Always with an icon and words – never colour alone.

  • status.info.surface4.5:1
    Text: status.info.text · info
    light#dbeafe7.23:1 ✓dark#16245610.39:1 ✓
    Background of a info message or banner. Always show status with an icon and text as well as colour (WCAG 1.4.1).
  • status.success.surface4.5:1
    Text: status.success.text · success
    light#dcfce76.49:1 ✓dark#032e1512.37:1 ✓
    Background of a success message or banner. Always show status with an icon and text as well as colour (WCAG 1.4.1).
  • status.warning.surface4.5:1
    Text: status.warning.text · warning
    light#fef3c66.36:1 ✓dark#46190112.05:1 ✓
    Background of a warning message or banner. Always show status with an icon and text as well as colour (WCAG 1.4.1).
  • status.error.surface4.5:1
    Text: status.error.text · error
    light#ffe2e25.27:1 ✓dark#46080911.12:1 ✓
    Background of a error message or banner. Always show status with an icon and text as well as colour (WCAG 1.4.1).

Palette

The primitive ramps the roles are built from. Tailwind's neutral, with partial red, green, blue and amber for status. Not in page code.

grey

  • 0
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950
  • 1000

red

  • 50
  • 100
  • 200
  • 400
  • 600
  • 700
  • 800
  • 950

green

  • 100
  • 200
  • 400
  • 700
  • 800
  • 950

blue

  • 100
  • 200
  • 400
  • 700
  • 800
  • 950

amber

  • 100
  • 200
  • 400
  • 700
  • 800
  • 950