Design styles
Three directions, each internally consistent. Pick one deliberately and apply it completely —
half-applied styles read as mistakes, not hybrids.
Choosing
| Direction |
Reads as |
Fits when |
| Minimalist editorial |
Calm, content-first, confident |
The content is the product: docs, writing tools, reading surfaces, analytics where data should dominate |
| Industrial utilitarian |
Precise, dense, tool-like |
The user is an operator, not a visitor: developer tooling, dashboards, internal systems |
| High-polish commercial |
Expensive, considered, reassuring |
Perceived quality drives the decision: marketing surfaces, onboarding, anything asking for trust or money |
If the brief does not imply one, ask. Defaulting is how products end up looking like their
framework's starter template.
Minimalist editorial
Near-monochrome with a single accent used sparingly. Hierarchy carried almost entirely by type size
and generous whitespace. Flat surfaces — no shadows, no gradients; separation by space and hairline
rules. Wide margins. Motion is almost absent: fades, no movement.
Fails when: applied to dense data, where the whitespace it needs is not available.
Industrial utilitarian
Rigid grid, visible structure. Extreme type contrast — small dense body against large stark
headings. Monospace for anything numeric or identifying. Functional color only: state, not
decoration. Square or near-square corners, borders rather than shadows. Motion is instant or absent.
Fails when: applied to consumer surfaces, where it reads as unfinished rather than deliberate.
High-polish commercial
Layered depth — considered shadows at two or three elevations, never more. Generous but not empty
spacing. A type pairing with real personality in headings against a neutral body. Restrained
gradients on key surfaces only. Motion is present and eased: things enter and settle rather than
appear.
Fails when: applied to high-frequency tools, where the motion and padding become friction.
Applying any of them
- Name the direction and why it fits this audience.
- Set tokens to match before writing markup — the style lives in the token values.
- Apply completely. A utilitarian grid with soft shadows is not a hybrid.
- Do not change layout structure to suit the style. If structure must change, that is a separate
decision, stated as one.
Never
- Mix two styles on one surface because each has a part you like. Pick one and hold it.
- Choose a style before you know the content it has to carry and who is reading it.
- Treat a style as decoration applied at the end. It decides density, spacing, and hierarchy from the first screen.
- Copy a reference into a layout your real content cannot fill. Empty space that was supposed to hold something reads as broken.
1---2name: design-styles3description: Applies a deliberate visual direction to an interface — minimalist editorial, industrial utilitarian, or high-polish commercial — each with its own type scale, palette behavior, surface treatment, and motion. Use this when a product needs a point of view rather than defaults, when choosing between visual directions, when an interface reads as generic, or when restyling something without changing its structure.4---56# Design styles78Three directions, each internally consistent. Pick one deliberately and apply it completely —9half-applied styles read as mistakes, not hybrids.1011## Choosing1213| Direction | Reads as | Fits when |14|---|---|---|15| **Minimalist editorial** | Calm, content-first, confident | The content is the product: docs, writing tools, reading surfaces, analytics where data should dominate |16| **Industrial utilitarian** | Precise, dense, tool-like | The user is an operator, not a visitor: developer tooling, dashboards, internal systems |17| **High-polish commercial** | Expensive, considered, reassuring | Perceived quality drives the decision: marketing surfaces, onboarding, anything asking for trust or money |1819If the brief does not imply one, ask. Defaulting is how products end up looking like their20framework's starter template.2122## Minimalist editorial2324Near-monochrome with a single accent used sparingly. Hierarchy carried almost entirely by type size25and generous whitespace. Flat surfaces — no shadows, no gradients; separation by space and hairline26rules. Wide margins. Motion is almost absent: fades, no movement.2728Fails when: applied to dense data, where the whitespace it needs is not available.2930## Industrial utilitarian3132Rigid grid, visible structure. Extreme type contrast — small dense body against large stark33headings. Monospace for anything numeric or identifying. Functional color only: state, not34decoration. Square or near-square corners, borders rather than shadows. Motion is instant or absent.3536Fails when: applied to consumer surfaces, where it reads as unfinished rather than deliberate.3738## High-polish commercial3940Layered depth — considered shadows at two or three elevations, never more. Generous but not empty41spacing. A type pairing with real personality in headings against a neutral body. Restrained42gradients on key surfaces only. Motion is present and eased: things enter and settle rather than43appear.4445Fails when: applied to high-frequency tools, where the motion and padding become friction.4647## Applying any of them48491. Name the direction and why it fits this audience.502. Set tokens to match before writing markup — the style lives in the token values.513. Apply completely. A utilitarian grid with soft shadows is not a hybrid.524. Do not change layout structure to suit the style. If structure must change, that is a separate53 decision, stated as one.5455## Never5657- Mix two styles on one surface because each has a part you like. Pick one and hold it.58- Choose a style before you know the content it has to carry and who is reading it.59- Treat a style as decoration applied at the end. It decides density, spacing, and hierarchy from the first screen.60- Copy a reference into a layout your real content cannot fill. Empty space that was supposed to hold something reads as broken.
cbrock84