Natan Dahan / Electric

Design system - v0.1.0

Everything built under this name looks like it came from the same place.

One source of values, and a page that is generated from it - so what you read here cannot drift from what ships. Two modes: Electric Day and Electric Ink.

Every contrast figure below is computed from the tokens, alpha composited against the surface it actually sits on. Nothing here is asserted.

Colour

Semantic roles, not hues. Nothing consumes a raw colour - a surface asks for --ink, never for a hex. The two columns are the two modes, rendered live.

RoleElectric DayElectric Ink
--bg #fbfafe #0c0a12
--bloom #e9e2fb #17122a
--heading text-large #17131f 17.58on bg14.56on bloom #eae6f4 16.04on bg14.81on bloom
--ink text #17131f @ 0.92 14.33on bg12.13on bloom #eae6f4 @ 0.92 13.56on bg12.62on bloom
--soft text #17131f @ 0.72 7.16on bg6.50on bloom #eae6f4 @ 0.66 7.24on bg6.96on bloom
--muted text #17131f @ 0.6 4.72on bg4.42on bloom #eae6f4 @ 0.56 5.45on bg5.34on bloom
--hair decorative #281e50 @ 0.09 1.19decorative #c8beeb @ 0.08 1.13decorative
--hair-strong decorative #281e50 @ 0.17 1.40decorative #c8beeb @ 0.13 1.25decorative
--edge-control proposed ui-boundary #281e50 @ 0.51 3.19on bg3.02on bloom #c8beeb @ 0.45 3.04on bg3.06on bloom
--accent text-large #6a3df0 5.71on bg4.73on bloom #8f6bff 5.35on bg4.94on bloom
--aux text-large #3d5ce0 5.31on bg #5682ff 5.65on bg
--on-accent text #fbfafe 5.71on accent #0c0a12 5.35on accent
--sel-bg #6a3df0 #8f6bff
--sel-fg text #fbfafe 5.71on sel-bg #0c0a12 5.35on sel-bg
--focus ui-boundary #6a3df0 5.71on bg4.73on bloom #8f6bff 5.35on bg4.94on bloom
--scrim #0c0a12 @ 0.6 #0c0a12 @ 0.75

n.nn marks a pair below its required ratio. --edge-control is proposed: it exists because --hair-strong currently draws the boundary of real controls at well under the 3:1 a control edge owes, and adopting it changes how those controls look.

Type

Fraunces for display, Inter for everything read, JetBrains Mono for labels and figures. Sizes are fluid on the web; the three numeric columns are what that fluid value collapses to on platforms that cannot express it, generated rather than guessed.

Build it. Prove it. Scale it.

The measure is sixty-eight characters

A lede sits above the body copy and carries the weight of the page.

Body copy runs at a comfortable measure with generous leading, because the point of a reading surface is to be read.

METADATA AND LABELS

TokenWeb 3908341440 Dynamic Type
--fs-display clamp(2rem, 1.15rem + 4.3vw, 4rem) 35.17 54.26 64 largeTitle
--fs-page clamp(1.75rem, 1.15rem + 3vw, 3.1rem) 30.1 43.42 49.6 title
--fs-lede clamp(1rem, 0.95rem + 0.35vw, 1.125rem) 16.56 18 18 title3
--fs-body clamp(0.9375rem, 0.95rem + 0.2vw, 1.0625rem) 15.98 16.87 17 body
--fs-label 0.6875rem - - - caption2

Space

An 8pt scale. Every margin, padding and gap comes from it.

Edges and depth

There are no shadows. Depth is made of three things instead: a hairline, a violet bloom, and a grain layer at 0.035 in Day and 0.05 in Ink. Radius stops at 4px.

hairline
bloom
radius 4px

Motion

Two curves and three durations. Entrances ease out, exits ease in. Hover a bar to run it. Everything here honours reduced motion.

Use it

The generated CSS is served from this domain. Nothing to install.

<link rel="stylesheet" href="https://brand.natandahan.com/dist/css/tokens.css">

.thing {
  color: var(--ink);
  background: var(--bg);
  padding: var(--s4);
  border: 1px solid var(--hair);
  border-radius: var(--r-1);
  font: var(--fs-body)/1.6 var(--sans);
  transition: color var(--d-micro) var(--ease-out);
}

Source, tokens and the build: github.com/natandahan/brand

What is not here yet

Stated plainly, because a system that hides its gaps is not one you can plan against.