react / next / tailwind

Monument Grotesk Editorial

Inspired by a contemporary architecture review poster, this kit pairs a punchy vermillion-red brand color with warm pink surfaces and ink-black type. The mood is confident, editorial, and grid-driven — flat shadows, tight headline tracking, and high-contrast color blocking evoke print typography systems.

Use this kit Customize in Studio Download DESIGN.md

editorial

swiss

grotesk

vermillion

pink

high-contrast

typographic

monumentgroteskeditorial.com

Monument

Ba&Sn®

A monthly typographic selection from the architectural review — bold grids, sharp color, editorial clarity.

View MoreTokens

monumentgroteskeditorial.com

Monument

Ba&Sn®

A monthly typographic selection from the architectural review — bold grids, sharp color, editorial clarity.

View MoreTokens

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: "#FFF8F9"
    foreground: "#201A1C"
    card: "#FFFFFF"
    card-foreground: "#201A1C"
    popover: "#FFFFFF"
    popover-foreground: "#201A1C"
    primary: "#F34C34"
    primary-foreground: "#000000"
    secondary: "#FDE0E9"
    secondary-foreground: "#7A2A44"
    muted: "#F4E8EC"
    muted-foreground: "#6C5A60"
    accent: "#FEC7DA"
    accent-foreground: "#7A2A44"
    destructive: "#BA1A1A"
    destructive-foreground: "#FFFFFF"
    border: "#E7D3D9"
    input: "#E7D3D9"
    ring: "#F34C34"
    success: "#2F7D4F"
    success-foreground: "#FFFFFF"
    warning: "#C97A17"
    warning-foreground: "#000000"
    chart-1: "#F34C34"
    chart-2: "#FEC7DA"
    chart-3: "#A03828"
    chart-4: "#F49998"
    chart-5: "#974067"
typography:
  heading: { family: "Archivo", weights: [400, 500, 600, 700] }
  body: { family: "Inter", weights: [400, 500, 600, 700] }
  mono: { family: "Space Mono", weights: [400, 700] }
  scale: "major-third"
spacing:
  density: "balanced"
  base: "4px"
  container: "1200px"
radius:
  sm: "0.125rem"
  md: "0.25rem"
  lg: "0.375rem"
  xl: "0.5rem"
components:
  button: { radius: "0.25rem", shape: "rounded", fill: "solid" }
  card: { radius: "0.5rem" }
  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=Space%20Mono:wght@400;700&display=swap");

:root {
  --radius: 0.375rem;
  --font-heading: 'Archivo', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 351 100% 99%;
  --foreground: 340 10% 11%;
  --card: 0 0% 100%;
  --card-foreground: 340 10% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 340 10% 11%;
  --primary: 8 89% 58%;
  --primary-foreground: 0 0% 0%;
  --secondary: 341 88% 94%;
  --secondary-foreground: 341 49% 32%;
  --muted: 340 35% 93%;
  --muted-foreground: 340 9% 39%;
  --accent: 339 96% 89%;
  --accent-foreground: 341 49% 32%;
  --destructive: 0 75% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 342 29% 87%;
  --input: 342 29% 87%;
  --ring: 8 89% 58%;
  --success: 145 45% 34%;
  --success-foreground: 0 0% 100%;
  --warning: 33 79% 44%;
  --warning-foreground: 0 0% 0%;
  --chart-1: 8 89% 58%;
  --chart-2: 339 96% 89%;
  --chart-3: 8 60% 39%;
  --chart-4: 1 81% 78%;
  --chart-5: 333 40% 42%;
  --shadow-sm: 0 1px 0 0 rgba(32,26,28,0.08);
  --shadow-md: 0 2px 4px 0 rgba(32,26,28,0.10);
  --shadow-lg: 0 4px 12px 0 rgba(32,26,28,0.12);
  --shadow-xl: 0 8px 28px 0 rgba(32,26,28,0.16);
  --gradient-hero: linear-gradient(180deg,#f34c34 0%,#f49998 100%);
  --gradient-brand: linear-gradient(135deg,#f34c34 0%,#fec7da 100%);
  --gradient-subtle: linear-gradient(180deg,#fff8f9 0%,#f7ebf1 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.5rem;
  --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/monument-grotesk-editorial.json

Tailwind v4

@theme inline {
  --font-heading: 'Archivo', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Space 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.5rem;
  --radius-button: 0.25rem;
  --radius-card: 0.5rem;
  --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(32,26,28,0.08);
  --shadow-md: 0 2px 4px 0 rgba(32,26,28,0.10);
  --shadow-lg: 0 4px 12px 0 rgba(32,26,28,0.12);
  --shadow-xl: 0 8px 28px 0 rgba(32,26,28,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(180deg,#f34c34 0%,#f49998 100%);
  --gradient-brand: linear-gradient(135deg,#f34c34 0%,#fec7da 100%);
  --gradient-subtle: linear-gradient(180deg,#fff8f9 0%,#f7ebf1 100%);
  --font-weight-heading: 700;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "monument-grotesk-editorial",
  "type": "registry:theme",
  "title": "Monument Grotesk Editorial",
  "description": "A bold Swiss-editorial design kit anchored in vermillion red and soft pink, built for typographic, gallery-grade interfaces.",
  "categories": [
    "editorial",
    "swiss",
    "grotesk",
    "vermillion",
    "pink",
    "high-contrast",
    "typographic"
  ],
  "cssVars": {