Skip to content

Colours

In the app

The custom properties every component reads. Navy is the canvas, the greys do the work, one accent.

@varick/ui/tokens/colorsAdded 26 Aug 2026

navyinkfg-midfg-lowfillaccentdanger

Usage

.status { color: var(--success); background: var(--success-soft); }

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

:root {
  --canvas:    #002870;
  --fg-high:   #111111;
  --fg-mid:    #757575;
  --fg-low:    #B1B1B1;
  --fill:      #F6F6F6;
  --fill-soft: #FDFDFD;
  --hairline:      #EBEBEB;
  --hairline-soft: #F0F0F0;
  --accent:  #3B7CF6;
  --accent-fade: #E8F1FE;
  --danger:  #C93933;
  --success: #3E7C4A;
  --warn:    #B64D05;
  --teal:    #0B7C84;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}