Wiz's personal design language for visual output. ONLY load this skill when explicitly asked — triggers include: "use my design language", "swiss design", "apply my aesthetic", or direct requests to style something visually. Do not load for general coding, UI components, or design tasks unless one of these triggers is present.
This design language lives at the intersection of Swiss International Typographic Style, editorial brutalism, and systematic minimalism. Every visual decision is deliberate, rational, and structural. Design is not decoration — it is information made spatial. The grid is law. Type is image. Negative space is active, not empty. Color is used like a scalpel, not a paintbrush.
If a single sentence had to name this aesthetic:
"Radical clarity through systematic tension."
Typography is never supplementary. In most compositions, type is the primary visual element — scaled to architectural proportions, cropped by edges, overlapping images, bleeding off canvas. A single word set at 400px is a shape, a texture, a statement. Text is not placed on top of a layout — it IS the layout.
Every composition is built on an invisible but rigorous grid — columns, gutters, baselines, modules. However, the most powerful moments come from deliberate, calculated violations of that grid. An oversized letterform that ignores column boundaries. An image that bleeds past the margin. A single element that breaks the system to create tension. The grid must be understood before it can be broken.
The default palette is strictly monochromatic.
#0A0A0A on #F5F4F0. Creates an editorial, archival, printed artifact feel.#F5F4F0 on #000000. Creates a glowing, high-tech, deeply immersive void.
Color, when used, is singular and surgical — one accent, deployed rarely, with full intention. Monochrome is not a constraint; it is an amplifier.Scale contrast is extreme. A display headline at 200px next to body copy at 10px. A large photograph next to dense tabular data. The jump between levels of hierarchy is never subtle — it is violent and deliberate.
Compositions intentionally oscillate between dense information zones (like a multiplexer terminal or a dense code block) and vast negative space. A page might have one-third covered in tightly-set 8pt metadata and two-thirds of pure void. The tension between them creates visual rhythm.
Data visualization, photography, and type are not separate categories — they are visual materials with equal weight. A bar chart can be compositionally treated like a photograph. A halftone dot pattern can be data and image simultaneously.
Primary / Display: Grotesque / Neo-grotesque sans-serifs. The canon:
Mono / Code / System Contexts:
Forbidden typefaces:
Type sizes jump dramatically. There is no "medium." In responsive contexts, scale type using viewport units (vw, vh) tied to a clamp(), ensuring the ratio of contrast never degrades.
DISPLAY: 120px–600px+ (headline as image, bleeds off canvas)
TITLE: 48px–120px (section anchors, poster titles)
SUBHEAD: 18px–36px (labels, category markers)
BODY: 12px–16px (readable prose, descriptions)
CAPTION: 8px–11px (metadata, coordinates, credits, fine print)
MICRO: 6px–9px (tabular data, systematic annotations)
+0.1em).-0.03em).ABSOLUTE BLACK: #000000 — deep backgrounds, maximum contrast moments
NEAR BLACK: #0A0A0A — ink blacks, body text on light
OFF WHITE: #F5F4F0 — paper-tone, warm light backgrounds
PURE WHITE: #FFFFFF — clinical, sterile contexts
MID GRAY: #888888 — secondary text, structural rules
SIGNAL RED: #E63329 / #CC2A1E — urgency, redaction, surgical cut
WARM YELLOW: #F2C94C / #D4A017 — warmth, archival accent
PHOSPHOR GREEN: #00FF41 — terminal environments, raw data only
ELECTRIC BLUE: #0047FF — technical, cold diagrams
Rules: The accent color must appear in at most 1–2 elements. It is used as a bar, a dot, a single word, or a bounding element — never as a generic background fill.
You must determine if a layout is an Interface or an Artifact.
Doctrine 1: The Artifact (Anti-Responsive) For pure editorial, posters, or digital art pieces. The canvas is fixed. The aspect ratio is sacred.
transform: scale() tied to the viewport width, or CSS aspect-ratio containers. The user pans and zooms, or the entire canvas scales down proportionally like an image. The grid is never compromised.Doctrine 2: The Interface (Fluid Matrix) For functional data, articles, and interactive surfaces. The layout adapts, but the brutalist proportions remain.
To avoid repetitive generation, utilize these distinct structural patterns:
┌─────────────────────────────────┐
│ METADATA │
│ DATE / LABEL │
│ │
│ │
│ DISPLAY HEADLINE │
│ (large, left-bottom) │
│ ┌──────────┐ │
│ │ METADATA │ │
└─────────────────────────────────┘
Title anchors bottom-left. Metadata top-right. Massive void in between. Standard print-poster translated to screen.
┌─────────────────────────────────┐
│ DISPLAY │
│ TYPE │
│ BREAKING │
│ DOWN │
│ THE PAGE │
│ ─────────────────────────────── │
│ col 1 │ col 2 │ col 3 │
└─────────────────────────────────┘
Massive typography steps down the grid diagonally. It dominates the top 80% of the viewport. The bottom 20% contains intensely packed, multi-column micro-text. The contrast is visceral.
┌─────────────────────────────────┐
│ TITLE ───────────── INDEX 01. │
│ │
│ [ IMG ] 01_Item_Description │
│ [ IMG ] 02_Item_Description │
│ [ IMG ] 03_Item_Description │
│ [ IMG ] 04_Item_Description │
└─────────────────────────────────┘
Pure utilitarian list formatting. Repeating modules locked to a harsh horizontal baseline grid. Images are treated as thumbnails (strictly squared or landscape, black and white).
┌────────────────┬────────────────┐
│ │ 12px body copy │
│ │ set extremely │
│ MASSIVE │ tight in a │
│ VOID OR │ single, narrow │
│ IMAGE │ column against │
│ │ the right edge.│
│ │ │
└────────────────┴────────────────┘
A brutal 70/30 or 80/20 vertical split. Left side is entirely void, or a single massive, high-contrast greyscale image. Right side is dense, tightly leaded text.
┌─────────────────────────────────┐
│DISPLAY TYP │
│E THAT BLE │
│EDS OFF │
│ │
│ body copy body copy │
│ in columns in columns │
│ │
└─────────────────────────────────┘
Oversized type that exits the canvas. Readable content below in columns.
┌─────────────────────────────────┐
│ LABEL │ LABEL │ LABEL │
│ body │ body │ body │
│ text │ text │ text │
│ column │ column │ column │
│ │ │ │
│ ┌─────────────────────────────┐ │
│ │ DISPLAY ELEMENT (type/img) │ │
│ └─────────────────────────────┘ │
│ BOTTOM ANCHOR — LARGE TYPE │
└─────────────────────────────────┘
Columnar body text above, dominant display element below or overlapping.
┌─────────────────────────────────┐
│ 01 02 03 04 05 06 07 08 │
│ ── ── ── ── ── ── ── ── │
│ item item item item item item │
│ item item item item item item │
│ │
│ DISPLAY │
│ │
└─────────────────────────────────┘
Numbered grid of items (lists, indexes) with a dominant word or image below.
┌─────────────────────────────────┐
│ │
│ ┌──────────┐ │
│ │ │ TYPE │
│ │ IMAGE │ HERE │
│ │ ──────┼─────── │
│ │ RED │ │
│ │ BAR │ │
│ └──────────┘ │
│ DESCRIPTOR │
│ DESCRIPTOR │
└─────────────────────────────────┘
Wherever a zone, section, or panel needs a label, the treatment is always the same: a hairline rule paired with monospace text.
+0.15em#C8C6C1 or #333333grayscale(100%) contrast(120%)) or SVG halftone filters.A small cluster of rectangles arranged in a 2×2 or 3×2 grid. This motif signals machine-precision and systematic thinking. Reads like a registration mark.
Motion must look like a machine executing a script, not a bouncy UI element.
cubic-bezier(0.76, 0, 0.24, 1) or cubic-bezier(0.85, 0, 0.15, 1). (A heavy, suspenseful draw, a fluid glide, and a buttery, infinite settle).width / height from 0 to 100% to frame content before text appears.