next / vite / remix

Klein Swiss Editorial

Inspired by a Helvetica-driven Swiss poster, this kit fuses a vivid signal blue, a warm paper cream, and deep ink navy into a confident, grid-disciplined system. It favors crisp type, generous whitespace, and minimal flat depth — ideal for typography catalogs, editorial products, and design studios that want a print-rooted, intentional look in both light and dark.

Use this kit Customize in Studio Download DESIGN.md

swiss

editorial

typographic

minimal

blue

cream

grid

flat

kleinswisseditorial.com

KleinSwiss

Typeface Selection, October MMXXII

A Swiss-grid system in electric blue, paper cream, and ink navy.

View specimenTokens

kleinswisseditorial.com

KleinSwiss

Typeface Selection, October MMXXII

A Swiss-grid system in electric blue, paper cream, and ink navy.

View specimenTokens

Exports

DESIGN.md DTCG tokens JSON CSS variables Tailwind v3 config Tailwind v4 theme shadcn registry JSON Registry install endpoint

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#FFFDF3"
    foreground: "#142444"
    card: "#FFFFFF"
    card-foreground: "#142444"
    popover: "#FFFFFF"
    popover-foreground: "#142444"
    primary: "#1B64D3"
    primary-foreground: "#FFFFFF"
    secondary: "#FEF3C3"
    secondary-foreground: "#3A3208"
    muted: "#EEE7D2"
    muted-foreground: "#5A5640"
    accent: "#BDD0DE"
    accent-foreground: "#142444"
    destructive: "#BA1A1A"
    destructive-foreground: "#FFFFFF"
    border: "#DCD5BE"
    input: "#DCD5BE"
    ring: "#1B64D3"
    success: "#2F7D4F"
    success-foreground: "#FFFFFF"
    warning: "#C98A12"
    warning-foreground: "#000000"
    chart-1: "#1B64D3"
    chart-2: "#DCC74D"
    chart-3: "#142444"
    chart-4: "#2F7D4F"
    chart-5: "#A69C7C"
typography:
  heading: { family: "Archivo", weights: [400, 500, 600, 700] }
  body: { family: "Inter", weights: [400, 500, 600, 700] }
  mono: { family: "JetBrains Mono", weights: [400, 500, 700] }
  scale: "major-third"
spacing:
  density: "balanced"
  base: "1rem"
  container: "1200px"
radius:
  sm: "0.125rem"
  md: "0.25rem"
  lg: "0.375rem"
  xl: "0.625rem"
components:
  button: { radius: "0.25rem", shape: "rounded", fill: "solid" }
  card: { radius: "0.625rem" }
  input: { radius: "0.25rem" }
  badge: { radius: "0.25rem" }
  borderWidth: "1px"

shadcn CSS Variables

/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains%20Mono:wght@400;500;700&display=swap");

:root {
  --radius: 0.375rem;
  --font-heading: 'Archivo', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 50 100% 98%;
  --foreground: 220 55% 17%;
  --card: 0 0% 100%;
  --card-foreground: 220 55% 17%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 55% 17%;
  --primary: 216 77% 47%;
  --primary-foreground: 0 0% 100%;
  --secondary: 49 97% 88%;
  --secondary-foreground: 50 76% 13%;
  --muted: 45 45% 88%;
  --muted-foreground: 51 17% 30%;
  --accent: 205 33% 81%;
  --accent-foreground: 220 55% 17%;
  --destructive: 0 75% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 46 30% 80%;
  --input: 46 30% 80%;
  --ring: 216 77% 47%;
  --success: 145 45% 34%;
  --success-foreground: 0 0% 100%;
  --warning: 39 84% 43%;
  --warning-foreground: 0 0% 0%;
  --chart-1: 216 77% 47%;
  --chart-2: 51 67% 58%;
  --chart-3: 220 55% 17%;
  --chart-4: 145 45% 34%;
  --chart-5: 46 19% 57%;
  --shadow-sm: 0 1px 0 0 rgba(20,36,68,0.08);
  --shadow-md: 0 1px 2px 0 rgba(20,36,68,0.10);
  --shadow-lg: 0 4px 8px -2px rgba(20,36,68,0.12);
  --shadow-xl: 0 12px 24px -6px rgba(20,36,68,0.16);
  --gradient-hero: linear-gradient(135deg,#1b64d3 0%,#142444 100%);
  --gradient-brand: linear-gradient(90deg,#1b64d3 0%,#4f8ee8 100%);
  --gradient-subtle: linear-gradient(180deg,#fffdf3 0%,#fef3c3 100%);
  --duration: 180ms;
  --duration-slow: 360ms;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --tracking-tight: -0.03em;
  --tracking-normal: 0em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 0.25rem;
  --card-radius: 0.625rem;
  --input-radius: 0.25rem;
  --badge-radius: 0.25rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: none;

Install Targets

Registry

/r/klein-swiss-editorial.json

Tailwind v4

@theme inline {
  --font-heading: 'Archivo', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));
  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.625rem;
  --radius-button: 0.25rem;
  --radius-card: 0.625rem;
  --radius-input: 0.25rem;
  --radius-badge: 0.25rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --shadow-sm: 0 1px 0 0 rgba(20,36,68,0.08);
  --shadow-md: 0 1px 2px 0 rgba(20,36,68,0.10);
  --shadow-lg: 0 4px 8px -2px rgba(20,36,68,0.12);
  --shadow-xl: 0 12px 24px -6px rgba(20,36,68,0.16);
  --tracking-tight: -0.03em;
  --tracking-normal: 0em;
  --ease-kit: cubic-bezier(0.4,0,0.2,1);
  --duration-kit: 180ms;
  --duration-kit-slow: 360ms;
  --gradient-hero: linear-gradient(135deg,#1b64d3 0%,#142444 100%);
  --gradient-brand: linear-gradient(90deg,#1b64d3 0%,#4f8ee8 100%);
  --gradient-subtle: linear-gradient(180deg,#fffdf3 0%,#fef3c3 100%);
  --font-weight-heading: 700;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "klein-swiss-editorial",
  "type": "registry:theme",
  "title": "Klein Swiss Editorial",
  "description": "A bold Swiss-typographic kit pairing electric blue with warm cream and ink navy for editorial, type-forward interfaces.",
  "categories": [
    "swiss",
    "editorial",
    "typographic",
    "minimal",
    "blue",
    "cream",
    "grid",
    "flat"
  ],