NodlumeNodlume

Design reference

A practical UI design system reference.

Learn the decisions behind semantic color, typography, spacing, elevation, texture, gradients, and dark mode. Each reference ends with a free, no-login design tool that turns the principle into usable tokens.

01Semantic color

Name the job before choosing the swatch.

A useful palette is a vocabulary of roles: canvas, surface, text, border, action, and status. The names stay stable while the values change across brands and modes.

Read the color guide
Canvas
Surface
Border
Action
Ink
Roles first
Define where a color is used before tuning its hue.
Contrast in pairs
Test the foreground on the surface it actually occupies.
States included
Hover, focus, disabled, and destructive belong in the system.

Free · No signup · Exportable

Build a palette
02Typography

Pair voices, then set the rhythm.

Font choice establishes tone; a type scale establishes hierarchy. Decide them together so headings, body copy, labels, and code remain distinct without becoming unrelated.

Read the typography guide

The clear idea

Body copy carries the explanation with a quieter, durable rhythm.

32 / 20 / 14 / 11

Separate roles
Give headings, body copy, and mono text clear jobs.
Match density
Use a tighter scale for product UI and more range for editorial work.
Test real copy
Long labels and narrow screens reveal more than a perfect specimen.

Free · No signup · Exportable

Explore font pairings
03Shape & depth

Make spacing and elevation predictable.

Radius, spacing, borders, and shadows carry as much personality as color. A short, named scale keeps controls, cards, menus, and dialogs feeling like one interface.

Read the shape guide
One rhythm
Derive gaps and padding from a small spacing progression.
Radius by role
Controls, containers, and overlays need a deliberate hierarchy.
Elevation with meaning
Use shadows only when one surface truly sits above another.

Free · No signup · Exportable

Tune the full system
04Texture & grain

Give flat surfaces a material.

A subtle background texture — paper grain, a dot grid, fine graph ruling — separates the canvas from the cards that sit on it without spending another border or shadow. Built from the foreground color instead of fixed grays, the same noise re-tints itself in light and dark mode.

Explore texture patterns
Paper grain
Dot grid
Graph ruling
Barely there
A background texture reads at 3–10% opacity; louder turns into wallpaper.
Tint from tokens
Mix grain and rulings from the foreground color so both modes stay in key.
Texture the canvas
Grain belongs on the page behind content, never inside controls or text.

Free · No signup · Exportable

Add textures to your theme
05Gradients

Use gradients as light, not decoration.

A wash, a glow, or a mesh tints one region toward the brand and falls away to nothing, so the surface reads as lit rather than painted. Mixed from theme tokens, the same declaration follows a rebrand and both color modes — and full strength is reserved for the smallest accents.

Explore gradient patterns
Wash
Glow
Mesh
One hue
Layer strengths of a single color; opposing hues read as a screensaver.
Priced by area
A canvas wash stays under 10%; only text and borders earn full strength.
Fade to nothing
End on transparency so the surface, not a second color, wins.

Free · No signup · Exportable

Plan the full design system
06Micro-interactions

Make every state change answer a question.

Motion earns its place when it confirms an action, reveals a new state, explains a wait, or guides attention. A small timing scale and a reliable reduced-motion fallback keep the effect useful.

Explore interaction patterns
150ms200ms300ms
Task first
Animate to communicate, not simply to decorate.
Short timing
Reuse a few durations between 150ms and 400ms.
Durable result
The final label, icon, or state must work without motion.

Free · No signup · Exportable

Plan the full experience
07Dark mode

Reassign the roles, not the pixels.

Dark mode is a second semantic assignment, not a photographic negative. Preserve hierarchy while adjusting surface steps, text brightness, chroma, borders, and elevation.

Read the theming guide

Light

Dark

Keep meaning
Components should ask for the same role in either mode.
Rebuild depth
Raised dark surfaces usually become lighter than the canvas.
Review every state
Focus, charts, and status colors need their own dark check.

Free · No signup · Exportable

Convert a light theme

Put the system to work

Carry the same decisions into a complete React project.

In Nodlume, your theme joins the routes, components, data, APIs, and access rules on one visual plan, then ships with the generated scaffolding.

Start planning free

We'd like to use Google cookies to understand how Nodlume is used and to measure our advertising. Nothing loads until you choose, and declining does not affect anything in the app.