2026-10-04-the-set-draws-what-the-website-markup-asks-for

Decision

Draw the intent. primary → brand (orange, per the site's own style-guide page), muted-foreground → ink-3, secondary and muted → sunken/muted, card → surface, border → line. This is a deliberate departure under STYLE-GUIDE §11 and is the only place the web set does not describe the app as it renders.

Why

The website's markup uses shadcn role classes — bg-primary, text-muted-foreground, bg-secondary, bg-card, border-input — on almost every element. Both Next apps' globals.css is the single line @import "tailwindcss", with no @theme. In Tailwind 4 an undefined colour utility generates nothing, so in the running site those classes paint nothing: section pills have no background, "muted" text is body-coloured, primary icons inherit black.

Options weighed:

• Draw what renders — a set with no secondary pills and no muted text. Faithful, and it would record a bug as the design.
• Draw what the markup asks for — map each role class to the palette role it names.

Impact

• The drawings show a site more finished than the deployed one. The first task after review is to define the theme so the two agree.
• The same file would settle the product's two identities: the site is orange and fuchsia, the mobile app and the console are blue, indigo and gray-900.
• Not verified in a browser against a running build; the conclusion comes from reading globals.css and Tailwind 4's behaviour.

Status

Active

Sources

• apps/website/src/app/globals.css
• apps/admin/src/app/globals.css
• apps/website/src/app/style-guide/page.tsx
• .context/designs/web/shared.css