Colors

Wireframes are grayscale, so they read as structure rather than design. There are three deliberate exceptions in the UI, and no other UI color props. Sticky notes and flow arrows (color=, gray by default) have their own colors, because they annotate the wireframe rather than being part of it.

Accent

Set one accent color on the board:

Open in playground

board "Checkout" accent=blue

It fills primary buttons, solid badges, checked checkboxes and radios, toggles that are on, the filled part of sliders and progress bars, completed steps, and the selected calendar day and current page. It also colors the active tab, the active tab-bar item and ghost button text. Everything else stays gray, including charts.

Name	Color
`blue`	`#2563eb`
`indigo`	`#4f46e5`
`violet`	`#7c3aed`
`pink`	`#db2777`
`red`	`#dc2626`
`orange`	`#c2410c`
`green`	`#15803d`
`teal`	`#0f766e`

Each named accent keeps white text readable on it (contrast of at least 4.5:1).

A hex color also works, for matching a brand: accent=#1a73e8. With a light color such as #facc15, text on the accent turns dark, and accent-colored text on white is darkened so it stays readable.

Badge tones

For status badges, set a tone: success, warning or danger. Tones don't change with the accent.

Open in playground

    badge "Paid" tone=success
    badge "Pending" tone=warning
    badge "Failed" tone=danger
    badge outline "Failed" tone=danger

Input errors

error gives an input a red border and red helper text, for validation states:

Open in playground

    input "Email" value="dana@" error helper="Enter a valid email"

Notes

Sticky notes have their own colors: yellow (the default), blue, pink and green. They're for annotating the wireframe (open questions, TBDs, comments for reviewers), so they don't follow the accent. See note.

Open in playground

  note "Copy TBD" color=pink

tsquare 0.9.0 · View this page on GitHub