Essential Whitespace Interface

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

One vehicle-details screen, alone in the frame — the style at the size a gallery card shows it.

A desktop storefront: sidebar, filters, product cards and a campaign banner.

Onboarding, home and product detail — one style across three screens.

A three-column UI kit — product cards, checkout, tabs and payment rows under one treatment.

Description

An interface stripped to what the task needs: one accent, one type family, and a lot of empty space doing the work borders used to do. Space is the layout system, not the leftover after everything else is placed.

Typography

Regular, Medium, Aa, Bb, Typography

Font FamilyHumanist sans

Line HeightRelaxed

Font WeightsRegular, Medium, Semibold

Text Case

Sentence case

Font Pairing Strategy

Single family

Hierarchy

Clear typographic scale

Text Visual Role

Primary visual driver

Container / Boundary

Container presence

Implicit (visual edges only)

Container Dominance

Invisible (purely functional)

Padding rules

Generous

Spatial Structure & Hierarchy

Grid System

Column grid

Hierarchy Clarity

Strong

Layout Axis

Vertical

Symmetry

Asymmetrical balance

Balance Type

Edge-weighted

Visual Density

Sparse

Surface, Material & Detail

Surface Treatment

Flat

Texture Usage

None

Custom Style Items

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.

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 Approach

Flat — no elevation

Border Philosophy

Hairline (0.5–1px, low opacity)

Card Style

No cards (flat sections)

Icon Style

Outline / Stroke

Icon Weight

Regular (1.5px)

Empty State Style

Text only

Hover Treatment

Background shift

Animation Philosophy

Functional only

Transition Speed

Fast (80–150ms)

Focus Ring Style

Solid offset ring

Mood & Personality

Minimalist, Clean, Calm, Confident, Sophisticated

Energy Level

Mellow

Emotional Bias

Neutral

Representation Mode

Literal

Real-world Accuracy

Precise

References

Cultural References

Minimalism, Dieter Rams, Japanese ma

Temporal Reference

Timeless

Colors

#FBFAF855%Usage: Background

#FFFFFF15%Usage: Surface

#1A1A1818%Usage: Typography

#6B6B666%Usage: Secondary text

#E5E3DE3%Usage: Rules

#1F4FD82%Usage: Primary action and current state

#B4241F1%Usage: Error state

Palette Size

6–8 colors

Contrast Strategy

Value contrast

Gradient Policy

No gradients

Color Dominance

Background-dominant

Accessibility Level

WCAG AA

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Web

Presentation Context

Raw UI

Voice & Language

Formality

Professional

Vocabulary Level

Simple

Directness

Straightforward

Sentence Length

Short

Metaphor Density

Literal

Writing Perspective

Second person (you)

Copy Pacing

Punchy

Jargon / Technical Level

None

Shape Language

Negative Space Usage

Dominant

Guardrails

Common Artifacts to Avoid

Heavy Bokeh / Blur, Over-saturation

Avoided 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

......X