Identity Forge
Next.js / Astro / SvelteKit

Archival Blue

Derived from a cultural institution event poster (Archives/KMC × National Institute of Design), this kit pairs a dreamy radial blue aura with precision Barlow Condensed display type in ALL CAPS. The near-white cool grey surface and deep navy ink create archival clarity; a soft cornflower-to-periwinkle atmospheric bloom in hero sections adds warmth without saturating the ground. Vertical rotated text labels, hairline rules, and stacked date metadata complete the editorial register. Suited for museums, cultural programmes, academic publishing, and arts institutions that need institutional gravitas with contemporary poster sensibility.

Use this kitCustomize in StudioDownload DESIGN.md
editorial
institutional
condensed
atmospheric
blue
poster
archival
cultural
navy
gradient-aura

archivalblue.com

archival-blue

E.A.T. ARCHIVES AT NID: A CHANCE OPERATION

Ranjit Menon in conversation with Kristian Ekholm — Friday, 30 July · 7:30 PM IST

Register in AdvanceTokens

archivalblue.com

archival-blue

E.A.T. ARCHIVES AT NID: A CHANCE OPERATION

Ranjit Menon in conversation with Kristian Ekholm — Friday, 30 July · 7:30 PM IST

Register in AdvanceTokens

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: "#EAEAEA"
    foreground: "#1A2660"
    card: "#F2F3F5"
    card-foreground: "#1A2660"
    popover: "#F5F6F8"
    popover-foreground: "#1A2660"
    primary: "#3D5491"
    primary-foreground: "#FFFFFF"
    secondary: "#D3DFE5"
    secondary-foreground: "#1A2660"
    muted: "#DEE1EA"
    muted-foreground: "#4E5E82"
    accent: "#DCE7F2"
    accent-foreground: "#1A2660"
    destructive: "#B91C1C"
    destructive-foreground: "#FFFFFF"
    border: "#C4CAD6"
    input: "#D8DCE6"
    ring: "#6285B5"
    success: "#15803D"
    success-foreground: "#FFFFFF"
    warning: "#B45309"
    warning-foreground: "#FFFFFF"
    chart-1: "#3D5491"
    chart-2: "#6285B5"
    chart-3: "#649DC4"
    chart-4: "#ACBCEC"
    chart-5: "#384D8D"
  palette:
    - { name: "canvas", hex: "#eaeaea", role: "background" }
    - { name: "paper-cool-a", hex: "#e8e9e9", role: "background-alt" }
    - { name: "paper-cool-b", hex: "#e4e5e6", role: "background-alt" }
    - { name: "paper-warm", hex: "#e9e7e8", role: "background-alt" }
    - { name: "fog", hex: "#d3dfe5", role: "muted-surface" }
    - { name: "haze", hex: "#dbdde3", role: "muted-surface" }
    - { name: "ice", hex: "#dce7f2", role: "accent-surface" }
    - { name: "sky-mist", hex: "#a2b6cf", role: "accent-light" }
    - { name: "periwinkle", hex: "#acbcec", role: "accent" }
    - { name: "cornflower", hex: "#6285b5", role: "primary-visual" }
    - { name: "cornflower-mid", hex: "#6685b5", role: "primary-visual-alt" }
    - { name: "slate-blue", hex: "#7790ba", role: "muted-accent" }
    - { name: "cerulean", hex: "#649dc4", role: "secondary-accent" }
    - { name: "indigo", hex: "#384d8d", role: "dark-vibrant" }
    - { name: "navy-medium", hex: "#3d5491", role: "primary-interactive" }
    - { name: "dark-navy", hex: "#3b4a7f", role: "dark-muted" }
    - { name: "ink", hex: "#1a2660", role: "foreground" }
    - { name: "shadow-blue", hex: "#131824", role: "dark-background" }
    - { name: "night", hex: "#1a2235", role: "dark-card" }

shadcn CSS Variables

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

:root {
  --radius: 0.375rem;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --background: 0 0% 92%;
  --foreground: 230 57% 24%;
  --card: 220 13% 95%;
  --card-foreground: 230 57% 24%;
  --popover: 220 18% 97%;
  --popover-foreground: 230 57% 24%;
  --primary: 224 41% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 200 26% 86%;
  --secondary-foreground: 230 57% 24%;
  --muted: 225 22% 89%;
  --muted-foreground: 222 25% 41%;
  --accent: 210 46% 91%;
  --accent-foreground: 230 57% 24%;
  --destructive: 0 74% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 18% 80%;
  --input: 223 22% 87%;
  --ring: 215 36% 55%;
  --success: 142 72% 29%;
  --success-foreground: 0 0% 100%;
  --warning: 26 90% 37%;
  --warning-foreground: 0 0% 100%;
  --chart-1: 224 41% 40%;
  --chart-2: 215 36% 55%;
  --chart-3: 204 45% 58%;
  --chart-4: 225 63% 80%;
  --chart-5: 225 43% 39%;
  --shadow-sm: 0 1px 2px rgba(26,38,96,0.07);
  --shadow-md: 0 2px 8px rgba(26,38,96,0.09);
  --shadow-lg: 0 4px 16px rgba(26,38,96,0.11);
  --shadow-xl: 0 8px 32px rgba(26,38,96,0.14);
  --gradient-hero: radial-gradient(ellipse 65% 75% at 18% 18%, #6285b5 0%, #acbcec 50%, #eaeaea 100%);
  --gradient-brand: linear-gradient(135deg, #3d5491 0%, #649dc4 100%);
  --gradient-subtle: linear-gradient(180deg, #eaeaea 0%, #d3dfe5 100%);
  --duration: 200ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --font-weight-heading: 800;
  --font-weight-body: 400;
  --button-radius: 0.25rem;
  --card-radius: 0.25rem;
  --input-radius: 0.25rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: uppercase;

Install Targets

Registry

/r/archival-blue.json

Tailwind v4

@theme inline {
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-sans: 'DM Sans', 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: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --radius-button: 0.25rem;
  --radius-card: 0.25rem;
  --radius-input: 0.25rem;
  --radius-badge: 9999px;
  --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(26,38,96,0.07);
  --shadow-md: 0 2px 8px rgba(26,38,96,0.09);
  --shadow-lg: 0 4px 16px rgba(26,38,96,0.11);
  --shadow-xl: 0 8px 32px rgba(26,38,96,0.14);
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --ease-kit: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-kit: 200ms;
  --duration-kit-slow: 400ms;
  --gradient-hero: radial-gradient(ellipse 65% 75% at 18% 18%, #6285b5 0%, #acbcec 50%, #eaeaea 100%);
  --gradient-brand: linear-gradient(135deg, #3d5491 0%, #649dc4 100%);
  --gradient-subtle: linear-gradient(180deg, #eaeaea 0%, #d3dfe5 100%);
  --font-weight-heading: 800;
  --font-weight-body: 400;
}

Registry payload

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "archival-blue",
  "type": "registry:theme",
  "title": "Archival Blue",
  "description": "Institutional editorial design system with soft atmospheric blue gradient bloom, condensed uppercase display typography, and deep navy ink on near-white cool grey ground.",
  "categories": [
    "editorial",
    "institutional",
    "condensed",
    "atmospheric",
    "blue",
    "poster",
    "archival",
    "cultural",
    "navy",