Identity Forge
next / vite / remix

Surf House Editorial

Surf House Editorial distills a bohemian-modern architecture spread into a shippable token system. It pairs an elegant high-contrast serif for display with a clean grotesque body face, grounded in a golden-amber primary, burnt terracotta accents, and warm neutral surfaces. The dark theme reads as a deep espresso-brown gallery wall, keeping the same brand warmth.

Use this kitCustomize in StudioDownload DESIGN.md
editorial
warm
terracotta
architecture
amber
luxury
earthy

surfhouseeditorial.com

SurfHouse

The Surf House

A hidden jewel where polished bohemian warmth meets the edge of the coast.

Explore the projectTokens

surfhouseeditorial.com

SurfHouse

The Surf House

A hidden jewel where polished bohemian warmth meets the edge of the coast.

Explore the projectTokens

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: "#FDF6EC"
    foreground: "#241A12"
    card: "#FFFBF4"
    card-foreground: "#241A12"
    popover: "#FFFBF4"
    popover-foreground: "#241A12"
    primary: "#C97A1D"
    primary-foreground: "#000000"
    secondary: "#EFE1D2"
    secondary-foreground: "#4A3826"
    muted: "#F1E6D8"
    muted-foreground: "#6F5E4C"
    accent: "#9B361B"
    accent-foreground: "#FDF1EA"
    destructive: "#BA1A1A"
    destructive-foreground: "#FFFFFF"
    border: "#E4D3BF"
    input: "#E4D3BF"
    ring: "#C97A1D"
    success: "#4F6A32"
    success-foreground: "#F6FAE9"
    warning: "#DB8C34"
    warning-foreground: "#2C1600"
    chart-1: "#C97A1D"
    chart-2: "#9B361B"
    chart-3: "#DB8C34"
    chart-4: "#57633A"
    chart-5: "#273D52"
typography:
  heading: { family: "Playfair Display", 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: "relaxed"
  base: "1rem"
  container: "1200px"
radius:
  sm: "0.125rem"
  md: "0.25rem"
  lg: "0.5rem"
  xl: "0.875rem"
components:
  button: { radius: "0.25rem", shape: "rounded", fill: "solid" }
  card: { radius: "0.875rem" }
  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=Playfair%20Display:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains%20Mono:wght@400;500;700&display=swap");

:root {
  --radius: 0.5rem;
  --font-heading: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 35 81% 96%;
  --foreground: 27 33% 11%;
  --card: 38 100% 98%;
  --card-foreground: 27 33% 11%;
  --popover: 38 100% 98%;
  --popover-foreground: 27 33% 11%;
  --primary: 32 75% 45%;
  --primary-foreground: 0 0% 0%;
  --secondary: 31 48% 88%;
  --secondary-foreground: 30 32% 22%;
  --muted: 34 47% 90%;
  --muted-foreground: 31 19% 37%;
  --accent: 13 70% 36%;
  --accent-foreground: 22 83% 95%;
  --destructive: 0 75% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 32 41% 82%;
  --input: 32 41% 82%;
  --ring: 32 75% 45%;
  --success: 89 36% 31%;
  --success-foreground: 74 63% 95%;
  --warning: 32 70% 53%;
  --warning-foreground: 30 100% 9%;
  --chart-1: 32 75% 45%;
  --chart-2: 13 70% 36%;
  --chart-3: 32 70% 53%;
  --chart-4: 78 26% 31%;
  --chart-5: 209 36% 24%;
  --shadow-sm: 0 1px 2px rgba(60,40,20,0.06);
  --shadow-md: 0 4px 12px rgba(60,40,20,0.08);
  --shadow-lg: 0 12px 28px rgba(60,40,20,0.10);
  --shadow-xl: 0 24px 48px rgba(60,40,20,0.14);
  --gradient-hero: linear-gradient(135deg,#e6a24f 0%,#c97a1d 55%,#9b361b 100%);
  --gradient-brand: linear-gradient(120deg,#db8c34 0%,#9b361b 100%);
  --gradient-subtle: linear-gradient(180deg,#fdf6ec 0%,#f1e6d8 100%);
  --duration: 200ms;
  --duration-slow: 450ms;
  --ease: cubic-bezier(0.22,1,0.36,1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 600;
  --font-weight-body: 400;
  --button-radius: 0.25rem;
  --card-radius: 0.875rem;
  --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/surf-house-editorial.json

Tailwind v4

@theme inline {
  --font-heading: 'Playfair Display', 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.5rem;
  --radius-xl: 0.875rem;
  --radius-button: 0.25rem;
  --radius-card: 0.875rem;
  --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 2px rgba(60,40,20,0.06);
  --shadow-md: 0 4px 12px rgba(60,40,20,0.08);
  --shadow-lg: 0 12px 28px rgba(60,40,20,0.10);
  --shadow-xl: 0 24px 48px rgba(60,40,20,0.14);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --ease-kit: cubic-bezier(0.22,1,0.36,1);
  --duration-kit: 200ms;
  --duration-kit-slow: 450ms;
  --gradient-hero: linear-gradient(135deg,#e6a24f 0%,#c97a1d 55%,#9b361b 100%);
  --gradient-brand: linear-gradient(120deg,#db8c34 0%,#9b361b 100%);
  --gradient-subtle: linear-gradient(180deg,#fdf6ec 0%,#f1e6d8 100%);
  --font-weight-heading: 600;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "surf-house-editorial",
  "type": "registry:theme",
  "title": "Surf House Editorial",
  "description": "A warm, editorial design kit inspired by sun-baked terracotta, amber, and rich wood tones from coastal modernist architecture.",
  "categories": [
    "editorial",
    "warm",
    "terracotta",
    "architecture",
    "amber",
    "luxury",
    "earthy"
  ],
  "cssVars": {