Everything a designer or agent needs on one page: the rules, the tokens, the component inventory, and where each file lives. Source of truth is readme.md and tokens/*.css.
01
Say what was checked and what was not. "Not observed", never 0. "Needs evidence", never a guess.
02
Provenance is shape plus fill, never color alone: ● observed, ◐ inferred, ◔ limited, ○ unavailable.
03
One blue. No red/green judgement. Favourable vs unfavourable is words and position.
04
Every recommendation carries its origin: AI-drafted or Rule-based. Every claim ends in a source and a date.
05
Not-live functionality wears a dashed "Planned" pill. Nothing is presented as shipped that isn't.
06
Bilingual by default: logical properties, dir="ltr" on numbers, prices, domains and URLs.
Page is white; cards are --surface with --border #eff3f4 hairlines and no shadow. Blue text only on the tint, and only as --primary-deep.
Know your competitors.
lumenandoak.com
Section title 17
Body 14 · Plus Jakarta Sans 400
Meta 12 · muted
Kicker 10 · uppercase tracked
عرف منافسيك وأسعارهم. مع المصدر.
Cairo للعربية بنفس المقاسات؛ الأرقام والنطاقات تبقى LTR.
$34.00 · Not observed
Weights 400 and 600 only. Tabular numerals in every column.
Content max 1180px, left-aligned. Card padding 14–20px, gaps 12px. Controls 40px; hero input 46px; hit targets ≥ 44px.
No icon font, no emoji. The only drawn icons are the Lucide thumbs inside FeedbackThumbs. The mark is assets/logo-dot.png; the name is set in type beside it.
| Group | Component | Use | Card |
|---|---|---|---|
| actions | Button · IconButton · FeedbackThumbs | Outlined pill actions (no solid fill); 28px square row controls; thumbs up/down per comparison. | actions.card.html |
| labels | EvidencePill · Tag · SourceTag | Provenance states; Preview / Example / Planned pills; AI-drafted vs Rule-based origin. | labels.card.html |
| navigation | Tabs · FilterChips · NavBar | Underline tabs with counts and dashed Planned tabs; single-select competitor chips; dot + name header. | navigation.card.html |
| forms | Input · Select · Segmented | 40px fields, 14px radius, ink error text; pill segmented control for views and language. | forms.card.html |
| surfaces | Card · Dialog | Flat surface / raised / outline / dashed cards; the one elevated surface. | surfaces.card.html |
| data | DataTable · ProductMatchCard · ProgressPhases | Grid table with evidence drawer; one product vs its rivals; run phases. | data.card.html |
Patterns in the live app, added October 2026. They are styled in the app's stylesheets, not shipped as components in this package.
| Pattern | Rule | Where |
|---|---|---|
| Workspace menu | One vertical menu on the report, Watchers and Account pages for accounts with a plan; 224px wide with a mouse, collapsible to a 60px strip. It holds the logo, New report, the organisations list, Watchers and Account, so page headers do not repeat them. | app/components/organisation-menu.tsx |
| Report header | One row: store name with the observed date beneath; actions, theme and language at the end. No breadcrumb row. | app/report-cleanup.css |
| Tabs | At most four section tabs; the rest under a More menu. No "coming soon" tabs. | app/report-cleanup.css |
| Toolbar and status line | View switch at the start, filters and period at the end, on one row. Counts and secondary links on one 12px line beneath. | app/report-cleanup.css |
| Dropdown | One look for every single-choice dropdown: drawn chevron 14px from the edge, mirrored in Arabic, lighter in dark mode. Toolbar dropdowns are pills. | app/select.css |
| Period | Chosen once per view in the toolbar; applies to every chart on it. | app/components/product-design-lab.tsx |
| Competitor card | Image and two-line name; one button to open the full view; price; direction in words; chart or a one-line note; one footer line with match, confidence and Change match. | app/report-cleanup.css |
| Compact desktop scale | Above 900px with a mouse or trackpad: 22px title, 14px tabs, 13px controls at 30–36px. On touch screens and narrow widths the main controls are 44px. | app/report-cleanup.css |
Each component ships Name.jsx, Name.d.ts (props contract) and Name.prompt.md (usage). Mount from the compiled bundle namespace; the card HTML files show the variants.
Landing
Hero, domain input, pillars, pricing targets.
Progress
Seven phases, auto-opens the report.
Report
Decision header, Insights, Competitors, Products and Evidence.
Sign in
Create / sign in, inline validation, Planned.
Account
Reports, plan & usage, profile, API keys, connected apps.
Open the click-through → · prototype with the explainer animation and Arabic: Live homepage
styles.css → tokens/fonts.css · colors.css · typography.css · spacing.css · base.cssreadme.md — full guide: content fundamentals, visual foundations, iconography, caveats. SKILL.md — agent entry point.guidelines/ — 14 specimen cards (Colors, Type, Spacing, Brand). assets/logo-dot.png.components/<group>/ — sources, contracts, prompts and one card per group. components/_card_loader.js — fallback when the bundle isn't compiled.ui_kits/10signals/ — index.html, five screen JSX files, README.