Next.js / Remix / Astro
Files Archival
Built around the aesthetic of an unindexed archive, this kit operates across three distinct surface zones rather than a single neutral canvas: near-black charcoal for nav and footer, off-white cream for document content areas, and vivid electric blue as a full-width section fill. Documents are sharp-edged, physically layered, and annotated with Space Mono metadata stamps. Typography is anchored by Playfair Display italic for editorial headings, capturing the handwritten-catalogue character of the source, with DM Sans for UI chrome and Space Mono for all reference and metadata text.
editorial
archival
dark
serif
monospace
document-collage
high-contrast
electric-blue
cultural
multi-surface
filesarchival.com
files
Fragment 17B
Filed without origin. Referenced frequently, yet seldom cited in full.
Explore CollectionTokens
filesarchival.com
files
Fragment 17B
Filed without origin. Referenced frequently, yet seldom cited in full.
Explore CollectionTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#FAF6F3"
foreground: "#191919"
card: "#F0ECE8"
card-foreground: "#191919"
popover: "#FAF6F3"
popover-foreground: "#191919"
primary: "#1E4BD8"
primary-foreground: "#FFFFFF"
secondary: "#E29AA5"
secondary-foreground: "#191919"
muted: "#E4DDD7"
muted-foreground: "#6B5F5A"
accent: "#F5DB7B"
accent-foreground: "#191919"
destructive: "#C9362A"
destructive-foreground: "#FFFFFF"
border: "#D8D1CB"
input: "#E8E3DE"
ring: "#1E4BD8"
success: "#2D7A4F"
success-foreground: "#FFFFFF"
warning: "#D4921A"
warning-foreground: "#191919"
chart-1: "#1E4BD8"
chart-2: "#E29AA5"
chart-3: "#F5DB7B"
chart-4: "#C9362A"
chart-5: "#9F6A72"
palette:
- { name: "charcoal", hex: "#191919", role: "surface-dark" }
- { name: "pure-black", hex: "#000000", role: "surface-dark" }
- { name: "cream", hex: "#faf6f3", role: "surface-light" }
- { name: "electric-blue", hex: "#1e4bd8", role: "brand-surface" }
- { name: "blush-pink", hex: "#e29aa5", role: "surface-accent" }
- { name: "parchment-light", hex: "#f7f3f2", role: "surface-light" }
- { name: "bright-blue-vibrant", hex: "#1c4cdc", role: "brand" }
- { name: "deep-navy", hex: "#1a3272", role: "brand-dark" }
- { name: "yellow-amber", hex: "#f5db7b", role: "accent" }
- { name: "mauve", hex: "#9f6a72", role: "muted" }
- { name: "dark-navy", hex: "#1b213f", role: "brand-dark" }
- { name: "parchment-muted", hex: "#d2bdb6", role: "muted" }
- { name: "scored-rose", hex: "#e49aa1", role: "accent" }
- { name: "scored-blue", hex: "#1f4fe5", role: "brand" }
- { name: "scored-dark", hex: "#0e1919", role: "surface-dark" }
- { name: "scored-warm-neutral", hex: "#cbc7ba", role: "muted" }
- { name: "archive-red", hex: "#c9362a", role: "destructive" }
- { name: "success-green", hex: "#2d7a4f", role: "success" }
- { name: "warning-amber", hex: "#d4921a", role: "warning" }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=DM%20Sans:wght@400;500;700&family=Space%20Mono:wght@400;700&display=swap");
:root {
--radius: 0.25rem;
--font-heading: 'Playfair Display', serif;
--font-sans: 'DM Sans', sans-serif;
--font-mono: 'Space Mono', monospace;
--background: 26 41% 97%;
--foreground: 0 0% 10%;
--card: 30 21% 93%;
--card-foreground: 0 0% 10%;
--popover: 26 41% 97%;
--popover-foreground: 0 0% 10%;
--primary: 225 76% 48%;
--primary-foreground: 0 0% 100%;
--secondary: 351 55% 75%;
--secondary-foreground: 0 0% 10%;
--muted: 28 19% 87%;
--muted-foreground: 18 9% 39%;
--accent: 47 86% 72%;
--accent-foreground: 0 0% 10%;
--destructive: 5 65% 48%;
--destructive-foreground: 0 0% 100%;
--border: 28 14% 82%;
--input: 30 18% 89%;
--ring: 225 76% 48%;
--success: 146 46% 33%;
--success-foreground: 0 0% 100%;
--warning: 39 78% 47%;
--warning-foreground: 0 0% 10%;
--chart-1: 225 76% 48%;
--chart-2: 351 55% 75%;
--chart-3: 47 86% 72%;
--chart-4: 5 65% 48%;
--chart-5: 351 22% 52%;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 2px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 4px 12px rgba(0,0,0,0.14);
--shadow-xl: 0 8px 24px rgba(0,0,0,0.18);
--gradient-hero: linear-gradient(180deg, #191919 50%, #1e4bd8 50%);
--gradient-brand: linear-gradient(135deg, #1e4bd8 0%, #1a3272 100%);
--gradient-subtle: linear-gradient(180deg, #faf6f3 0%, #f0ece8 100%);
--duration: 200ms;
--duration-slow: 420ms;
--ease: cubic-bezier(0.25, 0.1, 0.25, 1.0);
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--font-weight-heading: 700;
--font-weight-body: 400;
--button-radius: 0.125rem;
--card-radius: 0rem;
--input-radius: 0.125rem;
--badge-radius: 0.125rem;
--border-width: 1px;
--card-border-width: 1px;
--input-border-width: 1px;
--button-border-width: 0;
--badge-border-width: 1px;
--heading-transform: none;Install Targets
Registry
/r/files-archival.jsonTailwind v4
@theme inline {
--font-heading: 'Playfair Display', serif;
--font-sans: 'DM Sans', 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: 0rem;
--radius-input: 0.125rem;
--radius-badge: 0.125rem;
--border-width: 1px;
--card-border-width: 1px;
--input-border-width: 1px;
--button-border-width: 0;
--badge-border-width: 1px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 2px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 4px 12px rgba(0,0,0,0.14);
--shadow-xl: 0 8px 24px rgba(0,0,0,0.18);
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--ease-kit: cubic-bezier(0.25, 0.1, 0.25, 1.0);
--duration-kit: 200ms;
--duration-kit-slow: 420ms;
--gradient-hero: linear-gradient(180deg, #191919 50%, #1e4bd8 50%);
--gradient-brand: linear-gradient(135deg, #1e4bd8 0%, #1a3272 100%);
--gradient-subtle: linear-gradient(180deg, #faf6f3 0%, #f0ece8 100%);
--font-weight-heading: 700;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "files-archival",
"type": "registry:theme",
"title": "Files Archival",
"description": "An archival editorial system where near-black charcoal header and footer shells bracket a vivid electric-blue section surface on which cream and blush paper documents layer in an overlapping collage.",
"categories": [
"editorial",
"archival",
"dark",
"serif",
"monospace",
"document-collage",
"high-contrast",
"electric-blue",
"cultural",