tegwick
6fe263444a
Session probe lands on /vw_pages (Research). Use main designlang extract with --cookie-file — pack ignores auth. 39 artifacts under docs/design-extract; tolerate designlang late summary crash when cores exist.
115 lines
3.5 KiB
Markdown
115 lines
3.5 KiB
Markdown
# You are building UI in the coulomb.social design system.
|
|
|
|
Source: https://coulomb.social
|
|
Extracted by designlang on 2026-08-08.
|
|
|
|
## Brand at a glance
|
|
|
|
- title Research | Coulomb
|
|
- page intent landing
|
|
- material flat
|
|
- design grade B
|
|
|
|
## Colour
|
|
|
|
- primary #d08728
|
|
- neutrals #000000 · #efefef · #616161 · #373737 · #171717 · #ffffff
|
|
|
|
## Typography
|
|
|
|
- families Helvetica · Arial · Times New Roman · Inter
|
|
- weights 400 · 500 · 600 · 700
|
|
- base size 16px
|
|
|
|
## Spacing
|
|
|
|
- scale 1px · 24px · 32px · 40px · 60px · 80px · 96px · 320px
|
|
|
|
## Radii
|
|
|
|
- scale 4px · 8px · 12px · 15px · 20px
|
|
|
|
## Motion
|
|
|
|
- durations 250ms
|
|
|
|
## Voice
|
|
|
|
- tone neutral
|
|
- pronoun third-person
|
|
- headings unknown
|
|
- CTA verbs content · favorite · format · filter · add · arrow
|
|
|
|
## Component anatomy
|
|
|
|
- button variants: [object Object] · slots: true · true · false
|
|
|
|
## Accessibility
|
|
|
|
- WCAG score 100% · failing pairs: 0
|
|
|
|
## Build rules
|
|
|
|
1. Use the colours above. **Never invent a new hex.** If you need a
|
|
shade between two existing colours, derive it via HSL adjustment
|
|
from the closest extracted colour and call out the derivation.
|
|
2. Use the extracted typography families. If you need a missing weight,
|
|
pick the nearest available weight from the list and note it.
|
|
3. Snap spacing values to the scale above. No off-scale paddings or
|
|
margins.
|
|
4. Snap border radii to the scale above.
|
|
5. Match the voice: same tone, same pronoun stance, same heading
|
|
style. Reuse the listed CTA verbs.
|
|
6. Aim for WCAG AA contrast minimum. When the brand colours fail,
|
|
prefer the foreground colour on the background colour rather than
|
|
mid-tone neutrals.
|
|
7. Reuse component anatomy when it exists — do not invent novel
|
|
structures for things the site already has.
|
|
|
|
## Available context files
|
|
|
|
designlang wrote these alongside this prompt. Reach for them when
|
|
you need ground truth:
|
|
|
|
- `<host>-design-tokens.json` — DTCG primitive · semantic · composite tokens
|
|
- `<host>-tailwind.config.js` — Tailwind v3 config
|
|
- `<host>-tailwind-v4.css` — Tailwind v4 `@theme` block
|
|
- `<host>-tokens.d.ts` — TypeScript literal-union types
|
|
- `<host>-variables.css` — bare CSS custom properties
|
|
- `<host>-reset.css` — brand-aware base styles
|
|
- `<host>-gradients.css` — `.grad-N` utility classes
|
|
- `<host>-anatomy.tsx` — typed React component scaffolds
|
|
- `<host>-shadcn-theme.css` — shadcn/ui theme
|
|
- `<host>-theme.js` — React / Vue / Svelte theme object
|
|
- `<host>-mcp.json` — MCP server payload (load via stdio)
|
|
- `<host>.brand.pdf` — print-ready 13-chapter brand book
|
|
|
|
When you reference the system in code, prefer importing from these
|
|
files over hard-coding values.
|
|
|
|
## Output expectations
|
|
|
|
When asked to "build a pricing page" or "make a card" or any UI:
|
|
|
|
- Produce a single self-contained component file in the appropriate
|
|
framework (React / Vue / Svelte — match what the user is using).
|
|
- Use Tailwind utility classes wired to the v4 `@theme` if Tailwind
|
|
is available; otherwise use the CSS custom properties from
|
|
`variables.css`.
|
|
- Write the headline copy using the brand voice; do not invent
|
|
generic Lorem.
|
|
- Annotate any choice where you had to bend the system, with a
|
|
one-line `// note:` comment explaining what and why.
|
|
|
|
## One-line install
|
|
|
|
```bash
|
|
npx designlang coulomb.social
|
|
```
|
|
|
|
Run this against any other URL to extract its system in the same
|
|
shape as the one above.
|
|
|
|
---
|
|
|
|
Generated by designlang. Re-extract by running `npx designlang coulomb.social`.
|