Swiss Grid Interface

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

One workout home screen — greeting, summary, program card and bottom navigation.

A held phone beside two session panels — the style across portrait and landscape.

Timer and metrics side by side: countdown controls next to a gauge card.

Search, onboarding illustration and a booking flow across three healthcare screens.

Description

A strict column grid, one grotesque type family, and flush-left ranged-right setting doing the organising. Objective, asymmetric, and legible at every size — the International Style translated into components rather than posters.

Colors

#FFFFFF65%Usage: Background

#00000020%Usage: Typography and rules

#E1000F8%Usage: Functional accent

#7A7A7A7%Usage: Secondary information

Palette Size

3–5 colors

Color Temperature

Neutral

Saturation Range

Vivid

Contrast Strategy

High contrast

Gradient Policy

No gradients

Color Dominance

Background-dominant

Black & White Point

Pure black + Pure white

Accessibility Level

AAA

Light & Shadow

Lighting Presence

None (flat)

Spatial Structure & Hierarchy

Grid System

Twelve-column modular grid with a baseline grid; blocks begin and end on column boundaries

Hierarchy Clarity

Strong

Symmetry

Asymmetrical balance

Balance Type

Tension-based

Layout Axis

Horizontal

Visual Density

Comfortable

Plane Separation Method

Color/value shift

Line & Stroke System

Stroke Usage

Structural outlines

Stroke Weight

Thin

Stroke Consistency

Uniform

Stroke Joins

Miter

References

Cultural References

Swiss/International Style, Müller-Brockmann, Ruder, Hofmann

Temporal Reference

1950s

Custom Style Items

Text Setting

Flush-left, ragged-right throughout; align tabular numerals to columns.

Accent Rule

Red only marks active states, primary actions, or the single most important number.

Grid Integrity

No component may straddle columns; adjacent text shares baseline alignment.

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Web

Presentation Context

Raw UI

UI & Web

Color Theme

Light

Background Tone

Pure white

Accent Strategy

Single functional accent

Spacing Scale

8pt grid

Surface Layers

Flat (one background)

Shadow Technique

No shadows

Border Philosophy

Visible solid border

Corner Radius Scale

Sharp (0px)

Card Style

Bordered

Button Shape

Sharp rectangle

Icon Style

Flat geometric

Hover Treatment

Color change

Animation Philosophy

None (instant)

Scroll Behavior

Static

UI Imagery

High-contrast black-and-white photography, hard-cropped to exact one-, two-, or four-column spans

Focus Ring Style

Solid offset ring

Voice & Language

Formality

Formal

Vocabulary Level

Technical

Directness

Explicit

Sentence Length

Short

Metaphor Density

Factual

Writing Perspective

Third person

Copy Pacing

Staccato

Container / Boundary

Container presence

Implicit (visual edges only)

Corner treatment

Sharp

Edge behavior

Content fully contained

Background & Environment

Background Type

Solid color

Background Complexity

Minimal

Typography

Regular, Aa, Bb, Typography

Font FamilyGrotesque

Line HeightTight headings; Normal body

Font WeightsRegular, Bold

Letter SpacingTight

Type ScaleModular

Text Case

Sentence case

Font Pairing Strategy

Single family

Hierarchy

Strong contrast

Text Visual Role

Primary visual driver

Mood & Personality

Clean, Serious, Minimalist, Authoritative

Emotional Bias

Neutral

Tone Register

Detached

Representation Mode

Literal

Real-world Accuracy

Precise

Shape Language

Shape Basis

Geometric

Primitive Dominance

Rectangles

Edge Sharpness

Razor-sharp

Negative Space Usage

Deliberate wide unused column creates asymmetric tension

Surface, Material & Detail

Surface Treatment

Flat

Texture Usage

None

Transparency / Opacity

Opaque

Guardrails

Common Artifacts to Avoid

AI Gloss / Plastic Smoothing, Heavy Bokeh / Blur, Lens Flare, Film Grain / Noise, HDR over-processing, Over-saturation, Stylistic filters

Avoided Visuals

centered headings; justified text; rounded cards; drop shadows; decorative rules; floating imagery; decorative illustration

Avoided Colors

secondary accent colors; gradients; tints; tonal color variations

Avoided Layouts

gridless layouts; elements straddling columns; scroll reveals

Allowed Visuals

visible column rules; baseline alignment; solid black rules; sharp rectangular controls; flat geometric control icons; hard-cropped monochrome photography

......X