FE-M0-03 · Tokens, the root layout and the @ui/ aliases

ID FE-M0-03 · Level L0 · Run order row 24

Goal

apps/web loads the design system's tokens and op-* styles through @ui/design, shows the Opleet app icon, and builds; committed.

Before

FE-M0-02 is Done. You are on the branch web/design-system in ~/opleet-v2/opleet.

Run

1 · Copy this step's files: the root layout and page, app.css, tsconfig.json with the @ui/ aliases, and the tokens script

cp -R ~/opleet-v2/packs/fe-pack-a/FE-M0-03/. .

2 · Remove the starter's stylesheet and favicon; the app icons come from the design system

git rm -q apps/web/app/globals.css apps/web/app/favicon.ico
cp apps/web/design/opleet/assets/app-icons/app-icon-192.png apps/web/app/icon.png
cp apps/web/design/opleet/assets/app-icons/app-icon-180.png apps/web/app/apple-icon.png

3 · Add the tokens script, write tokens.css from tokens.json, and check it

pnpm --dir apps/web pkg set scripts.tokens="node scripts/tokens.mjs"
pnpm --filter web tokens
pnpm --filter web tokens --check

4 · Lint, typecheck and build

pnpm lint
pnpm --filter web typecheck
pnpm --filter web build

5 · Look at it. Open http://localhost:3000, then press Ctrl+C

pnpm --filter web dev

6 · Commit

git add -A apps/web
git commit -m "feat(web): load the design system tokens and styles"

Expect

Block 3: “design/opleet/tokens.css: 107 tokens, 40 with a dark value”, then “design/opleet/tokens.css is up to date”.
Block 4: “No fixes applied.”; “✓ Types generated successfully” with no errors; the build lists /, /_not-found, /apple-icon.png and /icon.png.
Block 5: “Opleet v2” in Inter Tight on a pale green canvas with soft green washes. The browser tab shows the green Opleet icon and the title Opleet.
Block 6: ✔️ biome and ✔️ commitlint, then the commit line with 11 files changed.

Check

git show --stat HEAD | tail -1
git status --short

Expect: 11 files changed, then nothing from git status.

If it fails

typecheck can't find @ui/design/tokens.css: tsconfig.json wasn't replaced. Run block 1 again from ~/opleet-v2/opleet.
Block 5 shows a white page in a serif font: the styles didn't load. Paste the first error in the browser console.
Anything else: stop and paste the output.

Undo

git reset --hard
git clean -fd apps/web

Before the commit, this drops the step's changes. After it: git reset --hard HEAD~1.

Runs

Done 2026-10-06 (zuki)