|
| 1 | +# Lantern Design Principles |
| 2 | + |
| 3 | +Lantern is a governed app platform for institution-built and AI-built learning |
| 4 | +apps. Its interface should make review, approval, launch, grading, and audit |
| 5 | +work feel clear and dependable. |
| 6 | + |
| 7 | +This is the public UI design contract for the repo. It should stay focused on |
| 8 | +implementation-facing principles and reusable interface rules. Private product |
| 9 | +strategy, research, internal operations, and Cloudflare setup details do not |
| 10 | +belong here. |
| 11 | + |
| 12 | +## Product Feel |
| 13 | + |
| 14 | +Lantern should feel: |
| 15 | + |
| 16 | +- institutional |
| 17 | +- clear |
| 18 | +- calm |
| 19 | +- trustworthy |
| 20 | +- more modern than Canvas, but compatible with that world |
| 21 | + |
| 22 | +Lantern should not feel like: |
| 23 | + |
| 24 | +- a flashy startup dashboard |
| 25 | +- a generic app marketplace |
| 26 | +- an LMS replacement |
| 27 | +- a pile of one-off admin screens |
| 28 | + |
| 29 | +The UI exists to make governed learning-app operations legible. It should help |
| 30 | +reviewers and operators understand what is approved, what is live, what changed, |
| 31 | +what failed, and what evidence exists. |
| 32 | + |
| 33 | +## Interface Model |
| 34 | + |
| 35 | +Prefer: |
| 36 | + |
| 37 | +- server-rendered HTML |
| 38 | +- plain CSS tokens |
| 39 | +- strong information hierarchy |
| 40 | +- accessible defaults |
| 41 | +- reusable page and component patterns |
| 42 | +- explicit status, evidence, and next action language |
| 43 | +- dense but readable operational pages |
| 44 | + |
| 45 | +Avoid: |
| 46 | + |
| 47 | +- React-heavy front ends by reflex |
| 48 | +- Tailwind or utility-heavy styling |
| 49 | +- highly custom one-off UI patterns |
| 50 | +- decorative effects that compete with operational facts |
| 51 | +- marketing-page composition inside the admin product |
| 52 | +- hidden fallback flows or ambiguous recovery states |
| 53 | + |
| 54 | +When a page is about governance, the primary facts should be visible before |
| 55 | +secondary decoration or explanation. |
| 56 | + |
| 57 | +## Visual Language |
| 58 | + |
| 59 | +Use a quiet institutional palette: |
| 60 | + |
| 61 | +- navy and blue-gray for structure and primary actions |
| 62 | +- warm amber only as a restrained brand accent |
| 63 | +- green, amber, and red for semantic success, warning, and danger states |
| 64 | +- light surfaces with clear borders and enough spacing to scan |
| 65 | + |
| 66 | +The current admin tokens live in |
| 67 | +[`src/admin/layout_style_tokens.ts`](src/admin/layout_style_tokens.ts). New |
| 68 | +admin UI should use those tokens before introducing new colors, radii, shadows, |
| 69 | +or spacing systems. |
| 70 | + |
| 71 | +Default shape: |
| 72 | + |
| 73 | +- cards and controls use small radii |
| 74 | +- borders are preferred over heavy shadows |
| 75 | +- status badges should be semantic, compact, and readable |
| 76 | +- tables and fact grids should optimize for scanning and comparison |
| 77 | + |
| 78 | +## Content Rules |
| 79 | + |
| 80 | +Use plain operational language. |
| 81 | + |
| 82 | +Good Lantern copy: |
| 83 | + |
| 84 | +- names the object being acted on |
| 85 | +- states the exact status or blocker |
| 86 | +- names the trusted boundary when relevant |
| 87 | +- explains failures clearly without exposing secrets |
| 88 | +- gives one obvious next step when a next step exists |
| 89 | + |
| 90 | +Avoid copy that: |
| 91 | + |
| 92 | +- implies generated apps have raw LMS, D1 database, or grading access |
| 93 | +- hides governance behind vague success states |
| 94 | +- invents compatibility promises the system does not actually provide |
| 95 | +- exposes private tenant, infrastructure, pricing, or strategy details |
| 96 | + |
| 97 | +## Workflow Rules |
| 98 | + |
| 99 | +Every admin workflow should make these questions easy to answer: |
| 100 | + |
| 101 | +1. What app, version, deployment, LMS slot, attempt, or placement am I looking at? |
| 102 | +2. Is it reviewed, approved, live, blocked, or failed? |
| 103 | +3. What exact boundary produced this state? |
| 104 | +4. What durable evidence exists? |
| 105 | +5. What is the one safe next action? |
| 106 | + |
| 107 | +Prefer one correct path over several similar actions. If a task is unavailable, |
| 108 | +fail clearly and keep the user inside a Lantern-owned page. |
| 109 | + |
| 110 | +## Accessibility |
| 111 | + |
| 112 | +Accessibility is part of the governance model, not polish. |
| 113 | + |
| 114 | +Design and implementation should preserve: |
| 115 | + |
| 116 | +- semantic headings and landmarks |
| 117 | +- keyboard-reachable controls |
| 118 | +- visible focus states |
| 119 | +- readable contrast |
| 120 | +- labels for form controls |
| 121 | +- stable layout at narrow and wide viewport sizes |
| 122 | +- clear error text near the relevant action |
| 123 | + |
| 124 | +When a reviewed package has accessibility evidence or exceptions, surface that |
| 125 | +state before it goes live. |
| 126 | + |
| 127 | +## Review Checklist |
| 128 | + |
| 129 | +Before shipping UI changes, check: |
| 130 | + |
| 131 | +- The page still feels institutional, clear, and calm. |
| 132 | +- Primary governance facts are visible without hunting. |
| 133 | +- New styles reuse existing tokens and patterns. |
| 134 | +- Buttons and links have clear action language. |
| 135 | +- Failure states are explicit and do not silently degrade. |
| 136 | +- No private strategy, secrets, account details, or infra values appear. |
| 137 | +- The change keeps the trusted LMS/runtime/grading boundary legible. |
0 commit comments