# Swiss Grid Interface

A strict Swiss Style UI/UX system with a twelve-column grid, grotesque typography, and a limited color palette for precise, legible interfaces.

| | |
|---|---|
| Style | Swiss Grid Interface |
| Category | UI/UX |
| Tags | swiss style, international typographic style, minimalist, grotesque, grid system, asymmetric, functional, clean, modern, legible |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #ffffff #000000 #e1000f #7a7a7a |
| Published | 2026-08-08 |
| Canonical URL | https://styleref.io/share/m4oe3xex-9d9958eaf732 |

## 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):

Swiss Grid Interface

 • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Web; Presentation: Raw UI.
 • Container / Boundary: Container: Implicit (visual edges only); Sharp Corners; Edge Behavior: Content fully contained.
 • Mood & Personality: Clean, Serious, Minimalist, Authoritative; Emotional bias: Neutral; Tone register: Detached; Representation mode: Literal; Real-world accuracy: Precise.
 • Colors: Palette: Solid Colors: [ #FFFFFF 65% (Background),  #000000 20% (Typography and rules),  #E1000F 8% (Functional accent),  #7A7A7A 7% (Secondary information)]; 3–5 colors; Neutral temperature; Saturation: Vivid; High contrast; No gradients; Color dominance: Background-dominant; Black/White point: Pure black + Pure white; Accessibility: AAA.
 • Typography: Grotesque; Regular, Bold; Text case: Sentence case; Font pairing: Single family; Hierarchy: Strong contrast; Type scale: Modular; Tight headings; Normal (1.4) body; Letter spacing: Tight; Text visual role: Primary visual driver.
 • 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: Strong; Symmetry: Asymmetrical balance; Balance: Tension-based; Layout axis: Horizontal; Visual density: Comfortable; Plane separation: Color/value shift.
 • Surface, Material & Detail: Surface treatment: Flat; Texture usage: None; Transparency: Opaque.
 • Shape Language: Geometric; Primitive dominance: Rectangles; Edge sharpness: Razor-sharp; Negative space usage: Deliberate wide unused column creates asymmetric tension.
 • Line & Stroke System: Structural outlines; Thin; Uniform consistency; Stroke joins: Miter.
 • Voice & Language: Formality: Formal; Technical vocabulary; Directness: Explicit; Short sentences; Metaphors: Factual; Perspective: Third person; Pacing: Staccato.
 • Background & Environment: Background type: Solid color; Background complexity: Minimal.
 • References: Swiss/International Style, Müller-Brockmann, Ruder, Hofmann; Temporal reference: 1950s.
 • 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; Borders: Visible solid border; Corner radius scale: Sharp (0px); Card style: Bordered; Button shape: Sharp rectangle; Icon style: Flat geometric; Hover: Color change; Animation: 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: Solid offset ring.
 • Guardrails: Avoid: AI Gloss / Plastic Smoothing, Heavy Bokeh / Blur, Lens Flare, Film Grain / Noise, HDR over-processing, Over-saturation, Stylistic filters; Avoid Visuals: centered headings; justified text; rounded cards; drop shadows; decorative rules; floating imagery; decorative illustration; Avoid Colors: secondary accent colors; gradients; tints; tonal color variations; Avoid 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.
 •  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..


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/m4oe3xex-9d9958eaf732?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/m4oe3xex-9d9958eaf732/style.md           # a ready-to-commit STYLE.md
```

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

```
styleref://gallery/m4oe3xex-9d9958eaf732
styleref://gallery/m4oe3xex-9d9958eaf732/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/m4oe3xex-9d9958eaf732