Foundation

When to use

Brand

The primary cyan and its four states, all on the blue ramp. Pressed is blue-1000, #1877F2, one step deeper on the same ramp.

Neutrals

Thirteen steps. 50–200 are surfaces, 400–600 are borders, and 900 and darker are text.

Status tones

Six tones, in order of severity, each with seven roles. A tone’s text and icon pass on its own surface. onFill is for text or an icon on the solid fill.

Roles

Every other colour role, named by job. Hover a swatch for its value.

Where they're used

Accessibility

Solid families

Eighteen families at thirteen steps each: fourteen hues, then four greys. Every colour a component paints is a step on one of these ramps. Indigo ships here, but no component uses it: blue roles use the blue ramp.

Semantic mapping

The primary tokens and the global steps they come from.

Alpha families

Five ramps in rgba(), for scrims, hover washes and anything that sits over a map, chart or photo.

Usage

Scale

Twelve sizes, from 9 to 36px, all in Inter (--font-family-base). Half of them sit under 14px.

Weights

Five weights. The names run one step light: semibold is 500 and bold is 600.

Roles

The size and weight each part of the interface uses.

Usage

Scale

Twenty-two steps on a 4px base. They run in fine steps up to 48, then widen to 56, 64, 80, 96, 112 and 128.

Usage

Scale

Eight values, from square to pill.

In components

Each kind of object has its own radius. The bigger the box, the bigger the corner.

Usage

Scale

Seven steps, each tinted with the system’s black, #0A090B, so shadows stay warm against the greys.

Component shadows

Four shadows, each named for the component it sits under.

Focus rings

Usage

Try it

Switch sets, change the size, and turn off Animate to see each glyph’s resting frame.

<script src="/widgets/icons-core.js"></script>
<link rel="stylesheet" href="/widgets/motion.css">

<Glyph name="evapotranspiration" size={24}
/>

Measurement glyphs

Forty-seven glyphs, one for each thing a sensor measures. Each one moves, and the movement shows the reading.

Interface icons

Everything that isn’t a measurement uses Heroicons from the solid set, at 24×24: navigation, settings and alerts.

Sizes

Five sizes, shared by both sets.

Usage

Accessibility

A glyph has no text of its own, so show the measurement’s name beside it. With reduced motion on, every glyph holds a resting frame that still shows the reading.

Tokens

Try it

Pick a duration, a curve and a property. Changing any control replays the move.

.marker {
  transition: transform var(--duration-normal) var(--ease-out);
}

Durations

Seven steps, from 50 to 500ms. Most of the product moves at 100 or 150ms.

Easings

Six curves. Press Replay to run a dot along each one.

Composed transitions

Four tokens are whole transition values, each on --duration-normal.

/* Same duration. Only one of them moves the rest of the row. */
.save        { transition: var(--transition-transform); }
.save--lazy  { transition: var(--transition-all); }

/* --transition-all: all var(--duration-normal) var(--ease-in-out)
   and `all` includes width, padding and radius — every property
   that forces the elements beside it to be laid out again. */

Usage

Tokens

Try it

Change the theme and speed, or turn off the water fill. With reduced motion on, the logo shows its final frame.

<WildeyeLogoAnimated
  theme="light"
  :speed="1"
  :water="true"
  :play-key="playKey"
/>

Files

Three SVG files. Download the one that suits the ground.

OriginalCyan “wild”, green “eye”.

wildeye-original.svg

GreyCharcoal wordmark, blue leaf. The default for documents and UI.

wildeye-grey.svg

WhiteEvery path white, including the leaf. For dark grounds.

wildeye-white.svg

Lockups

A full wordmark for chrome and marketing, and a leaf mark where the wordmark would be too small: a favicon, a collapsed sidebar, a map pin.

full

leaf

Sizes

The leaf at each size the product uses.

On dark grounds

Usage

Tokens