FOCUS BLOCK · 09:30 — 11:00Ship the onboarding flow
Minimalism
You might say
Keep it clean and uncluttered, with the content and buttons doing the talking.
Remove what does not help the task and make the remaining hierarchy clearModern minimalism uses restrained color, type, spacing, and decoration so the content and actions are easy to find. It is not simply an empty white page. Every remaining element needs a clear role, and the layout still needs contrast, rhythm, and feedback.
Scroll sideways to explore the full example
Good morning, Lin.
One clear priority for a calm day.
Design Principles
- Keep only content and controls that support the task
- Use a small type and spacing system to create hierarchy
- Limit color, but keep important states easy to distinguish
- Let alignment and whitespace organize the page
- Use subtle feedback so interactive elements still feel interactive
When to use it
- Productivity and SaaS interfacesStart for free
- Portfolio and product pages with strong content✓ Modern minimalismRetroCyberpunk
- Reading-focused sitesUse layout to highlight the main content.
- Products that need a calm, neutral baseBasic rulesComponent reuseContinuous iteration
When NOT to use it
- Remove labels or guidance just to reduce visual densityLunar New Year sale … 50% off sitewide … (restrained version)A campaign page still needs rhythm, focal points, and brand emotion.
- Use low contrast and call it restraintInconsistent headline placementMissing alignment, grid structure, and type-weight hierarchySimplicity still requires clear structure and hierarchy
- Leave large empty areas with no compositional purpose
- Make every section look equally quietA campaign page for childrenTest the visual language against the audience’s age, content, readability, and brand; do not mechanically apply black-and-white minimalism.
Anatomy
near black text #0A0A0C
Minor gray #6D6D76
Thin dividing line 1px
Accent Color Example
Rounded corners 6-8px
Invisible shadow
The example uses near black; either pure black or near black is acceptable, the key is to maintain sufficient contrast with the background
Subtext, descriptions and placeholders can use lower gray levels, but still maintain contrast.
The example uses 1px thin lines for lightweight partitioning; the border must still be clear and cannot be so faded that it cannot be seen.
Used to highlight main operations, links or key states, the number and scope are determined by the information hierarchy
Example uses small rounded corners; actual values should match brand ethos and component dimensions
The example uses light shading to distinguish floating layers; it is necessary to see the layers and avoid dirty and heavy layers.
AI Prompt
Minimal SaaS landing page, generous whitespace, black, white, and gray with one accent color, hairline dividers, subtle shadows, 8px corner radius, 8-point spacing grid, large headlines with tight tracking
Typical use cases
SaaS homepage
Scroll sideways to explore the full example
Product dashboard
Scroll sideways to explore the full example
Portfolio
Scroll sideways to explore the full example
Editorial page
Scroll sideways to explore the full example
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading