Identity Forge
react / next / vite

Strelka Editorial

Inspired by a Swiss-modern lecture poster from Strelka Institute, this kit pairs a confident emerald green with a powdery pink accent over crisp neutral surfaces. Flat depth, tight grids, and monospace details give it an intentional, print-like, intellectual feel that works across light and dark modes.

Use this kitCustomize in StudioDownload DESIGN.md
editorial
constructivist
swiss
monospace
green
pink
flat
grid

strelkaeditorial.com

Strelka

HSU AT STRELKA

Cultural analytics: the study of social networks, framed in a precise editorial grid.

View the programTokens

strelkaeditorial.com

Strelka

HSU AT STRELKA

Cultural analytics: the study of social networks, framed in a precise editorial grid.

View the programTokens

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: "#FBFDF9"
    foreground: "#191C1A"
    card: "#FFFFFF"
    card-foreground: "#191C1A"
    popover: "#FFFFFF"
    popover-foreground: "#191C1A"
    primary: "#1F9E72"
    primary-foreground: "#000000"
    secondary: "#E4EDE7"
    secondary-foreground: "#283832"
    muted: "#EEF3F0"
    muted-foreground: "#566660"
    accent: "#FCB9CB"
    accent-foreground: "#5A2436"
    destructive: "#BA1A1A"
    destructive-foreground: "#FFFFFF"
    border: "#D3DDD6"
    input: "#D3DDD6"
    ring: "#1F9E72"
    success: "#1F9E72"
    success-foreground: "#000000"
    warning: "#C77716"
    warning-foreground: "#000000"
    chart-1: "#1F9E72"
    chart-2: "#FCB9CB"
    chart-3: "#275C44"
    chart-4: "#54B393"
    chart-5: "#DBACBC"
typography:
  heading: { family: "Space Grotesk", weights: [400, 500, 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: "0rem"
  md: "0.125rem"
  lg: "0.25rem"
  xl: "0.375rem"
components:
  button: { radius: "0.125rem", shape: "rounded", fill: "solid" }
  card: { radius: "0.375rem" }
  input: { radius: "0.125rem" }
  badge: { radius: "0.125rem" }
  borderWidth: "1px"

shadcn CSS Variables

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

:root {
  --radius: 0.25rem;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 90 50% 98%;
  --foreground: 140 6% 10%;
  --card: 0 0% 100%;
  --card-foreground: 140 6% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 140 6% 10%;
  --primary: 159 67% 37%;
  --primary-foreground: 0 0% 0%;
  --secondary: 140 20% 91%;
  --secondary-foreground: 158 17% 19%;
  --muted: 144 17% 94%;
  --muted-foreground: 157 9% 37%;
  --accent: 344 92% 86%;
  --accent-foreground: 340 43% 25%;
  --destructive: 0 75% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 138 13% 85%;
  --input: 138 13% 85%;
  --ring: 159 67% 37%;
  --success: 159 67% 37%;
  --success-foreground: 0 0% 0%;
  --warning: 33 80% 43%;
  --warning-foreground: 0 0% 0%;
  --chart-1: 159 67% 37%;
  --chart-2: 344 92% 86%;
  --chart-3: 153 40% 26%;
  --chart-4: 160 38% 52%;
  --chart-5: 340 39% 77%;
  --shadow-sm: 0 1px 0 0 rgba(25,28,26,0.06);
  --shadow-md: 0 1px 2px 0 rgba(25,28,26,0.08);
  --shadow-lg: 0 2px 6px 0 rgba(25,28,26,0.10);
  --shadow-xl: 0 8px 24px -8px rgba(25,28,26,0.16);
  --gradient-hero: linear-gradient(135deg, #1f9e72 0%, #54b393 50%, #fcb9cb 100%);
  --gradient-brand: linear-gradient(90deg, #1f9e72 0%, #275c44 100%);
  --gradient-subtle: linear-gradient(180deg, #fbfdf9 0%, #eef3f0 100%);
  --duration: 180ms;
  --duration-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 0.125rem;
  --card-radius: 0.375rem;
  --input-radius: 0.125rem;
  --badge-radius: 0.125rem;
  --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/strelka-editorial.json

Tailwind v4

@theme inline {
  --font-heading: 'Space Grotesk', 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: 0rem;
  --radius-md: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.375rem;
  --radius-button: 0.125rem;
  --radius-card: 0.375rem;
  --radius-input: 0.125rem;
  --radius-badge: 0.125rem;
  --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(25,28,26,0.06);
  --shadow-md: 0 1px 2px 0 rgba(25,28,26,0.08);
  --shadow-lg: 0 2px 6px 0 rgba(25,28,26,0.10);
  --shadow-xl: 0 8px 24px -8px rgba(25,28,26,0.16);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --ease-kit: cubic-bezier(0.2, 0, 0, 1);
  --duration-kit: 180ms;
  --duration-kit-slow: 320ms;
  --gradient-hero: linear-gradient(135deg, #1f9e72 0%, #54b393 50%, #fcb9cb 100%);
  --gradient-brand: linear-gradient(90deg, #1f9e72 0%, #275c44 100%);
  --gradient-subtle: linear-gradient(180deg, #fbfdf9 0%, #eef3f0 100%);
  --font-weight-heading: 700;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "strelka-editorial",
  "type": "registry:theme",
  "title": "Strelka Editorial",
  "description": "A constructivist editorial design kit anchored on vivid green and soft pink, built for typographic, grid-driven interfaces.",
  "categories": [
    "editorial",
    "constructivist",
    "swiss",
    "monospace",
    "green",
    "pink",
    "flat",
    "grid"
  ],