Swiss Blue Prosumer Clarity

/swissBlueProsumerClarity
A disciplined, Swiss-inspired system leveraging premium grotesk typography, strict grids, vast whitespace, and a singular vivid blue accent for editorial, high-performance software clarity.
0 likes
0 bookmarks
Jun 14, 2026
Design System Content
# Swiss Blue Prosumer Clarity

A disciplined, typography-first design language combining Swiss editorial order with contemporary software polish.

---

## Philosophy

> "Sophistication stems from restraint; clarity from absolute alignment."

This system creates interfaces that feel like a highly curated editorial publication fused with high-performance software. It is built upon absolute mathematical precision, vast expanses of canvas, and flawless typographic execution. The aesthetic commands respect through hierarchy, alignment, and scale rather than superficial decoration. 

### Core Beliefs

1. **Typography is the interface** — We rely on confident, rational letterforms to build structure. The typeface does the heavy lifting, replacing the need for boxes or backgrounds.
2. **The 12-Column law** — Everything maps to a strict 12-column grid with wide gutters. Intentional emptiness is not wasted space; it is the structural support for the content.
3. **Cool Objectivity** — Product framing utilizes cool grays to present interfaces as clinical, objective artifacts. 
4. **The Vivid Blue Anchor** — A single, piercing, highly-saturated blue serves as the sole indicator of interaction, section mapping, and vital UI highlights.
5. **Invisible depth** — Shadows should be felt, not seen. Depth is established through subtle overlaps, framing, and nearly imperceptible edge treatments.

### Strict Rules

* **No Decorative Gradients** — Backgrounds and fills must be solid and flat to maintain pure structural integrity and typographic clarity.
* **No Default Sans-Serifs** — Inter, Roboto, or Arial are forbidden. Use a premium grotesk (Suisse Int’l, Neue Haas Grotesk Display, Univers Next, or Untitled Sans).
* **No Heavy Motion** — Animations must be extremely restrained. Sophistication comes from the static layout and sudden, crisp state changes.
* **Centered Objectivity** — Product visuals must sit absolutely centered within their framing modules.

---

## Color Palette

### Cool Monochromatic & Accent Scale

