Transferable Feature Prompt
Living Design System

Paste this prompt into any Base44 app to build a self-auditing design system page with one-click PDF export — populated with that app's own brand tokens.
Developed from the LEDGID design system implementation · v1.0 · April 2026
Living design reference page
Branded PDF export (jsPDF)
UI inconsistency audit
Standardisation roadmap
# Base44 Prompt: Living Design System Feature

## What This Builds

A self-contained "Design System" feature for any Base44 app consisting of:

1. A living **Design System page** (/DesignSystem) — a browsable, in-app reference of the app's visual language: colours, typography, spacing, buttons, inputs, cards, motion rules, and design tokens.
2. A **PDF export backend function** — generates a fully branded, multi-page PDF of the entire design system at the click of a button, downloadable directly from the page.
3. A **UI inconsistency audit section** — documents the top issues found in the current app's UI with severity levels (High / Medium / Low).
4. A **standardisation roadmap** — a day-by-day fix plan for resolving those inconsistencies.

This feature is for internal use only. It does NOT appear in the app's public navigation.

---

## Step 1 — Audit the App First

Before writing any code, read ALL existing pages and components in this app. Then:

- Identify the colour palette actually in use (hex values from inline styles + tailwind config)
- Identify the typography in use (font family, size scale, weights)
- Identify spacing patterns (padding, margin, gaps, card radius values)
- Identify button variants (filled, outlined, ghost, disabled, locked)
- Identify input states (default, focus, error, disabled)
- Identify card variants (light, dark/featured, tint/callout)
- Identify animation patterns (framer-motion or CSS transitions)
- Document the top 10 UI inconsistencies you find across pages

---

## Step 2 — Define Design Tokens

From the audit, extract the following tokens for THIS app:

### Colours
List all discovered colours with:
- Token name (e.g. "Primary", "Navy", "Page BG")
- Hex value
- Usage description

### Typography
- Font family (primary + fallback)
- Complete type scale: role, size class, weight, colour

### Spacing
- Section padding
- Card padding
- Card radius values (sm / md / lg)
- Max content widths
- Grid gaps
- Base unit

### Shadows
- Card shadow (light)
- Card shadow (featured/dark)
- Nav shadow

### Motion (if Framer Motion is used)
- Entry animation values (opacity, y offset)
- Duration
- Easing curve
- Stagger delay
- Trigger method (whileInView / animate)
- Button hover / tap scale

---

## Step 3 — Build the Design System Page

Create: pages/DesignSystem.jsx

The page has:
- A navy hero header with the app name, version tag ("v1.0 · [Month Year]"), and a short description ("Single source of truth for [AppName]'s visual language.")
- A sticky export bar below the hero (stays visible while scrolling): shows app name + version on the left, "Export PDF" button on the right
- The following sections in order, each separated by a thin divider:

### Sections

**1. Colour Palette**
- Group swatches by category (Brand, Backgrounds, Text, Status)
- Each swatch: coloured rectangle + token name + hex value
- Use a 4-column responsive grid

**2. Type Scale**
- Table or list showing each typographic role
- Each row: role label (left, small muted) + live text sample (right, rendered in actual styles)
- Include: H1, H2, H3, Section Overline, Body (main), Body (dense), Meta/Caption, Button label

**3. Spacing System**
- Table with columns: Token | Value | Usage
- Dark navy table header, alternating row backgrounds

**4. Buttons**
- Grid of button variants rendered live
- Each: actual button element + short description of usage

**5. Form Inputs**
- Grid of 4 input states: Default, Focus, Error, Disabled
- Each: label + styled input + error message where applicable
- Use read-only inputs so they don't need form state

**6. Card Variants**
- 3 cards side by side: Light, Dark/Featured, Subtle Tint
- Each uses actual brand colours from the audit

**7. Motion & Animation**
- Grid of rule tiles: name + value (monospace)

**8. Design Tokens**
- Tab switcher: JS Object | CSS Variables | Tailwind Config
- Each tab shows a dark code block (navy bg, monospace, syntax-tinted text)
- Content is the actual token values from the audit

**9. UI Inconsistencies**
- Numbered list (01, 02...) with severity pill badge per item
- Severity colours: High = red tint, Medium = amber tint, Low = green tint
- Each item: title (bold) + description (muted)

**10. Fix Roadmap**
- Day-by-day plan (Day 1, Day 2...)
- Each day: orange square badge with "Day N" + bullet list of specific tasks

---

## Step 4 — Build the PDF Export Backend Function

Create: functions/exportDesignSystem.js

### Requirements

- Import: `import { jsPDF } from 'npm:jspdf@2.5.2';`
- No authentication required (internal tool)
- Returns: `new Response(pdfBytes, { status: 200, headers: { 'Content-Type': 'application/pdf', 'Content-Disposition': 'attachment; filename=[AppName]_Design_System_v1.0.pdf', 'Access-Control-Allow-Origin': '*' } })`

