export default function LocalAppDesignSystem() {
const colorTokens = [
{ name: 'Primary / Green 500', hex: '#22C55E', className: 'bg-green-500', textClass: 'text-white', usage: 'Primary buttons, active states, confirmations' },
{ name: 'Primary Hover / Green 600', hex: '#16A34A', className: 'bg-green-600', textClass: 'text-white', usage: 'Button hover, stronger emphasis' },
{ name: 'Deep Green 700', hex: '#15803D', className: 'bg-green-700', textClass: 'text-white', usage: 'Headings, important accents, dark green blocks' },
{ name: 'Mint 200', hex: '#BBF7D0', className: 'bg-green-200', textClass: 'text-slate-900', usage: 'Soft surfaces, success panels, chips' },
{ name: 'Lime 300', hex: '#BEF264', className: 'bg-lime-300', textClass: 'text-slate-900', usage: 'Secondary accent, progress, visual highlights' },
{ name: 'Page Base', hex: '#F8FAFC', className: 'bg-slate-50', textClass: 'text-slate-900', usage: 'Main page background' },
{ name: 'Card White', hex: '#FFFFFF', className: 'bg-white', textClass: 'text-slate-900', usage: 'Cards, modals, tables, panels' },
{ name: 'Border Grey', hex: '#E5E7EB', className: 'bg-slate-200', textClass: 'text-slate-900', usage: 'Borders, separators, dividers' },
{ name: 'Muted Text', hex: '#64748B', className: 'bg-slate-500', textClass: 'text-white', usage: 'Descriptions, helper text, secondary content' },
{ name: 'Body Text', hex: '#0F172A', className: 'bg-slate-900', textClass: 'text-white', usage: 'Main text and icons' },
];
const layoutPrimitives = [
{
title: 'Container',
classes: 'max-w-7xl mx-auto px-6 py-8 lg:px-8',
description: 'Use this as the main page wrapper so every app starts from the same width and breathing room.',
},
{
title: 'Stack',
classes: 'space-y-4 / space-y-6 / space-y-8',
description: 'Use vertical rhythm instead of random margins hacked on every child like a gremlin.',
},
{
title: 'Cluster',
classes: 'flex flex-wrap items-center gap-3',
description: 'For chips, action buttons, filters, and grouped controls that need to wrap cleanly.',
},
{
title: 'Grid',
classes: 'grid gap-6 md:grid-cols-2 xl:grid-cols-3',
description: 'Default card layout for dashboards, settings pages, and admin overviews.',
},
];
const pageTemplates = [
{
title: 'Dashboard Page',
summary: 'Hero/top bar, stat cards, chart or table area, activity list.',
preview: (
<div className="rounded-[2rem] border border-slate-200 bg-gradient-to-br from-white via-green-50 to-slate-100 p-4">
<div className="rounded-[1.5rem] border border-white/70 bg-white/90 p-4 shadow-sm">
<div className="flex items-center justify-between gap-3">
<div>
<div className="h-4 w-36 rounded-full bg-slate-900" />
<div className="mt-2 h-3 w-56 rounded-full bg-slate-300" />
</div>
<div className="h-10 w-28 rounded-2xl bg-green-500" />
</div>
<div className="mt-4 grid gap-3 md:grid-cols-3">
{[1, 2, 3].map((item) => (
<div key={item} className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm">
<div className="h-3 w-20 rounded-full bg-slate-300" />
<div className="mt-3 h-6 w-16 rounded-full bg-slate-900" />
</div>
))}
</div>
<div className="mt-4 grid gap-3 md:grid-cols-[1.2fr_0.8fr]">
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm">
<div className="h-3 w-32 rounded-full bg-green-500" />
<div className="mt-4 h-28 rounded-2xl bg-gradient-to-r from-white via-green-50 to-lime-100" />
</div>
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm">
<div className="h-3 w-24 rounded-full bg-lime-300" />
<div className="mt-3 space-y-2">
<div className="h-10 rounded-2xl bg-slate-100" />
<div className="h-10 rounded-2xl bg-slate-100" />
<div className="h-10 rounded-2xl bg-slate-100" />
</div>
</div>
</div>
</div>
</div>
),
},
{
title: 'Admin CRUD Page',
summary: 'Top bar, filters/search, table/list, secondary side panel for quick actions.',
preview: (
<div className="rounded-[2rem] border border-slate-200 bg-white p-4 shadow-sm">
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="h-4 w-32 rounded-full bg-slate-900" />
<div className="flex gap-2">
<div className="h-10 w-36 rounded-2xl border border-slate-200 bg-white" />
<div className="h-10 w-24 rounded-2xl bg-green-500" />
</div>
</div>
<div className="mt-4 grid gap-4 xl:grid-cols-[1fr_280px]">
<div className="overflow-hidden rounded-3xl border border-slate-200 bg-white">
<div className="grid grid-cols-3 bg-slate-50 px-4 py-3 text-xs font-semibold text-slate-500">
<div>Name</div>
<div>Status</div>
<div>Owner</div>
</div>
{[1, 2, 3].map((row) => (
<div key={row} className="grid grid-cols-3 border-t border-slate-100 px-4 py-3 text-sm">
<div className="font-medium text-slate-900">Record {row}</div>
<div><span className="rounded-full bg-green-100 px-2.5 py-1 text-xs font-medium text-green-700">Active</span></div>
<div className="text-slate-600">Clive</div>
</div>
))}
</div>
<div className="rounded-3xl border border-slate-200 bg-slate-50 p-4">
<div className="h-3 w-24 rounded-full bg-slate-900" />
<div className="mt-3 h-10 rounded-2xl bg-white" />
<div className="mt-2 h-10 rounded-2xl bg-white" />
<div className="mt-4 h-10 rounded-2xl bg-green-500" />
</div>
</div>
</div>
),
},
{
title: 'Auth Page',
summary: 'Centred card, clear branding, minimal noise, one obvious primary action.',
preview: (
<div className="rounded-[2rem] bg-gradient-to-br from-white via-green-50 to-slate-100 p-6">
<div className="mx-auto max-w-md rounded-[2rem] border border-slate-200 bg-white p-6 shadow-xl">
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-[1.25rem] bg-gradient-to-br from-green-500 to-lime-400 text-2xl font-black text-white">A</div>
<div className="mt-4 h-4 w-36 rounded-full bg-slate-900 mx-auto" />
<div className="mt-2 h-3 w-56 rounded-full bg-slate-300 mx-auto" />
<div className="mt-6 space-y-3">
<div className="h-11 rounded-2xl border border-slate-200 bg-white" />
<div className="h-11 rounded-2xl border border-slate-200 bg-white" />
<div className="h-11 rounded-2xl bg-green-500" />
</div>
</div>
</div>
),
},
];
const dosAndDonts = [
{
title: 'Do',
items: [
'Use green for the main action on the page.',
'Keep cards consistent: rounded-3xl, white background, soft border, soft shadow.',
'Use visible labels on forms. Placeholder-only fields are not clever; they are annoying.',
'Prefer generous spacing and simple hierarchy over squeezing in more junk.',
],
panelClass: 'border-green-200 bg-green-50',
badgeClass: 'bg-green-500 text-white',
},
{
title: 'Don’t',
items: [
'Do not invent random accent colours per page.',
'Do not mix five different button radii like the app was built during an earthquake.',
'Do not use default browser focus rings when custom green focus states exist.',
'Do not make destructive actions look identical to safe actions.',
],
panelClass: 'border-red-200 bg-red-50',
badgeClass: 'bg-red-500 text-white',
},
];
const sections = [
{
title: 'Page Layout',
description: 'Use a soft gradient page background, a strong page header, and content grouped into rounded white cards with generous spacing.',
code: ['Background: from-white via-green-50 to-slate-100', 'Wrapper: max-w-7xl mx-auto px-6 py-8', 'Cards: rounded-3xl bg-white border border-slate-200 shadow-sm'],
preview: (
<div className="rounded-[2rem] border border-slate-200 bg-gradient-to-br from-white via-green-50 to-slate-100 p-4">
<div className="rounded-[1.5rem] border border-white/70 bg-white/90 p-5 shadow-sm">
<div className="h-4 w-40 rounded-full bg-slate-900" />
<div className="mt-2 h-3 w-64 rounded-full bg-slate-300" />
<div className="mt-5 grid gap-3 md:grid-cols-2">
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm">
<div className="h-3 w-28 rounded-full bg-green-500" />
<div className="mt-3 h-3 w-full rounded-full bg-slate-200" />
<div className="mt-2 h-3 w-3/4 rounded-full bg-slate-200" />
</div>
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm">
<div className="h-3 w-24 rounded-full bg-lime-300" />
<div className="mt-3 h-3 w-full rounded-full bg-slate-200" />
<div className="mt-2 h-3 w-2/3 rounded-full bg-slate-200" />
</div>
</div>
</div>
</div>
),
},
{
title: 'Side Navigation',
description: 'Left navigation should be a clean vertical rail with a logo tile, product name, nav groups, and active item highlighting.',
code: ['Container: rounded-3xl bg-white border border-slate-200', 'Active item: bg-green-50 text-green-700 border border-green-200', 'Icons/logo: rounded-2xl gradient tile'],
preview: (
<div className="max-w-sm rounded-[2rem] border border-slate-200 bg-white p-4 shadow-sm">
<div className="mb-4 flex items-center gap-3">
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-green-500 to-lime-400 text-lg font-black text-white">M</div>
<div>
<div className="font-bold text-slate-900">My App</div>
<div className="text-sm text-slate-500">Shared system style</div>
</div>
</div>
<div className="space-y-2 text-sm font-medium">
<div className="rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-green-700">Dashboard</div>
<div className="rounded-2xl px-4 py-3 text-slate-600 hover:bg-slate-50">Projects</div>
<div className="rounded-2xl px-4 py-3 text-slate-600 hover:bg-slate-50">Tasks</div>
<div className="rounded-2xl px-4 py-3 text-slate-600 hover:bg-slate-50">Settings</div>
</div>
</div>
),
},
{
title: 'Top Bar',
description: 'Use a rounded top bar for page title, search, quick actions, and profile access. Keep it airy and bright.',
code: ['Bar: rounded-3xl bg-white/85 backdrop-blur border border-white/60', 'Search: rounded-2xl border border-slate-200', 'Actions: green primary button + subtle secondary'],
preview: (
<div className="rounded-[2rem] border border-white/60 bg-white/85 p-4 shadow-sm backdrop-blur">
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<div className="text-xl font-bold text-slate-900">Dashboard</div>
<div className="text-sm text-slate-500">Overview of the current workspace</div>
</div>
<div className="flex flex-wrap gap-3">
<div className="rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-400">Search…</div>
<button className="rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700">Filter</button>
<button className="rounded-2xl bg-green-500 px-4 py-3 text-sm font-semibold text-white">+ Add New</button>
</div>
</div>
</div>
),
},
{
title: 'Buttons',
description: 'Buttons should feel bold and obvious. Define hover, focus, disabled, and loading states so they behave like proper grown-up components.',
code: [
'Primary: bg-green-500 hover:bg-green-600 text-white',
'Secondary: bg-white border border-slate-300 text-slate-700',
'Focus: focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-green-200',
'Disabled: opacity-50 cursor-not-allowed',
],
preview: (
<div className="flex flex-wrap gap-3">
<button className="rounded-2xl bg-green-500 px-5 py-3 text-sm font-semibold text-white shadow-sm">Primary</button>
<button className="rounded-2xl border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-700">Secondary</button>
<button className="rounded-2xl bg-lime-300 px-5 py-3 text-sm font-semibold text-slate-900">Accent</button>
<button className="rounded-2xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white">Dark</button>
<button className="rounded-2xl bg-green-600 px-5 py-3 text-sm font-semibold text-white">Hover</button>
<button className="rounded-2xl border-4 border-green-200 bg-green-500 px-5 py-3 text-sm font-semibold text-white">Focus</button>
<button className="cursor-not-allowed rounded-2xl bg-green-500 px-5 py-3 text-sm font-semibold text-white opacity-50">Disabled</button>
<button className="rounded-2xl bg-green-500 px-5 py-3 text-sm font-semibold text-white"><span className="opacity-80">Saving…</span></button>
</div>
),
},
{
title: 'Chips',
description: 'Chips should be pill-shaped, compact, and easy to scan. Use them for filters, tags, states, and selections.',
code: ['Base: rounded-full px-3 py-1.5 text-sm font-medium', 'Selected: bg-green-100 text-green-700', 'Neutral: bg-slate-100 text-slate-700'],
preview: (
<div className="flex flex-wrap gap-3">
<span className="rounded-full bg-green-100 px-3 py-1.5 text-sm font-medium text-green-700">Selected</span>
<span className="rounded-full bg-slate-100 px-3 py-1.5 text-sm font-medium text-slate-700">Neutral</span>
<span className="rounded-full bg-lime-100 px-3 py-1.5 text-sm font-medium text-lime-700">Healthy</span>
<span className="rounded-full bg-red-100 px-3 py-1.5 text-sm font-medium text-red-700">Warning</span>
</div>
),
},
{
title: 'Lists',
description: 'Lists should use card-like rows with clear spacing, optional status chips, and hover states. Keep them readable and tidy.',
code: ['Rows: rounded-2xl border border-slate-200 bg-white', 'Spacing: px-4 py-4', 'Hover: hover:border-green-200 hover:bg-green-50/40'],
preview: (
<div className="space-y-3">
{[1, 2, 3].map((item) => (
<div key={item} className="flex items-center justify-between rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm">
<div>
<div className="font-semibold text-slate-900">List item {item}</div>
<div className="text-sm text-slate-500">Secondary supporting detail goes here</div>
</div>
<span className="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">Active</span>
</div>
))}
</div>
),
},
{
title: 'Form Inputs',
description: 'Inputs should be rounded, soft, and clear. Labels always visible. Focus, help, and error states should be part of the system, not an afterthought.',
code: ['Input: rounded-2xl border border-slate-200 px-4 py-3', 'Focus: focus:border-green-400 focus:ring-4 focus:ring-green-100', 'Error: border-red-300 bg-red-50/40 text-red-900'],
preview: (
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<label className="text-sm font-medium text-slate-700">Name</label>
<input className="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm" placeholder="Enter name" />
<div className="text-xs text-slate-500">Helper text for guidance</div>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-700">Type</label>
<select className="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm">
<option>Project</option>
<option>Task</option>
</select>
</div>
<div className="space-y-2 md:col-span-2">
<label className="text-sm font-medium text-slate-700">Description</label>
<textarea className="min-h-[100px] w-full rounded-2xl border border-red-300 bg-red-50/40 px-4 py-3 text-sm" placeholder="Write details here" />
<div className="text-xs text-red-600">Example validation state</div>
</div>
</div>
),
},
{
title: 'Tables',
description: 'Tables should sit in rounded containers with soft headers, plenty of padding, and status chips where useful.',
code: ['Wrapper: overflow-hidden rounded-3xl border border-slate-200 bg-white', 'Header: bg-slate-50 text-slate-600', 'Rows: border-t border-slate-100'],
preview: (
<div className="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
<table className="min-w-full text-left text-sm">
<thead className="bg-slate-50 text-slate-600">
<tr>
<th className="px-4 py-3 font-semibold">Name</th>
<th className="px-4 py-3 font-semibold">Status</th>
<th className="px-4 py-3 font-semibold">Owner</th>
</tr>
</thead>
<tbody>
<tr className="border-t border-slate-100">
<td className="px-4 py-3 font-medium text-slate-900">MyMealMap</td>
<td className="px-4 py-3"><span className="rounded-full bg-green-100 px-2.5 py-1 text-xs font-medium text-green-700">Live</span></td>
<td className="px-4 py-3 text-slate-600">Clive</td>
</tr>
<tr className="border-t border-slate-100">
<td className="px-4 py-3 font-medium text-slate-900">Task Foundry</td>
<td className="px-4 py-3"><span className="rounded-full bg-lime-100 px-2.5 py-1 text-xs font-medium text-lime-700">Building</span></td>
<td className="px-4 py-3 text-slate-600">Clive</td>
</tr>
</tbody>
</table>
</div>
),
},
{
title: 'Cards',
description: 'Cards are the default content container. Use them everywhere. Consistent radius, border, and shadow keeps the whole app feeling joined up.',
code: ['Card: rounded-3xl bg-white border border-slate-200 shadow-sm', 'Padding: p-5 to p-8', 'Use title + muted support text'],
preview: (
<div className="grid gap-4 md:grid-cols-2">
<div className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
<div className="text-lg font-bold text-slate-900">Revenue Snapshot</div>
<div className="mt-1 text-sm text-slate-500">Performance against target this week</div>
<div className="mt-4 text-3xl font-black text-slate-950">£24,580</div>
</div>
<div className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
<div className="text-lg font-bold text-slate-900">Tasks Due</div>
<div className="mt-1 text-sm text-slate-500">Items needing attention soon</div>
<div className="mt-4 text-3xl font-black text-green-600">12</div>
</div>
</div>
),
},
{
title: 'Modals',
description: 'Modals should look like lifted cards over a soft dark overlay. Keep them wide enough to breathe and easy to close.',
code: ['Overlay: bg-slate-900/40 backdrop-blur-sm', 'Panel: rounded-[2rem] bg-white p-6', 'Actions: secondary left, primary right'],
preview: (
<div className="rounded-[2rem] bg-slate-900/10 p-4">
<div className="mx-auto max-w-md rounded-[2rem] border border-slate-200 bg-white p-6 shadow-xl">
<div className="text-lg font-bold text-slate-900">Create New Project</div>
<div className="mt-1 text-sm text-slate-500">Add a new item to your workspace.</div>
<div className="mt-4 space-y-3">
<div className="h-11 rounded-2xl border border-slate-200 bg-white" />
<div className="h-24 rounded-2xl border border-slate-200 bg-white" />
</div>
<div className="mt-5 flex justify-end gap-3">
<button className="rounded-2xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700">Cancel</button>
<button className="rounded-2xl bg-green-500 px-4 py-2.5 text-sm font-semibold text-white">Save Project</button>
</div>
</div>
</div>
),
},
{
title: 'Alerts',
description: 'Alerts should be obvious without screaming. Use soft fills, matching borders, and readable icon/text spacing.',
code: ['Success: bg-green-50 border-green-200 text-green-800', 'Warning: bg-amber-50 border-amber-200', 'Error: bg-red-50 border-red-200'],
preview: (
<div className="space-y-3">
<div className="rounded-2xl border border-green-200 bg-green-50 p-4 text-sm text-green-800">Success alert style</div>
<div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">Warning alert style</div>
<div className="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-800">Error alert style</div>
</div>
),
},
];
const logoLetters = ['M', 'T', 'W', 'G', 'P', 'K'];
return (
<div className="min-h-screen bg-gradient-to-br from-white via-green-50 to-slate-100 text-slate-900">
<div className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
<header className="mb-8 overflow-hidden rounded-[2rem] border border-white/60 bg-white/80 p-8 shadow-2xl shadow-green-100 backdrop-blur">
<div className="flex flex-col gap-8 xl:flex-row xl:items-center xl:justify-between">
<div className="max-w-4xl">
<div className="mb-4 inline-flex items-center gap-3 rounded-full border border-green-200 bg-green-50 px-4 py-2 text-sm font-medium text-green-700">
<span className="inline-block h-2.5 w-2.5 rounded-full bg-green-500" />
Shared Tailwind Website Design System
</div>
<h1 className="text-4xl font-black tracking-tight text-slate-950 md:text-6xl">
One visual system for all your local apps.
</h1>
<p className="mt-4 max-w-3xl text-lg leading-8 text-slate-600">
This is the actual reference system for your design language — colours, layout rules, page templates, interaction states, navigation, chips, lists, tables, forms, cards, modals, and the rest of the usual suspects. Built so AI stops inventing a whole new religion every time it touches a page.
</p>
</div>
<div className="rounded-[2rem] bg-gradient-to-br from-green-500 via-emerald-500 to-lime-400 p-5 text-white shadow-xl">
<div className="flex items-center gap-4">
<div className="flex h-20 w-20 items-center justify-center rounded-[1.5rem] bg-white/20 text-4xl font-black backdrop-blur">L</div>
<div>
<div className="text-sm uppercase tracking-[0.22em] text-white/80">Logo Rule</div>
<div className="mt-1 text-xl font-bold">First letter in a square</div>
<div className="text-sm text-white/85">Rounded tile, bold initial, green gradient</div>
</div>
</div>
</div>
</div>
</header>
<section className="mb-8 grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
<div className="rounded-[2rem] border border-white/60 bg-white/85 p-8 shadow-xl backdrop-blur">
<h2 className="text-2xl font-bold text-slate-950">Core Principles</h2>
<div className="mt-5 grid gap-4 md:grid-cols-2">
{[
'Bright green, white, and grey form the core palette.',
'Use soft gradients on page backgrounds and hero sections.',
'Cards are the default content wrapper across all apps.',
'Rounded corners should usually be 2xl or 3xl.',
'Spacing should be generous. Cramped UI can get in the bin.',
'Use consistent patterns for nav, lists, chips, forms, and tables.',
'Primary actions should nearly always be green.',
'Dark slate text keeps readability strong against bright surfaces.',
].map((rule) => (
<div key={rule} className="rounded-2xl border border-slate-100 bg-slate-50/70 p-4 text-sm leading-6 text-slate-700">
{rule}
</div>
))}
</div>
</div>
<div className="rounded-[2rem] border border-white/60 bg-white/85 p-8 shadow-xl backdrop-blur">
<h2 className="text-2xl font-bold text-slate-950">Logo Examples</h2>
<p className="mt-3 text-sm leading-6 text-slate-600">
Every website should use the first letter of its name inside a square logo tile.
</p>
<div className="mt-6 grid grid-cols-3 gap-4">
{logoLetters.map((letter) => (
<div key={letter} className="flex aspect-square items-center justify-center rounded-[1.5rem] bg-gradient-to-br from-green-500 to-lime-400 text-3xl font-black text-white shadow-lg">
{letter}
</div>
))}
</div>
<div className="mt-6 rounded-2xl border border-green-200 bg-green-50 p-4 text-sm text-green-800">
Standard: bold uppercase initial, centred, simple, repeatable, and easy for AI to generate without getting weird.
</div>
</div>
</section>
<section className="mb-8 rounded-[2rem] border border-white/60 bg-white/85 p-8 shadow-xl backdrop-blur">
<div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
<div>
<h2 className="text-2xl font-bold text-slate-950">Colour Tokens</h2>
<p className="mt-2 text-sm text-slate-600">Use these exact colours and purposes as the default house style.</p>
</div>
<div className="rounded-full bg-slate-100 px-4 py-2 text-sm font-medium text-slate-600">Greens + white + grey + gradients</div>
</div>
<div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
{colorTokens.map((token) => (
<div key={token.name} className="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
<div className={`flex h-24 items-end p-4 ${token.className} ${token.textClass}`}>
<div className="rounded-full bg-black/10 px-3 py-1 text-xs font-semibold backdrop-blur-sm">{token.hex}</div>
</div>
<div className="p-5">
<div className="text-base font-bold text-slate-900">{token.name}</div>
<div className="mt-1 text-sm text-slate-500">{token.usage}</div>
</div>
</div>
))}
</div>
</section>
<section className="mb-8 grid gap-6 lg:grid-cols-2">
<div className="rounded-[2rem] border border-white/60 bg-white/85 p-8 shadow-xl backdrop-blur">
<h2 className="text-2xl font-bold text-slate-950">Gradient Recipes</h2>
<div className="mt-5 space-y-4">
{[
{ title: 'Page Background', classes: 'from-white via-green-50 to-slate-100' },
{ title: 'Hero / Accent Area', classes: 'from-green-500 via-emerald-500 to-lime-400' },
{ title: 'Logo Tile', classes: 'from-green-500 to-lime-400' },
{ title: 'Soft Panel', classes: 'from-white to-green-50' },
].map((item) => (
<div key={item.title} className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm">
<div className="text-sm font-semibold text-slate-900">{item.title}</div>
<div className="mt-1 text-sm text-slate-500">{item.classes}</div>
<div className={`mt-4 h-16 rounded-2xl bg-gradient-to-r ${item.classes}`} />
</div>
))}
</div>
</div>
<div className="rounded-[2rem] border border-white/60 bg-white/85 p-8 shadow-xl backdrop-blur">
<h2 className="text-2xl font-bold text-slate-950">AI Build Rules</h2>
<div className="mt-5 space-y-3 text-sm leading-6 text-slate-700">
<div className="rounded-2xl bg-slate-50 p-4">Use Tailwind CSS only for styling.</div>
<div className="rounded-2xl bg-slate-50 p-4">Prefer white cards on a soft gradient background.</div>
<div className="rounded-2xl bg-slate-50 p-4">Buttons, chips, forms, tables, and nav should match the patterns on this page.</div>
<div className="rounded-2xl bg-slate-50 p-4">Use bold rounded square logos with the first letter of the app name.</div>
<div className="rounded-2xl bg-slate-50 p-4">Use dark slate for body text, muted grey for secondary text, and green for primary actions.</div>
<div className="rounded-2xl bg-slate-50 p-4">Keep layouts airy, clean, modular, and consistent across products.</div>
</div>
</div>
</section>
<section className="mb-8 rounded-[2rem] border border-white/60 bg-white/85 p-8 shadow-xl backdrop-blur">
<div className="mb-6">
<h2 className="text-2xl font-bold text-slate-950">Layout Primitives</h2>
<p className="mt-2 text-sm text-slate-600">These are the boring bits that quietly stop every page from drifting off into chaos.</p>
</div>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
{layoutPrimitives.map((item) => (
<div key={item.title} className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
<div className="text-base font-bold text-slate-900">{item.title}</div>
<div className="mt-3 rounded-2xl bg-slate-50 px-3 py-2 font-mono text-[13px] text-slate-700">{item.classes}</div>
<p className="mt-3 text-sm leading-6 text-slate-600">{item.description}</p>
</div>
))}
</div>
</section>
<section className="mb-8 rounded-[2rem] border border-white/60 bg-white/85 p-8 shadow-xl backdrop-blur">
<div className="mb-6">
<h2 className="text-2xl font-bold text-slate-950">Page Templates</h2>
<p className="mt-2 text-sm text-slate-600">Use these as standard starting points so every new app page is not a fresh episode of chaos engineering.</p>
</div>
<div className="space-y-6">
{pageTemplates.map((template) => (
<div key={template.title} className="grid gap-6 rounded-[2rem] border border-slate-200 bg-slate-50/70 p-6 xl:grid-cols-[0.9fr_1.1fr]">
<div>
<h3 className="text-2xl font-bold text-slate-950">{template.title}</h3>
<p className="mt-3 text-sm leading-7 text-slate-600">{template.summary}</p>
</div>
<div>
<div className="mb-3 text-sm font-bold uppercase tracking-[0.18em] text-slate-500">Preview</div>
<div className="rounded-3xl border border-slate-200 bg-white p-4">{template.preview}</div>
</div>
</div>
))}
</div>
</section>
<section className="mb-8 rounded-[2rem] border border-white/60 bg-white/85 p-8 shadow-xl backdrop-blur">
<div className="mb-6">
<h2 className="text-2xl font-bold text-slate-950">Do / Don’t</h2>
<p className="mt-2 text-sm text-slate-600">A few house rules so future builds stay tidy and don’t end up looking like five different freelancers had an argument.</p>
</div>
<div className="grid gap-6 lg:grid-cols-2">
{dosAndDonts.map((group) => (
<div key={group.title} className={`rounded-[2rem] border p-6 shadow-sm ${group.panelClass}`}>
<div className={`inline-flex rounded-full px-3 py-1 text-sm font-semibold ${group.badgeClass}`}>{group.title}</div>
<ul className="mt-4 space-y-3 text-sm leading-6 text-slate-700">
{group.items.map((item) => (
<li key={item} className="rounded-2xl bg-white/70 px-4 py-3">{item}</li>
))}
</ul>
</div>
))}
</div>
</section>
<section>
<div className="mb-6">
<h2 className="text-2xl font-bold text-slate-950">Component Rules & Examples</h2>
<p className="mt-2 text-sm text-slate-600">Each section explains what the pattern is, how it should look, and shows the style in use.</p>
</div>
<div className="space-y-6">
{sections.map((section) => (
<div key={section.title} className="grid gap-6 rounded-[2rem] border border-white/60 bg-white/85 p-6 shadow-xl backdrop-blur xl:grid-cols-[0.95fr_1.05fr]">
<div>
<h3 className="text-2xl font-bold text-slate-950">{section.title}</h3>
<p className="mt-3 text-sm leading-7 text-slate-600">{section.description}</p>
<div className="mt-5 rounded-3xl border border-slate-200 bg-slate-50 p-5">
<div className="mb-3 text-sm font-bold uppercase tracking-[0.18em] text-slate-500">Style Notes</div>
<ul className="space-y-2 text-sm leading-6 text-slate-700">
{section.code.map((line) => (
<li key={line} className="rounded-2xl bg-white px-3 py-2 font-mono text-[13px] text-slate-700 shadow-sm">
{line}
</li>
))}
</ul>
</div>
</div>
<div>
<div className="mb-3 text-sm font-bold uppercase tracking-[0.18em] text-slate-500">Preview</div>
<div className="rounded-3xl border border-slate-200 bg-slate-50/70 p-5">
{section.preview}
</div>
</div>
</div>
))}
</div>
</section>
</div>
</div>
);
}