Skip to content
Skip design navigation
Etesie Alpha
Loading account
Learn

The model in a few short reads

Every guide below lives in its own subject and stays reachable from there. These paths only put them in an order, and each one ends where the system is actually applied — a picker, not another page of prose.

The color model

Pick a color role for any element and know why it survives a scheme, contrast or brand change.

Before you start: None. Start here if "primary" and "on-primary" are new words.

6 short reads
  1. 1 Color roles Colors A role names a job, not a hex.
  2. 2 Pairing & contrast Colors Every fill ships with the content color that stays legible on it.
  3. 3 Emphasis Colors The same component can speak at four volumes.
  4. 4 Source & key colors Colors One seed derives six key colors.
  5. 5 Tonal palettes Colors Tone distance is contrast; hue never is.
  6. 6 Light, dark & contrast Colors Dark mode is the same roles, each reading a tone per scheme.
Choose a color role Three questions and the picker names the role, live on your theme.

The type system

Choose a type token by the job the text does, and read the scale that produced it.

Before you start: None, though the color model makes the emphasis vocabulary land faster.

6 short reads
  1. 1 Typography roles Typography Five roles, chosen by what the text is for.
  2. 2 Size within a role Typography Sizes are relative inside a role, not global font sizes.
  3. 3 Baseline & emphasized Typography Emphasis moves weight and tracking, never the role.
  4. 4 Typeface references Typography Brand, Plain and Mono are the shared font-family layer.
  5. 5 Type scale Typography A scale is a formula: a base and a text and a display ratio.
  6. 6 Type styles Typography One style is role × size × emphasis, with provenance attached.
Pick a type token Answer three questions and copy the token for your target.

The shape system

Tell a corner magnitude from a silhouette, and know which layer a change belongs to.

Before you start: None.

4 short reads
  1. 1 Corner roles Shape Corner values compose into complete shapes.
  2. 2 Nested corners Shape Inner radius = outer radius − inset.
  3. 3 Expressive silhouettes Shape Geometry answers "what outline", not "how round".
  4. 4 Shape profiles Shape A profile is a sourcing recipe with two consequences.
Resolve a corner The picker turns "what am I framing?" into a corner token.

Elevation and hierarchy

Pair a surface with a defensible elevation level and tonal container.

Before you start: The color model helps with the surface-container vocabulary.

1 short reads
  1. 1 Elevation levels Elevation A cross-platform dp decision becomes an ordinal level on the web.
Choose a surface pairing Start with card, popover or dialog and copy the level plus container role.

The motion system

Choose between a spring and a directional curve, and respect a reduced-motion request.

Before you start: None. The shape path helps only if you are animating a silhouette.

3 short reads
  1. 1 Spring physics Motion A spring settles onto a target; it has no duration to pick.
  2. 2 Customization levels Motion Three levels, from a scheme to per-spring physics.
  3. 3 Reduced motion Motion The preference is an instruction, not a style option.
Choose a motion pairing Three questions and the picker hands back the easing and duration.

Interaction states

Apply state layers, disabled repainting and focus indication as one coherent model.

Before you start: The color-role pairing model.

1 short reads
  1. 1 State layers and focus States Interaction communicates through a state layer and, for focus, a ring.
Apply state tokens Interact with the live specimen and copy the canonical shared tokens.

Icon systems

Explain the Symbols axes and apply the honest Lucide binding used by the product.

Before you start: None.

1 short reads
  1. 1 Bindings and variable axes Icons Lucide and Material Symbols expose different, explicit capabilities.
Tune the Lucide stroke Customize the binding that actually ships; Symbols remains documented output.