Identity Forge
shadcn/ui / tailwindcss / next.js

London Guide System

Each section or category is assigned an exclusive solid cover color (sand, amber, cobalt, orange, olive, steel-blue, gray) that fills the entire surface edge-to-edge with no imagery, texture, or decoration. Display headings are bold lowercase grotesque — the lowercase rule is identity-defining. A single uppercase alphabetic index label anchors the top-right corner. Hairline horizontal rules open every text zone. The deep forest green backdrop becomes the dark mode ambient surface. The seven-color categorical palette is the wayfinding system.

Use this kitCustomize in StudioDownload DESIGN.md
swiss-style
editorial
flat-design
multi-color
categorical
helvetica-inspired
modernist
lowercase
print-influenced
guidebook
zero-radius

londonguidesystem.com

LDN Guide

getting around

First time visitor? Get started with practical advice on making the most of your trip — iconic attractions, culture and transport.

explore the guideTokens

londonguidesystem.com

LDN Guide

getting around

First time visitor? Get started with practical advice on making the most of your trip — iconic attractions, culture and transport.

explore the guideTokens

Exports

DESIGN.mdDTCG tokens JSONCSS variablesTailwind v3 configTailwind v4 themeshadcn registry JSONRegistry install endpoint

Agent Prompt Surface

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#D4B78B"
    foreground: "#1A1A18"
    card: "#CDB586"
    card-foreground: "#1A1A18"
    popover: "#C8AE80"
    popover-foreground: "#1A1A18"
    primary: "#BE5422"
    primary-foreground: "#FFFFFF"
    secondary: "#85A8BE"
    secondary-foreground: "#1A1A18"
    muted: "#C5AA7E"
    muted-foreground: "#4A3F2C"
    accent: "#E8A820"
    accent-foreground: "#1A1A18"
    destructive: "#C0392B"
    destructive-foreground: "#FFFFFF"
    border: "#B0966E"
    input: "#B0966E"
    ring: "#BE5422"
    success: "#3D7A54"
    success-foreground: "#FFFFFF"
    warning: "#E8A820"
    warning-foreground: "#1A1A18"
    chart-1: "#C95D2A"
    chart-2: "#1F62A0"
    chart-3: "#7A8D52"
    chart-4: "#E8A820"
    chart-5: "#85A8BE"
  palette:
    - { name: "sand-beige", hex: "#d4b78b", role: "surface-light" }
    - { name: "amber-gold", hex: "#e8a820", role: "surface-warm" }
    - { name: "cobalt-blue", hex: "#1f62a0", role: "surface-vivid" }
    - { name: "burnt-orange", hex: "#c95d2a", role: "surface-action" }
    - { name: "light-gray", hex: "#c0c8cc", role: "surface-neutral" }
    - { name: "olive-green", hex: "#7a8d52", role: "surface-nature" }
    - { name: "steel-blue", hex: "#85a8be", role: "surface-cool" }
    - { name: "forest-green-deep", hex: "#193924", role: "surface-dark" }
    - { name: "forest-green-mid", hex: "#1a3d2a", role: "surface-dark-card" }
    - { name: "forest-green-alt", hex: "#173a25", role: "surface-dark-variant" }
    - { name: "sand-warm-card", hex: "#cdb586", role: "surface-light-card" }
    - { name: "sand-light-variant", hex: "#d1b68d", role: "surface-light-variant" }
    - { name: "near-black", hex: "#1a1a18", role: "ink-primary" }
    - { name: "warm-brown-muted", hex: "#4a3f2c", role: "ink-muted" }
    - { name: "sand-faded", hex: "#b8a082", role: "ink-muted-dark" }
    - { name: "border-sand", hex: "#b0966e", role: "border" }
    - { name: "border-forest", hex: "#2d5040", role: "border-dark" }
    - { name: "amber-vibrant-extracted", hex: "#f19b05", role: "accent-vivid" }
    - { name: "ocean-blue-scored", hex: "#1d6586", role: "data-viz" }

shadcn CSS Variables

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

:root {
  --radius: 0rem;
  --font-heading: 'Jost', sans-serif;
  --font-sans: 'Jost', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --background: 36 46% 69%;
  --foreground: 60 4% 10%;
  --card: 40 42% 66%;
  --card-foreground: 60 4% 10%;
  --popover: 38 40% 64%;
  --popover-foreground: 60 4% 10%;
  --primary: 19 70% 44%;
  --primary-foreground: 0 0% 100%;
  --secondary: 203 30% 63%;
  --secondary-foreground: 60 4% 10%;
  --muted: 37 38% 63%;
  --muted-foreground: 38 25% 23%;
  --accent: 41 81% 52%;
  --accent-foreground: 60 4% 10%;
  --destructive: 6 63% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 36 29% 56%;
  --input: 36 29% 56%;
  --ring: 19 70% 44%;
  --success: 143 33% 36%;
  --success-foreground: 0 0% 100%;
  --warning: 41 81% 52%;
  --warning-foreground: 60 4% 10%;
  --chart-1: 19 65% 48%;
  --chart-2: 209 68% 37%;
  --chart-3: 79 26% 44%;
  --chart-4: 41 81% 52%;
  --chart-5: 203 30% 63%;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-md: 0 2px 4px 0 rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 8px 0 rgba(0,0,0,0.10);
  --shadow-xl: 0 8px 16px 0 rgba(0,0,0,0.12);
  --gradient-hero: linear-gradient(135deg, #d4b78b 0%, #c5a87a 100%);
  --gradient-brand: linear-gradient(135deg, #e8a820 0%, #c95d2a 100%);
  --gradient-subtle: linear-gradient(180deg, #d4b78b 0%, #cdb586 100%);
  --duration: 150ms;
  --duration-slow: 300ms;
  --ease: cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 0rem;
  --card-radius: 0rem;
  --input-radius: 0rem;
  --badge-radius: 0rem;
  --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/london-guide-system.json

Tailwind v4

@theme inline {
  --font-heading: 'Jost', sans-serif;
  --font-sans: 'Jost', sans-serif;
  --font-mono: 'IBM Plex 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: 0rem;
  --radius-md: 0rem;
  --radius-lg: 0rem;
  --radius-xl: 0rem;
  --radius-button: 0rem;
  --radius-card: 0rem;
  --radius-input: 0rem;
  --radius-badge: 0rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-md: 0 2px 4px 0 rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 8px 0 rgba(0,0,0,0.10);
  --shadow-xl: 0 8px 16px 0 rgba(0,0,0,0.12);
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --ease-kit: cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --duration-kit: 150ms;
  --duration-kit-slow: 300ms;
  --gradient-hero: linear-gradient(135deg, #d4b78b 0%, #c5a87a 100%);
  --gradient-brand: linear-gradient(135deg, #e8a820 0%, #c95d2a 100%);
  --gradient-subtle: linear-gradient(180deg, #d4b78b 0%, #cdb586 100%);
  --font-weight-heading: 700;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "london-guide-system",
  "type": "registry:theme",
  "title": "London Guide System",
  "description": "A Swiss International Style design kit built on a seven-color categorical cover system, where each section owns a distinct matte flat color as its full surface — distilled from a London visitor guidebook series.",
  "categories": [
    "swiss-style",
    "editorial",
    "flat-design",
    "multi-color",
    "categorical",
    "helvetica-inspired",
    "modernist",
    "lowercase",
    "print-influenced",