replica-design

1# replica-design
2 
3Reads `replica/recon.md` and the screenshots in `replica/screens/`. Writes
4`replica/design/tokens.json` (template in this folder), `tokens.css`, the
5Tailwind mapping, and `replica/design/components.md`.
6 
7```bash
8python3 contrast.py replica/design/tokens.json     # every text pair, WCAG ratio
9```
10 
11## The rules
12 
13What you rebuild is the **system**: the roles, the scale, the patterns, the
14way a form or a modal behaves. Those are not ownable, and users expect them.
15What you never take:
16 
17- **Logos, icons, illustrations, photos, sounds.** Use an open icon set
18  (Lucide, Phosphor, Heroicons, Tabler, all MIT or similar) and make or
19  commission your own illustrations. Do not trace theirs.
20- **Licensed fonts.** If the original uses a paid or proprietary font, pick
21  an open one with the same job: Inter, Geist, IBM Plex, Manrope, Source Serif.
22- **Their copy.** Every label and empty state gets written fresh.
23- **Their brand colour.** Record it as a role (`accent`), use a neutral
24  placeholder now, and replica-brand gives you your own. The signature colour
25  plus the signature layout is trade dress, and it changes before launch.
26 
27## Step 1: measure, do not guess
28 
29From the screenshots (zoom in, use a colour picker on the user's machine):
30 
31- **Colour roles**, not colours: bg, surface, border, border-input, text,
32  text-muted, accent, on-accent, danger, success, warning. Count how many
33  greys the app really uses. Usually 5 to 7.
34…