### PDF Structure (pages in order)

1. **Cover page** — full-page dark background (app's primary dark colour), accent colour left stripe, app name large, "UX/UI Design System" subtitle, version + date + confidentiality note, deliverables list with arrow markers
2. **Table of Contents** — numbered list with page references and light dot-leader lines
3. **Brand + Typography** — overline, H1, brand principles as bullet list, typography table
4. **Layout + UX Rules** — layout tokens as bullet list, UX micro-patterns as bullet list
5. **Design Tokens (JS)** — dark code block rendered line by line
6. **CSS Variables + Tailwind** — two dark code blocks on one page
7. **Colour Swatches** — grouped swatches using jsPDF roundedRect fills, hex labels below
8. **Component Catalogue** — table: Component | Purpose | Key States/Variants
9. **UI Reference Pack** — table: # | Page | Route | Capture Status
10. **Inconsistencies + Fix Plan** — severity pills using roundedRect fills, bullet plan
11. **Back cover** — dark bg, accent stripe, closing statement, contact/legal line

### CRITICAL: ASCII-only text rule
jsPDF's default font does not support Unicode. Every string in the PDF must use ASCII-safe characters only:
- Em dash (—) → hyphen (-)
- Bullet (•) → arrow marker (->) rendered as two separate text calls (marker + text)
- Copyright (©) → (c)
- Right arrow (→) → ->
- Multiplication (×) → x
- Any emoji → remove entirely
- Curly quotes → straight quotes

### PDF helper functions to define (all return updated y coordinate)

```
const header = (title) => { /* navy header bar + white title text */ }
const footer = () => { /* page number + confidential note + divider line */ }
const h1 = (text, y) => { /* 26pt bold navy */ return y + 12; }
const h2 = (text, y) => { /* 16pt bold navy */ return y + 8; }
const h3 = (text, y) => { /* 11pt bold navy */ return y + 6; }
const overline = (text, y) => { /* 8pt bold uppercase accent colour */ return y + 5; }
const body = (text, y, indent = 0) => { /* 10pt normal gray, auto-wrap */ return y + ...; }
const bullet = (text, y, indent = 4) => { /* accent "->" marker + gray text */ return y + ...; }
const divider = (y) => { /* faint horizontal line */ return y + 6; }
const swatch = (label, hex, rgb, x, y) => { /* coloured roundedRect + label + hex below */ }
const tableRow = (cols, widths, y, isHeader = false) => { /* navy header or alternating rows */ return y + 7; }
```

### Page overflow handling
Before each new content block, check: `if (y > H - 25) { footer(); doc.addPage(); header('Section (cont.)'); y = 24; }`

---

## Step 5 — Connect the Export Button

In the ExportBar component inside DesignSystem.jsx:

```jsx
import { base44 } from "@/api/base44Client";

const handleDownload = async () => {
  setLoading(true);
  try {
    const response = await base44.functions.invoke("exportDesignSystem", {});
    const blob = new Blob([response.data], { type: "application/pdf" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "[AppName]_Design_System_v1.0.pdf";
    a.click();
    URL.revokeObjectURL(url);
    setDone(true);
  } finally {
    setLoading(false);
  }
};
```

Button states: idle ("Export PDF") → loading (spinner + "Generating...") → done (checkmark + "Downloaded!" for 4s)

---

## Step 6 — Register the Route (Internal Only)

In App.jsx, add as a standalone route that does NOT appear in navigation:

```jsx
import DesignSystem from './pages/DesignSystem';
// Add inside <Routes>, outside the pagesConfig loop:
<Route path="/DesignSystem" element={<LayoutWrapper currentPageName="DesignSystem"><DesignSystem /></LayoutWrapper>} />
```

Do NOT add /DesignSystem to any navigation array or sidebar.

---

## Step 7 — Populate with Real App Data

Replace all placeholder values with the actual data discovered in Step 1:
- All colour hex values → real values from the app
- Font family → real font(s) used
- Type scale → actual Tailwind classes or px values used
- Spacing tokens → actual values observed
- Button variants → match what exists in the app
- Component catalogue → list real components found
- Page inventory → list all real routes in the app
- Inconsistencies → real issues found in the audit
- Fix roadmap → practical tasks for THIS app

---

## Output Quality Checklist

- [ ] DesignSystem page renders without errors
- [ ] All colour swatches display correct brand colours
- [ ] Type scale shows live text samples in correct styles
- [ ] Token code blocks are accurate to the app
- [ ] Export PDF button triggers download
- [ ] PDF is multi-page and renders all sections without overflow
- [ ] PDF contains no Unicode/special characters (ASCII only)
- [ ] /DesignSystem route works but is absent from all nav menus
- [ ] Severity badges render in correct colours
- [ ] Sticky export bar stays visible on scroll