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:
tegwick 2026-08-09 01:31:00 +02:00
parent 319dd00465
commit 6fe263444a
71 changed files with 4939 additions and 797 deletions

View file

@ -0,0 +1,13 @@
Create a React artifact that reproduces this brand's design language.
Page intent: landing.
Material language: flat.
Voice: Tone: neutral · Headings: unknown · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
Colors to use: #000000, #efefef, #616161, #373737, #171717, #ffffff, #e5e5e5, #d08728.
Fonts: [object Object], [object Object], [object Object], [object Object].
Radius vocabulary: 4, 8, 12, 15, 20.
Sections:
- hero
- features
- cta
- footer
Use Tailwind via CDN, lucide-react for icons, and keep the material language consistent across sections. Do not add extra decorative elements outside this vocabulary.

View file

@ -0,0 +1,18 @@
# Design brief
Page type: **landing**.
Material language: **flat**.
Voice: Tone: neutral · Headings: unknown · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
## Tokens
```ts
export const tokens = {
colors: ['#000000', '#efefef', '#616161', '#373737', '#171717', '#ffffff', '#e5e5e5', '#d08728'],
fonts: ['[object Object]', '[object Object]', '[object Object]', '[object Object]'],
radii: ['4', '8', '12', '15', '20'],
shadows: ['rgb(170, 170, 170) 2px 2px 4px 0px', 'rgba(23, 23, 23, 0.1) 2px 2px 8px 2px'],
};
```
## Sections
- hero
- features
- cta
- footer

View file

@ -0,0 +1,12 @@
Clone the design language of this landing page and build a fresh equivalent.
Visual feel: flat. Tone: neutral · Headings: unknown · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
Primary palette: #000000, #efefef, #616161, #373737, #171717.
Typography: [object Object], [object Object], [object Object], [object Object].
Corner radius vocabulary: 4, 8, 12, 15, 20.
Shadow vocabulary: rgb(170, 170, 170) 2px 2px 4px 0px | rgba(23, 23, 23, 0.1) 2px 2px 8px 2px.
Page structure:
- hero
- features
- social proof
- cta
- footer

View file

@ -0,0 +1,28 @@
# Recipe: button
Build one button component that matches this brand.
Palette: #000000, #efefef, #616161, #373737, #171717, #ffffff
Typography: [object Object], [object Object], [object Object], [object Object]
Material: flat
Signals: Radius: 4, 8, 12, 15, 20 · Shadows: rgb(170, 170, 170) 2px 2px 4px 0px | rgba(23, 23, 23, 0.1) 2px 2px 8px 2px
## Anatomy (detected)
```json
{
"kind": "button",
"structuralHash": "button",
"instanceCount": 1,
"variants": [
{
"css": {
"background": "rgb(239, 239, 239)",
"color": "rgb(0, 0, 0)",
"padding": "1px 6px 1px 6px",
"borderRadius": "0px",
"border": "2px outset rgb(0, 0, 0)",
"fontSize": "13.3333px",
"fontWeight": "400"
},
"instanceCount": 1
}
]
}
```

View file

@ -0,0 +1,22 @@
Build a landing page with this exact visual language.
COLORS:
#000000
#efefef
#616161
#373737
#171717
#ffffff
#e5e5e5
#d08728
FONTS: [object Object], [object Object], [object Object], [object Object]
SPACING: 1, 24, 32, 40, 60, 80, 96, 320
RADIUS: 4, 8, 12, 15, 20
SHADOWS: rgb(170, 170, 170) 2px 2px 4px 0px | rgba(23, 23, 23, 0.1) 2px 2px 8px 2px
MATERIAL LANGUAGE: flat
VOICE: Tone: neutral · Headings: unknown · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
SECTIONS (in order):
- hero
- features
- cta
- footer
Use Tailwind. Match these tokens exactly. Keep the material language consistent.