Kitlog

Who it is for

• IT managers tracking hardware
• Office and operations managers
• Finance teams watching depreciation
• Growing startups formalizing inventory

Layout

1. Top bar: cube logo + wordmark left, 'Sign in →' right, on warm cream with a dot-grid texture
2. Centered hero: two-line headline (second line in grey), short subcopy, black pill CTA
3. Browser-framed dashboard mock: breadcrumb, four KPI cards (total assets, total value, depreciation, needs attention) and a condition breakdown bar list
4. Feature grid of four cards with black icon tiles and a big stat top-right
5. Four setup steps
6. Security section and footer
7. App: dashboard, assets list and detail, employees, assignments, AI chat, CSV import/export, settings (categories)

Palette

warm, orderly, understated, reliable, friendly. A tidy stockroom ledger on paper-toned stock.

• background cream#f5f3ed
• card#fcfcf9
• text/primary#0d0b09
• secondary surface#edebe7
• condition excellent green#0d9a6c
• condition fair amber#bb7808
• condition poor red#ef4444

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type

Display

Onest Regular 52px, -1.3px tracking; second line in warm grey

Body

Onest 16px body; KPI figures Onest semibold

One soft grotesk at regular weights feels friendly yet orderly; hierarchy comes from tone rather than weight.

Spacing and imagery

1100px container, 10px card radius, pill buttons, dot-grid background, 16-24px card padding, calm sections of about 120px.

No photos; black rounded-square icon tiles with white line icons; a dot-grid texture; horizontal condition bars; a depreciation line chart on the detail page.

Components

• Top bar with sign-in link
• Two-tone hero headline
• Browser-framed dashboard mock
• KPI cards with icons
• Condition breakdown bars
• Feature cards with stat callouts
• Assets data table with filters
• Asset detail with depreciation chart and assignment history
• Employee directory
• Assign/return dialog
• AI chat assistant panel
• CSV import/export
• Category settings with default useful life
• Role-based admin controls

Interactions

• Filter by category, condition and archived status; search by name or serial
• Create, edit and archive assets
• Assign to an employee with a date and note, and return with a history entry
• Depreciation recalculates from purchase date and useful life
• Ask the AI questions about assets and employees
• Bulk import CSV with validation; export all
• Email verification and password reset
• Collapsible sidebar on mobile

Data

• Asset{id, name, category_id, serial, purchase_date, purchase_cost, salvage_value, useful_life_months, condition excellent|good|fair|poor, notes, archived}
• Category{id, name, default_useful_life_months}
• Employee{id, name, email, department}
• Assignment{id, asset_id, employee_id, assigned_on, returned_on?, note}
• UserRole{user_id, role admin|moderator|user}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **Kitlog**, an internal tool that lets IT and operations teams keep an accurate record of company equipment. It covers what we own, who has it, what condition it's in and what it's worth today. It replaces a spreadsheet with a friendly app that includes straight-line depreciation, assignment history and a natural-language assistant.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Table, Dialog, Select, Sheet, Command) and lucide-react. Use TanStack Query and Table, react-hook-form + zod, Recharts for the book-value line and condition bars, date-fns and Papa Parse. Supabase provides Auth (email with verification and reset), Postgres for assets, categories, employees, assignments and roles, and an Edge Function for the AI assistant that turns a question into safe, parameterized reads over the caller's data.

### Pages & layout
1. **Landing**:
   - Cream background with a dot-grid texture; minimal top bar (logo, Sign in).
   - Centered two-tone headline (second line grey), subcopy and a black pill CTA.
   - A browser-framed dashboard preview, a four-card feature grid (black icon tiles, a big stat top-right), four setup steps, a security note and a footer.
2. **Dashboard**: KPI cards (total assets with assigned/unassigned split, total cost, accumulated depreciation, items needing attention), condition breakdown bars, recent assignments.
3. **Assets**: a table with search (name or serial), category, condition and archived filters, bulk import and export.
4. **Asset detail**: fields, a book-value chart over time, assignment history, and assign/return actions.
5. **Employees**: directory and per-person assets.
6. **Assistant**: a chat panel.
7. **Settings**: categories with a default useful life; user roles (admin only).

### Design system
- Tokens: `--background: #f5f3ed`, `--card: #fcfcf9`, `--foreground: #0d0b09`, `--primary: #0d0b09`, `--primary-foreground: #fcfcf9`, `--secondary: #edebe7`, `--border: #dad7d2` (decorative), `--input-border: #8f8677`, `--ring: #74716f`, `--muted-fg: #6b6660`.
- Condition colors: excellent `#0d9a6c`, good `#0d0b09`, fair `#bb7808`, poor `#ef4444`.
- Dot grid: `radial-gradient(#d9d5cc 1px, transparent 1px) 0 0/16px 16px`.
- Font: Onest (Google). Hero 48-52px regular at -0.025em, H2 40px, body 16px (line-height 1.5), dense tables 15px, KPI 24px semibold, nothing below 12px.
- Spacing on a 4px base; radius 10px on cards, full on pills; shadows minimal.
- Motion: 150ms.
- Light theme.

### Components & interactions
KpiCard, ConditionBars (with labels and percentages), AssetTable (sortable, sticky header, empty "No assets yet, import a CSV" state), AssetForm (category preset fills useful life; validation), AssignDialog (employee combobox; blocks double assignment), ReturnButton (confirm), BookValueChart, EmployeeList, CsvImport (preview, per-row errors, import summary), AssistantPanel (suggested questions, streaming answer, "can't answer" state, error), RoleBadge. Provide loading skeletons and toasts.

### Data & state
Tables: `assets`, `categories`, `employees`, `assignments` (at most one open assignment per asset, enforced by a partial unique index), and `user_roles(user_id, role)`. Depreciation is `(cost - salvage) / life_months` per month, capped at `cost - salvage`, computed in a SQL view and mirrored in a tested TS function. Seed about 50 fictional assets (generic models) and 20 invented employees.

### Accessibility
Black on cream is 17.7:1 and the grey second headline line uses `#6b6660` (5.1:1). Condition bars use deepened `#0d9a6c` and `#bb7808` for 3:1. Condition is shown with a text label as well as color. Tables use proper headers and row actions with accessible names. Dialogs trap focus. The chat log is a live region with labelled input. Keep visible focus rings using `--ring`.
Verified contrast: body: #0d0b09 on #f5f3ed = 17.7:1; grey line: #6b6660 on #f5f3ed = 5.1:1; button label: #fcfcf9 on #0d0b09 = 19.1:1.

### Security
RLS on every table: authenticated org members read; admins and moderators write; only admins manage roles and categories. Use a `has_role(uid, role)` security-definer function to avoid recursive policies. The AI Edge Function runs with the caller's JWT so RLS still applies, allows only whitelisted read queries (no raw SQL from the model), validates input with zod, rate-limits per user and keeps the model key server-side. CSV import checks MIME type, a 5 MB limit and the row schema; neutralize formula injection on export. Store only work contact data for employees.

### Performance & SEO
Paginate the assets table on the server, index `(category_id, condition, archived)` and serials, and lazy-load the assistant and charts. Landing page: meta and OG tags; noindex the app. Target Lighthouse 90+.

### Guardrails
- Write fresh copy; use generic equipment names with no brand logos.
- Don't let the assistant change data.
- Keep components small and typed; no `any`. Show errors visibly.
- Done when: (1) assets can be created, assigned, returned and archived with history; (2) depreciation matches hand calculations; (3) CSV round-trips without loss; (4) non-admins cannot edit roles or categories; (5) the assistant answers only from the caller's permitted data.

Open the builderAll templatesThis palette on its own