chronoskin Search components and tokens
3.2

The new release adds the segmented button and renames two colour tokens.

See what changed

Components

Twenty-four building blocks for chronoskin apps, each with guidance, measurements and tokens.

Start with buttons Browse the tokens

24

components

48

colour tokens

3.2

current release

Actions and selection

SaveCancel

Buttons

Filled, tonal, outlined and text

Floating action button

The one main action of a screen

 OakAshSteel

Chips

Filters, choices and suggestions

Cards

Filled or outlined, never both

Switches

On and off, with a thumb that grows

Navigation bar

Three to five places, one pill

Latest changes

All releases

New to the kit?

Read the page on buttons first. It shows how the four emphasis levels work, and every other component follows the same pattern.

Read the guidanceAsk for a component
  1. Components
  2. Actions
  3. Buttons

Buttons

Buttons start most actions. Four kinds carry four levels of emphasis.

Tokens Suggest a change

Choosing a button

Pick the kind by how much the action matters on this screen, not by how it looks.

A screen has one filled button at most. Tonal buttons support it, outlined buttons step back, and text buttons sit inside cards and dialogs. Every kind uses the class ds-button and is described in the token table.

Emphasis

  • Filled for the action that finishes the task
  • Tonal for the next most likely action
  • Outlined and text for everything else

Labels

Start with a verb and keep to three words. Sentence case, no full stop.

CancelSave

DoPair one filled button with a quieter one.

CancelSave

Do notPut two filled buttons side by side.

Destructive actionsUse the danger variant only for the final step, inside a dialog.

The raised button is withdrawnIt was removed in 3.0. Replace it with the tonal button.

Colour tokens

Every colour in the kit is a tone of one source colour. Use the role, never the value.

Report a token
48 tokens Stable Renamed Withdrawn
TokenUsed forStatusSinceTone
primaryFilled buttons, the current pageStable1.040
primary-containerFloating button, hero cardsStable1.090
secondary-containerTonal buttons, navigation pillStable1.090
tertiary-containerNotices, contrasting accentsStable2.090
surface-container-highestTonal cards, inline codeRenamed3.290
surface-raisedWas used for raised buttonsWithdrawn1.098

Text on a fill

Each container has its own text role. Pair them as the table shows and contrast takes care of itself in light and dark.

Elevation is a tint

A raised surface takes the next container tone. Shadows are kept for things that float.

Request a component

Tell the kit team what is missing. Requests are read every Thursday.

Open requests