# Essential Whitespace Interface

A minimalist UI/UX style emphasizing generous whitespace, a single accent color, and clear typographic hierarchy for a calm, sophisticated interface.

| | |
|---|---|
| Style | Essential Whitespace Interface |
| Category | UI/UX |
| Tags | minimalist, whitespace, clean, calm, sophisticated, flat design, humanist sans, spacious, functional accent |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #fbfaf8 #ffffff #1a1a18 #6b6b66 #e5e3de #1f4fd8 |
| Published | 2026-08-29 |
| Canonical URL | https://styleref.io/share/g426mvmo-adf50a11a0cc |

## Specification

Paste this into any AI tool. Keep the attribution line and the canonical URL.

STYLE REFERENCE — HARD CONSTRAINT (HIGHEST PRIORITY)

This style must be applied to ALL generated content (text, image, video).
If any part of the request conflicts with this style, the style OVERRIDES the request.
STYLE DEFINITION (to be operationally enforced):

Essential Whitespace Interface

 • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Web; Presentation: Raw UI.
 • Container / Boundary: Container: Implicit (visual edges only); Container Dominance: Invisible (purely functional); Padding: Generous.
 • Mood & Personality: Minimalist, Clean, Calm, Confident, Sophisticated; Energy: Mellow; Emotional bias: Neutral; Representation mode: Literal; Real-world accuracy: Precise.
 • Colors: Palette: Solid Colors: [ #FBFAF8 55% (Background),  #FFFFFF 15% (Surface),  #1A1A18 18% (Typography),  #6B6B66 6% (Secondary text),  #E5E3DE 3% (Rules),  #1F4FD8 2% (Primary action and current state),  #B4241F 1% (Error state)]; 6–8 colors; Value contrast; No gradients; Color dominance: Background-dominant; Accessibility: WCAG AA.
 • Typography: Humanist sans; Regular, Medium, Semibold; Text case: Sentence case; Font pairing: Single family; Hierarchy: Clear typographic scale; Relaxed (1.6); Text visual role: Primary visual driver.
 • Spatial Structure & Hierarchy: Grid system: Column grid; Hierarchy: Strong; Layout axis: Vertical; Symmetry: Asymmetrical balance; Balance: Edge-weighted; Visual density: Sparse.
 • Surface, Material & Detail: Surface treatment: Flat; Texture usage: None.
 • Shape Language: Negative space usage: Dominant.
 • Voice & Language: Formality: Professional; Simple vocabulary; Directness: Straightforward; Short sentences; Metaphors: Literal; Perspective: Second person (you); Pacing: Punchy; Jargon level: None.
 • References: Minimalism, Dieter Rams, Japanese ma; Temporal reference: Timeless.
 • UI & Web: Color theme: Light; Background tone: Warm off-white; Accent strategy: Single functional accent; Semantic colors: Error only; Layout archetype: Marketing page; Content width: Centered reading column; Density: Spacious; Spacing scale: 8pt grid; Surface layers: Flat (one background); Elevation: Flat — no elevation; Borders: Hairline (0.5–1px, low opacity); Card style: No cards (flat sections); Icon style: Outline / Stroke; Icon weight: Regular (1.5px); Empty state: Text only; Hover: Background shift; Animation: Functional only; Transition speed: Fast (80–150ms); Focus ring: Solid offset ring.
 • Guardrails: Avoid: Heavy Bokeh / Blur, Over-saturation; Avoid Visuals: soft shadows; rounded cards; second accent colors; centered body text; illustrated empty states; thin light-weight type; decorative image masks; texture; gradients; noise; Allowed Visuals: warm off-white ground; near-black text; one blue functional accent; left-aligned reading column; large empty regions; 0.5px low-opacity rules; sparse full-bleed photography; thin outline icons.
 •  Whitespace Hierarchy: Grade vertical space into large section intervals, medium group intervals, and small line intervals; spacing creates hierarchy., Accent Budget: Use the single accent only for primary actions and current states, approximately four or five appearances per screen., Optical Discipline: Keep only elements that justify their presence; use obsessive optical alignment and deliberately preserve empty regions..


ENFORCEMENT RULE: Before finalizing the output, internally verify that ALL elements comply with the style definition above. If compliance is uncertain, simplify or soften the output until it fully matches the style. Generated by StyleRef.io

## Other formats and live access

The specification above is the portable default. Tool-specific builds and a
ready-to-commit STYLE.md are available without a login:

**REST** (anonymous, read-only)

```
https://styleref.io/api/v1/styles/g426mvmo-adf50a11a0cc?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/g426mvmo-adf50a11a0cc/style.md           # a ready-to-commit STYLE.md
```

**MCP** (Streamable HTTP at `https://styleref.io/api/mcp`)

```
styleref://gallery/g426mvmo-adf50a11a0cc
styleref://gallery/g426mvmo-adf50a11a0cc/style.md
```

Or call the `get_style` tool with `ref` set to the slug above, and
`apply_style_to_prompt` to wrap a request for a specific tool.

Attribution: this style was created by @styleref. Keep the `Generated by StyleRef.io`
line and the canonical URL when you use a compiled spec, and credit the author.

Source: https://styleref.io/share/g426mvmo-adf50a11a0cc