coulomb/coulomb-social
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
coulomb-social/docs/design-extract/coulomb-social-AGENT.md
tegwick 6fe263444a 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.
2026-08-09 01:31:00 +02:00

3.5 KiB
Raw Blame History

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

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.