The palette relies on a stark, bright white canvas punctuated by cool, slate-toned grays. The accent is a highly saturated, vivid "Prosumer Blue" (#0047FF) that cuts through the clinical grays.

```css
/* Backgrounds (Lightest to Darkest) */
bg-white              /* Absolute canvas background (#ffffff) - used abundantly */
bg-slate-50           /* Ultra-light cool fill for subtle product framing (#f8fafc) */
bg-slate-100          /* Standard module background, cool gray fill (#f1f5f9) */
bg-slate-200/50       /* Hover states for interactive modules */
bg-slate-800          /* Dark inverted structural elements */

/* Borders */
border-slate-100      /* Barely-there structural guidelines */
border-slate-200      /* Standard dividers, column rules */
border-slate-300      /* Hover boundaries, form input borders */
border-slate-900      /* Strong editorial rules, high-contrast markers */

/* The Anchor: Prosumer Blue (Accent) */
text-blue-600         /* Text links, small UI highlights (#0047FF) */
bg-blue-600           /* Primary CTAs, active progress bars, section markers */
border-blue-600       /* Fine rules indicating active states, focused inputs */
bg-blue-600/10        /* Highlighted table rows, active list items */

/* Text Hierarchy (Cool Black & Slate) */
text-slate-900        /* Confident headlines, primary data, active navigation (#0f172a) */
text-slate-700        /* Body copy, rational descriptions (#334155) */
text-slate-500        /* Secondary metadata, table headers, captions (#64748b) */
text-slate-400        /* Disabled states, placeholder text (#94a3b8) */

```

### Destructive Actions

```css
bg-red-600            /* Only used for catastrophic or permanent deletions (#e11d48) */
text-red-600
border-red-200

```

---

## Typography

The aesthetic requires a premium, non-default grotesk. Typography is set with strict, compact line-heights and highly tuned letter spacing to echo high-end Swiss print design.

### Font Weights

```css
font-normal      /* Core body copy, descriptions, secondary metadata */
font-medium      /* Standard UI elements, buttons, column headers */
font-semibold    /* Confident rational headlines, primary section titles */
/* Note: Extreme weights (Ultra-Light or Black) are avoided to maintain rational objectivity */

```

### Font Size Scale & Leading

Line heights (`leading`) are unusually compact to create solid typographic blocks.

```css
text-[11px] leading-tight    /* Super-scripts, grid coordinates, tiny badges */
text-xs leading-tight        /* Overlines, precise system metrics (12px) */
text-sm leading-snug         /* Standard UI text, secondary paragraphs (14px) */
text-base leading-snug       /* Core reading text, list items (16px) */
text-lg leading-tight        /* Article intros, minor subheadings (18px) */
text-2xl leading-none        /* Module headers, product titles (24px) */
text-4xl leading-none        /* Secondary page titles (36px) */
text-6xl leading-[0.9]       /* Primary editorial headlines, massive data points (60px) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Mandatory for text-2xl and above to create solid blocks */
tracking-normal  /* Default for body text (text-sm to text-lg) */
tracking-[0.05em] /* Controlled wide tracking for micro-typography and uppercase */

uppercase        /* Editorial overlines, column headers, fine print */

```

### Hierarchy Examples

| Element | Size | Weight | Line-Height | Tracking | Color |
| --- | --- | --- | --- | --- | --- |
| Page Headline | 6xl | semibold | 0.9 | tight | slate-900 |
| Section Rule Title | xs | medium | tight | wide (0.05em) | slate-500 |
| Body Copy | base | normal | snug | normal | slate-700 |
| Primary CTA | sm | medium | tight | normal | white |
| Fine Print | [11px] | normal | tight | normal | slate-400 |

---

## Animation System

### Core Philosophy: Instant & Crisp

Avoid heavy motion, physics-based springs, or bouncy spatial transitions. The system relies on sudden, crisp reveals or extremely fast, linear opacity fades.

### State Transitions (Rapid Fade)

```tsx
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.15, ease: "linear" }}

```

### Hover Interactions (Zero-Delay)

Hover states should feel like instant hardware toggles rather than soft digital transitions.

```tsx
/* CSS classes use duration-75 or no transition utility for immediate response */
className="hover:bg-slate-100 transition-colors duration-75"

```

---

## UI Components

### The 12-Column Grid Wrapper

All content must snap to this grid. The gutters are exceptionally wide, ensuring large areas of intentional emptiness.

```tsx
<div className="grid grid-cols-12 gap-x-8 max-w-[1440px] mx-auto px-12">
  <div className="col-span-4">{/* Sidebar or metadata */}</div>
  <div className="col-span-8">{/* Primary content */}</div>
</div>

```

### The Section Marker (Fine Rule)

Swiss design relies on horizontal rules to establish order. We use a 1px vivid blue line to mark significant new sections.

```tsx
<div className="border-t border-blue-600 pt-3 flex justify-between">
  <span className="uppercase text-xs font-medium tracking-[0.05em] text-slate-900">Section 01</span>
  <span className="uppercase text-xs font-normal text-slate-500">Overview</span>
</div>

```

### Product Framing Module

Product visuals are strictly centered inside square, rounded-corner containers with a cool gray fill.

```tsx
<div className="aspect-square bg-slate-50 rounded-2xl flex items-center justify-center p-12 border border-slate-100/50">
  {/* Product image sits here, perfectly centered */}
  <img src="/product.png" className="shadow-[0_4px_24px_rgba(15,23,42,0.04)]" />
</div>

```

---

## Component Catalog

### Cards

Cards do not use heavy shadows. They rely on cool gray fills and square-ish rounded corners (avoid pill shapes or massive border radii).

```tsx
// Default Data Card
"bg-white border border-slate-200 rounded-xl p-6 shadow-[0_2px_8px_rgba(15,23,42,0.02)]"

// Elevated Focus Card
"bg-slate-50 border border-slate-200 rounded-xl p-6 shadow-[0_8px_32px_rgba(15,23,42,0.03)]"

```

### Buttons

Strictly utilitarian. Solid colors, precise padding, no gradients.

```tsx
// Primary CTA (The Vivid Blue Anchor)
"bg-blue-600 text-white font-medium text-sm rounded-lg px-5 py-2.5 hover:bg-blue-700 active:bg-blue-800"

// Secondary Action (Ghost/Outline)
"bg-transparent text-slate-900 font-medium text-sm rounded-lg px-5 py-2.5 border border-slate-200 hover:border-slate-400 hover:bg-slate-50"

// Text Link
"text-blue-600 font-medium text-sm hover:text-blue-800 underline underline-offset-4 decoration-blue-600/30 hover:decoration-blue-600"

```

### Inputs

Forms must feel like technical specification sheets—sharp, aligned, and highly legible.

```tsx
// Standard Text Input
"w-full px-3 py-2 bg-white border border-slate-200 rounded-md text-slate-900 text-sm focus:outline-none focus:border-blue-600 focus:ring-1 focus:ring-blue-600"

// Input Label (Always present, never just placeholders)
"block text-xs font-medium text-slate-700 mb-1.5"

```

### Badges & UI Highlights

```tsx
// Small UI Highlight (Vivid Accent)
"inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium bg-blue-600/10 text-blue-600"

// Rational System Tag (Cool Gray)
"inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-slate-100 text-slate-600 border border-slate-200"

```

---

## Quality Checklist

* [ ] Is the background a pure, bright white (`#ffffff`)?
* [ ] Are all headlines using a non-default grotesk with compact (`leading-none` or `leading-[0.9]`) line height?
* [ ] Have you implemented a strict 12-column grid with wide gutters?
* [ ] Is there generous, intentional emptiness balancing the dense typography?
* [ ] Are product visuals strictly centered inside square, rounded-corner cool-gray modules?
* [ ] Is the vivid blue accent used sparingly but consistently for primary actions and section rules?
* [ ] Have you completely eliminated decorative gradients and heavy, muddy drop shadows?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Flat, solid color fills (Bright White, Cool Grays, Vivid Blue).
* Extreme, compact line-heights on large typography.
* Almost invisible, highly diffused shadows (`rgba(15,23,42,0.02)`).
* Square modules with rational border-radii (`rounded-xl` or `rounded-2xl`).
* Hairline borders and section-dividing rules.

### ✗ Not Allowed

* Default system fonts (e.g., Arial, San Francisco, Segoe UI) for primary display text.
* Centered text alignment for paragraphs or long descriptions (align left to maintain the grid).
* Multi-color gradients, mesh gradients, or glassmorphism.
* High-bounce spring animations or slow, sweeping motion.
* Colored backgrounds for entire sections (allow the whitespace to do the work).