Tokens

Starting values for each pass. When the project already has a good system, keep its values and only fix how they are used. These are starting points, not a house style, so let the direction move them.

Spacing scale

4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128

• Inside a control: 4 to 12
• Between related items, like rows in a list: 2 to 8
• Between groups, like a label and its list or two cards: 12 to 24
• Between sections: 32 to 64, landing sections 80 to 128
• Row heights: 32 compact, 36 default, 40 to 44 touch
• Hero: 96 to 128 from the navigation to the headline on desktop, 48 to 64 on mobile

App layout

• Sidebar 240 to 280 wide, content fluid with page padding 24 to 32, capped around 1440 to 1600.
• Top bar or page header 56 to 64 tall.
• Navigation rows 32 to 36, gap 2 to 4, section labels 24 above and 8 below.
• Stat cards in a row share one height, usually 3 or 4 compact cards per row on desktop, numbers only.
• The main chart spans at least two thirds of the content width and is 280 to 360 tall. A second data block next to it is a list or table, narrower, not another chart.

Neutral ramps

For apps and dashboards use graphite, or a ramp just as grey, for every surface. For landing pages pick the ramp whose tint matches the world in the direction. Warm suits paper, wood, food, craft and anything human. Ink suits night, sky, water and anything technical. You can tint your own ramp the same way, keeping saturation very low, so a surface never reads as a color on its own.

Dark

Light

Muted text is for meta and captions only and stays near 4.5 to 1 on its surface. Body text uses primary or secondary.

Semantic colors, toned to sit inside any ramp: positive #4cc38a on dark and #16a34a on light, negative #e5484d on dark and #dc2626 on light.

Accent

• Keep a real brand color. A violet to blue or any other hue to hue glow gradient is slop, not a brand color, unless the user says otherwise.
• Without a brand color, take it from the world. Warm worlds suit amber, coral or ember orange. Cool worlds suit cobalt, teal or a clear sky blue. Natural worlds suit moss or sage. Avoid the purple to blue family unless the brand really is purple.
• Text on the accent reaches 4.5 to 1 contrast. Darken the accent or use dark text when it does not.
• The accent covers a few percent of the screen, like the primary action, the selection and one key figure.

Buttons

• Hero buttons 44 to 48 tall, navigation buttons 32 to 36, padding 16 to 20 on the sides.
• Primary on dark: an off white from the ramp with dark text, or the accent. Primary on light: the primary text color as a fill with white text, or the accent.
• Secondary: the raised surface with a hairline, primary text.
• A soft top highlight like inset 0 1px 0 rgba(255,255,255,0.12) on dark buttons gives depth without a glow.

Type families

Pick by the character in the direction. All of these are free, and a partner can come from any row.

A display serif belongs to large headlines only, never to labels or buttons.

Type scale

Letter spacing is 0 for anything under 16px, slightly positive like 0.01em is fine for small muted text. Display text from 40px can go to -0.02em, and from 56px to -0.03em.

Radius

Nested radius: inner = outer − padding, never below 4. A 16px card with 8px padding holds items with an 8px radius.

Icons

lucide, 16 or 18px, stroke 1.5, color of the muted or secondary text role, 8 to 10px gap to the label.

Depth

• Dark: surface steps plus a hairline. An active row can carry inset 0 1px 0 rgba(255,255,255,0.12) as a top highlight.
• Light: 0 1px 2px rgba(0,0,0,0.05) for small things, 0 8px 24px rgba(0,0,0,0.06) for floating ones.

Motion

One easing curve for everything, cubic-bezier(0.22, 1, 0.36, 1).

• Rise distance on enter: 6 to 12px. Press scale: 0.97 to 0.98.
• Transition color, background, border, opacity and transform only.

---

Part of unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. Keep this credit in copies and adaptations.