Extract authenticated coulomb.social design language via designlang
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.
This commit is contained in:
parent
319dd00465
commit
6fe263444a
71 changed files with 4939 additions and 797 deletions
115
docs/design-extract/coulomb-social-AGENT.md
Normal file
115
docs/design-extract/coulomb-social-AGENT.md
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
# 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`.
|
||||
Loading…
Add table
Add a link
Reference in a new issue