Hardik
2de883c70f
Captures the live PPMS visual language (tokens from globals.css + components/ui/* + lib/utils.ts) so new screens can be prototyped with the same look and feel. - Wireframe/design-system.html: single-page living style guide (color ramps, typography, radius/shadow/spacing, icons, app shell, buttons, badges, PO status badges, cards/KPIs, forms, tabs, tables, alerts/dialog, charts, formatting conventions, do/don't). - Wireframe/ds-bundle/: per-component @dsCard preview cards (Foundations / Layout / Components) used to sync the design system to the claude.ai Design System project. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
48 lines
3.6 KiB
HTML
48 lines
3.6 KiB
HTML
<!-- @dsCard group="Layout" name="App shell" subtitle="w-60 sidebar + h-16 top bar + bg-neutral-50 main" width="780" height="380" -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>PPMS · App shell</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<script>tailwind.config={theme:{extend:{colors:{primary:{50:"#eff6ff",600:"#2563eb",700:"#1d4ed8"},neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",600:"#525252",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
|
|
<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
|
|
</head>
|
|
<body class="bg-neutral-50 p-6 text-neutral-900">
|
|
<h2 class="text-lg font-semibold">App shell</h2>
|
|
<p class="mt-1 max-w-2xl text-sm text-neutral-600">Fixed <b>w-60</b> white sidebar (<code>border-r</code>) + <b>h-16</b> top bar + scrollable <code>main</code> on <code>bg-neutral-50</code>, <b>p-6</b>. Active nav = <code>bg-primary-50 text-primary-700</code>; section eyebrow = <code>text-xs uppercase tracking-wider text-neutral-400</code>.</p>
|
|
<div class="mt-4 overflow-hidden rounded-lg border border-neutral-200">
|
|
<div class="flex h-72 bg-neutral-50">
|
|
<aside class="flex w-56 shrink-0 flex-col border-r border-neutral-200 bg-white">
|
|
<div class="flex h-14 items-center gap-2.5 border-b border-neutral-200 px-4">
|
|
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-600"><svg class="h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="22" x2="12" y2="8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><circle cx="12" cy="5" r="3"/></svg></div>
|
|
<span class="text-sm font-semibold">PPMS</span>
|
|
</div>
|
|
<nav class="flex-1 space-y-0.5 p-3 text-sm">
|
|
<a class="flex items-center gap-3 rounded-md bg-primary-50 px-3 py-2 font-medium text-primary-700"><span class="h-4 w-4 rounded" style="background:rgba(37,99,235,.2)"></span>Dashboard</a>
|
|
<a class="flex items-center gap-3 rounded-md px-3 py-2 font-medium text-neutral-600 hover:bg-neutral-100"><span class="h-4 w-4 rounded bg-neutral-300"></span>New PO</a>
|
|
<a class="flex items-center gap-3 rounded-md px-3 py-2 font-medium text-neutral-600 hover:bg-neutral-100"><span class="h-4 w-4 rounded bg-neutral-300"></span>Approvals</a>
|
|
<p class="px-3 pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-neutral-400">Administration</p>
|
|
<a class="flex items-center gap-3 rounded-md px-3 py-2 font-medium text-neutral-600 hover:bg-neutral-100"><span class="h-4 w-4 rounded bg-neutral-300"></span>Users</a>
|
|
</nav>
|
|
</aside>
|
|
<div class="flex flex-1 flex-col">
|
|
<div class="flex h-14 items-center justify-between border-b border-neutral-200 bg-white px-5">
|
|
<span class="text-sm font-medium text-neutral-500">Dashboard</span>
|
|
<span class="h-7 w-7 rounded-full bg-neutral-200"></span>
|
|
</div>
|
|
<div class="flex-1 space-y-3 overflow-hidden p-5">
|
|
<div class="h-4 w-40 rounded bg-neutral-200"></div>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="h-16 rounded-lg border border-neutral-200 bg-white"></div>
|
|
<div class="h-16 rounded-lg border border-neutral-200 bg-white"></div>
|
|
<div class="h-16 rounded-lg border border-neutral-200 bg-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|