Design system

ColorScale

A color ramp from 50 to 950 in one row.

import { ColorScale } from "@flinbu/seed";

Read and pick

blue

50#eff6ff100#dbeafe200#bfdbfe300#93c5fd400#60a5fa500#3b82f6600#2563eb700#1d4ed8800#1e40af900#1e3a8a950#172554

Pick a step

Picked blue-600.

import { ColorScale } from "@flinbu/seed";

const [step, setStep] = React.useState("600");

<div className="flex w-full max-w-2xl flex-col gap-lg">
  <ColorScale name="blue" colors={BLUE} anchor="600" showValues />
  <ColorScale name="Pick a step" colors={BLUE} value={step} onValueChange={setStep} />
  <p className="m-0 text-secondary body-body-3-regular">Picked blue-{step}.</p>
</div>

Use it for

Reading a primitive scale.
Picking a step.

Use something else for

Semantic tokens: use ColorSwatch.

Props

Prop	Type	Default	Description
`steps / colors`	`{ label, color }[] / Record`	–	The ramp, light to dark.
`name`	`string`	–	Mono label.
`anchor`	`string`	–	The brand step.
`showValues`	`boolean`	`false`	Hex under each step.
`value / onValueChange`	`string`	–	Makes it selectable.

Accessibility

Selectable scales are a radio group with arrow keys.
The brand step says 'brand color' in its name.