@supersoniks/concorde 5.1.2 → 5.1.3-immutable.1

package/.taste-skill/direction.json

@@ -1,510 +0,0 @@
-{
- "version": 1,
- "at": "2026-10-25T15:53:30.429Z",
- "seed": 411056234,
- "redraws": 0,
- "input": {
-  "brief": "Concorde, a web component library named after the supersonic airliner; docs styled like a 1970s IBM/Braun technical manual",
-  "sector": "dev-tool",
-  "tone": "technical",
-  "have": [
-   "product-ui"
-  ],
-  "keep": [],
-  "avoid": [],
-  "sections": [
-   "list",
-   "features",
-   "showcase",
-   "about",
-   "cta",
-   "footer"
-  ],
-  "direction": "product-performs"
- },
- "imagery": "interface",
- "allow": [],
- "direction": {
-  "id": "product-performs",
-  "name": "The product performs",
-  "sectors": [
-   "saas",
-   "dev-tool",
-   "ai-product",
-   "consumer-app",
-   "finance"
-  ],
-  "tones": [
-   "technical",
-   "quiet"
-  ],
-  "needs": [],
-  "idea": "Software is most convincing when it is doing its job in front of you. Instead of describing features, put small, true, working fragments of the product on the page: the actual control, with real content, responding to the pointer. A colour picker's loupe reads the page's own background and prints its value. A list tool lets you tick an item right there. A type-scale plugin sets the page's own headings. Find the one interaction that is the product and make the hero that interaction; then show each further capability as another fragment at real size. No dashboard collage, no browser frame, no screenshots shrunk until unreadable.",
-  "composition": "Hero: a short plain headline (4–6vw, left-aligned, upper-left third) and one sentence; the rest of the first screen is the main fragment at actual interface size, sitting directly on the page or on one flat stage colour, large enough to read every label. The fragment is built in HTML and works. Below, capabilities are a single-column sequence, each a row of two parts on a 5/7 split: a two-line statement on one side and the relevant fragment on the other, with the fragments varying in size and shape so the column never becomes a zigzag of equal blocks. Fragments are cropped pieces of interface (a menu, a row, a control, a panel edge), not whole windows. One section pins a fragment while three short statements change it.",
-  "typography": "The marketing type matches the product's interface type so the fragments and the page feel like one thing. Headline modest; interface text at its true size (13–15px) inside fragments.",
-  "typeClasses": [
-   "grotesk-tight",
-   "grotesk-light",
-   "geometric"
-  ],
-  "colour": "Neutral ground. The product's own interface colours provide the colour. At most one flat stage colour behind fragments.",
-  "paletteTags": [
-   "light-neutral",
-   "dark-neutral",
-   "mono-accent"
-  ],
-  "imagery": "The interface fragments are the main imagery: build them carefully with real labels, real numbers and sensible states (one hovered, one selected). Around them, two or three real pictures of the customer's world (found with scripts/assets.mjs), never stock of people at laptops.",
-  "sectionTags": [
-   "ui-led",
-   "quiet"
-  ],
-  "motion": "pinned-story",
-  "richness": "Fidelity. A fragment with believable content and a real hover state is more interesting than any illustration. Spend the effort there.",
-  "pitfalls": "A fake interface made of grey bars and circles is the worst outcome; if you cannot build a believable fragment, change direction. Mark each fragment's root element with the attribute data-ui: inside it the product's own conventions apply (1px control borders, small radii, a shadow on its open menu) and the inspector leaves them alone; outside it the house rules hold as usual. data-ui is for cropped fragments only, never for a page wrapper. Do not put the fragment in a browser or laptop frame.",
-  "seenIn": [
-   "opl-dabbit",
-   "opl-rows",
-   "opl-typewave",
-   "opl-shelf",
-   "opl-uni",
-   "opl-kontu"
-  ],
-  "allow": []
- },
- "hero": {
-  "id": "fragment-on-shaped-stage",
-  "name": "Fragment on a shaped stage",
-  "archetype": "split",
-  "directions": [
-   "product-performs",
-   "one-motif",
-   "colour-chapters"
-  ],
-  "needs": [],
-  "blueprint": "A neutral ground. The headline occupies the upper-left third: two lines at clamp(52px, 5.2vw, 80px), medium weight, flush left on columns 1–6 at a 40px margin, starting 150px down. One supporting sentence at 18px, max 40ch, follows, then the single action as a small rectangular button. The rest of the screen belongs to one flat stage in a saturated colour: it spans columns 5–12, begins 42% down, and bleeds off the right and bottom edges. Its top-left corner is cut with the product's own shape using `clip-path` (a notch, a chamfer or a tab two columns wide), the only decoration on the page. On the stage, 56px in from its left and top edges, sits the main fragment of the interface at true size with labels at 13–15px, built in HTML and working: one panel or control about 620px wide, cropped by the bottom edge, never a whole window and never inside a browser or laptop frame. Mark its root with data-ui. Navigation is a plain row at 28px from the top: wordmark left and four text links right at 15px. Nothing overlaps the headline.",
-  "mobile": "The headline sits under the wordmark at 10vw on two lines, followed by the sentence at 16px and the button. The stage comes next at full width, bleeding off both sides and the bottom, its corner cut kept at 72px wide. The fragment sits 16px inside it at true size; if it is wider than the screen the right edge crops it rather than scaling it down.",
-  "headline": "A plain statement of what the product does in three to six words, two lines of up to about 16 characters each at 5.2vw.",
-  "motion": "shutter-image",
-  "seenIn": [
-   "opl-typewave",
-   "opl-vessa",
-   "opl-uni"
-  ]
- },
- "type": {
-  "id": "schibsted-heavy",
-  "name": "Schibsted Grotesk",
-  "class": "grotesk-tight",
-  "display": {
-   "family": "Schibsted Grotesk",
-   "source": "google",
-   "weights": [
-    800
-   ],
-   "italic": false,
-   "settings": "weight 800 · tracking -0.05em · leading 0.88 · sentence case or all lowercase",
-   "css": "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;600;800&display=swap\" rel=\"stylesheet\">"
-  },
-  "text": {
-   "family": "Schibsted Grotesk",
-   "source": "google",
-   "weights": [
-    400,
-    600
-   ],
-   "italic": false,
-   "settings": "400 for paragraphs, 600 for navigation and other functional text · leading 1.4 · tracking -0.01em",
-   "css": "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;600;800&display=swap\" rel=\"stylesheet\">"
-  },
-  "standsInFor": [
-   "ABC Diatype",
-   "Khteka"
-  ],
-  "note": "A compact, warm grotesk set heavy with letters almost touching; small text stays in the same family at semibold. Suits music, events and culture pages where the type is the image.",
-  "seenIn": [
-   "aww-paul-kalkbrenner",
-   "opl-rendez-vous-franceclat",
-   "aww-monolog"
-  ],
-  "links": [
-   "https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;600;800&display=swap"
-  ],
-  "scale": {
-   "step-small": "clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem)",
-   "step-body": "clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem)",
-   "step-lead": "clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem)",
-   "step-head": "clamp(2rem, 1.3rem + 3.2vw, 4rem)"
-  }
- },
- "palette": {
-  "id": "lunar-grey-bronze",
-  "name": "Lunar and bronze",
-  "tags": [
-   "dark-neutral"
-  ],
-  "bg": "#111111",
-  "surface": "#1c1c1c",
-  "ink": "#f2f2f2",
-  "muted": "#8f8f8f",
-  "accent": "#a08672",
-  "accentInk": "#111111",
-  "note": "Soft black holds the page with panels one step lighter, white text and grey secondary lines, so photographs supply all the colour. Muted bronze goes on small markers and the one button only.",
-  "seenIn": [
-   "aww-21-hrs-on-the-moon",
-   "opl-dialkit",
-   "opl-lorenzo-bocchi-photography"
-  ]
- },
- "photos": {
-  "set": "architecture",
-  "title": "Architecture",
-  "note": "structure, lines, bridges, facades and building interiors",
-  "treatment": null,
-  "others": [
-   "sky-and-space"
-  ],
-  "photos": [
-   {
-    "id": 887,
-    "alt": "White apartment block facade with repeating balconies and windows",
-    "tone": "light",
-    "colours": [
-     "white",
-     "pale grey",
-     "soft red"
-    ],
-    "mono": false,
-    "calm": "none",
-    "quality": 5,
-    "ratio": 1.5,
-    "by": "Roman Kraft",
-    "page": "https://unsplash.com/photos/7sMHTVJ0OTA"
-   },
-   {
-    "id": 620,
-    "alt": "White arched bridge spanning grey water under a pale sky",
-    "tone": "light",
-    "colours": [
-     "white",
-     "pale grey",
-     "charcoal"
-    ],
-    "mono": true,
-    "calm": "bottom",
-    "quality": 5,
-    "ratio": 1.5,
-    "by": "Matthew Wiebe",
-    "page": "https://unsplash.com/photos/HeVd38MWnw4"
-   },
-   {
-    "id": 508,
-    "alt": "Tall pointed vaults and pale columns of a church interior",
-    "tone": "light",
-    "colours": [
-     "cream",
-     "warm grey",
-     "soft orange"
-    ],
-    "mono": false,
-    "calm": "none",
-    "quality": 5,
-    "ratio": 0.76,
-    "by": "Jeff Sheldon",
-    "page": "https://unsplash.com/photos/u3gES0SUsnI"
-   },
-   {
-    "id": 693,
-    "alt": "Red suspension bridge tower rising from fog above rugged cliffs",
-    "tone": "mid",
-    "colours": [
-     "rust red",
-     "grey",
-     "dark teal"
-    ],
-    "mono": false,
-    "calm": "left",
-    "quality": 5,
-    "ratio": 2.15,
-    "by": "Rob Bye",
-    "page": "https://unsplash.com/photos/bopC0sTGu-E"
-   }
-  ]
- },
- "motion": {
-  "id": "shutter-image",
-  "name": "Shutter image",
-  "description": "The one hero or showcase image opens from an edge with a clip-path over about 1.1 seconds while the picture inside settles from 1.12 scale to rest. Use it once, on the image that matters most; later images simply are there. Recipe: 'Image shutter' in references/motion.md."
- },
- "sections": [
-  {
-   "id": "list-day-tabs-banded-agenda",
-   "role": "list",
-   "name": "Day tabs, banded agenda",
-   "shape": "list",
-   "tags": [
-    "dense",
-    "type-led",
-    "colour-field"
-   ],
-   "directions": [
-    "editorial-report",
-    "product-performs",
-    "dense-tiles",
-    "colour-chapters"
-   ],
-   "needs": [],
-   "blueprint": "A two-line heading at clamp(36px, 4vw, 60px), first line in the soft ink and second in full ink, with the booking button on the same row at the far right. 56px below, left: a 150px column of stacked day tabs, each a filled block 150 by 64px with 6px gaps showing the weekday at 16px and the date at 13px; the active tab takes the darkest fill with inverted text. Right, from 190px to the right margin: the day's sessions as alternating tone bands, each 76px tall with an 8px radius and 4px gaps, the two tones one step apart. Inside a band, on fixed column starts: the time at 20px with tabular figures, 20px from the left; the title at 18px in medium weight at 22%, with a one-line note at 13px in the soft ink under it; speaker names right-aligned at 14px beside up to three overlapping 32px round portraits.",
-   "mobile": "The heading stacks above a full-width button. Day tabs become a horizontal row of equal filled blocks, sticky under the top edge. Each band stacks time over title over speakers with 16px padding and grows to fit; portraits sit at the band's top-right corner.",
-   "seenIn": [
-    "opl-builders-table",
-    "opl-select26"
-   ]
-  },
-  {
-   "id": "features-fixed-output-controls-in-text",
-   "role": "features",
-   "name": "Fixed output, live controls",
-   "shape": "pinned",
-   "tags": [
-    "ui-led",
-    "quiet"
-   ],
-   "directions": [
-    "split-stage",
-    "product-performs",
-    "quiet-instrument",
-    "editorial-report",
-    "colour-chapters",
-    "dark-room"
-   ],
-   "needs": [],
-   "blueprint": "A split the reader operates. Left, columns 1–6: a flat colour field that is position: sticky; top: 0; height: 100svh, edge to edge, holding one thing the product makes (a card, an email, a chart, a rendered page) centred at true size, about 420px wide, root marked data-ui. Right, columns 8–12: a reading column no wider than 44ch, with four or five capability blocks 50vh apart. Each block is a sentence at 28–32px, a paragraph at 17px, and directly beneath it one real control at interface size: a slider, a segmented choice, a toggle, a short text field. Operating a control changes the fixed output on the left at once, and changes persist, so by the last block the reader has configured their own. The section heading, two to four words at 40–44px, opens the right column, 72px from the top.",
-   "mobile": "The output sits in a sticky field at the top, 42svh tall, cropped to its most telling region, not shrunk. Blocks scroll beneath on the page ground: sentence at 22px, paragraph at 16px, control at full width with 44px targets. The field releases after the last block.",
-   "seenIn": [
-    "opl-dialkit",
-    "aww-cerebrium"
-   ]
-  },
-  {
-   "id": "showcase-headline-you-can-type",
-   "role": "showcase",
-   "name": "Headline you can type",
-   "shape": "statement",
-   "tags": [
-    "ui-led",
-    "type-led",
-    "poster"
-   ],
-   "directions": [
-    "sentence-as-layout",
-    "type-only-statement",
-    "product-performs",
-    "loud-flat-poster",
-    "dark-room",
-    "colour-chapters"
-   ],
-   "needs": [],
-   "blueprint": "The section's headline is an input. One line at clamp(48px, 8vw, 132px), tight tracking, flush left across columns 1–12, is a real `<input>` (root marked data-ui) with no border and no fill, prefilled with a believable two-to-five-word example of what a user gives the product: a search, a question, a date in words, a colour name. A solid caret block 0.08em wide blinks after the last character. 48px beneath, on the same left edge, the product's answer appears at true interface size, at most 560px wide: three result rows, one parsed value, or a swatch, updating as the visitor types. Bottom-left, three more examples at 17px act as plain text buttons that refill the line. The rest of the 88svh field is empty. If the text outgrows the line it scrolls inside the input; it never wraps.",
-   "mobile": "The input is set at 11vw on one line and scrolls sideways inside itself when the text runs long. The answer follows 28px below at full width and true size. The three examples become a wrapping row of filled blocks 44px tall beneath the answer; tapping one refills the line.",
-   "seenIn": [
-    "opl-shelf",
-    "opl-tiny-computer-co"
-   ]
-  },
-  {
-   "id": "about-founders-letter",
-   "role": "about",
-   "name": "Founder's letter",
-   "shape": "stack",
-   "tags": [
-    "quiet",
-    "type-led",
-    "object-led"
-   ],
-   "directions": [
-    "quiet-instrument",
-    "product-performs",
-    "page-is-the-object",
-    "split-stage"
-   ],
-   "needs": [],
-   "blueprint": "A letter in a centred column 520px wide with at least 160px of empty ground above and below. At the column's top-left, a round portrait 44px across. 28px below it, four or five short paragraphs at 16–17px with leading 1.55, each two to four lines and separated by one blank line, written in the first person. No heading. The sign-off is the writer's name at 22px in the text face's italic, with the role at 14px in the soft ink beneath it. One phrase in the letter may carry a flat marker-colour background. Variant for a page built as an object: the letter sits on a filled paper-colour sheet 640px wide with 60px padding on a contrasting ground, square corners, its bottom edge cut into small scallops with `clip-path`, and below a row of 5px round dots a tear-off strip 72px tall that carries the email address.",
-   "mobile": "The column takes the full width with 24px margins; text at 16px, portrait 40px. In the sheet variant the sheet spans edge to edge with 24px padding and keeps its shaped bottom edge; the tear-off strip stacks the email above a full-width button.",
-   "seenIn": [
-    "opl-mat",
-    "opl-heyclicky",
-    "opl-rafael-derolez-2026"
-   ]
-  },
-  {
-   "id": "cta-blank-in-the-sentence",
-   "role": "cta",
-   "name": "A sentence with a blank",
-   "shape": "statement",
-   "tags": [
-    "type-led",
-    "ui-led"
-   ],
-   "directions": [
-    "sentence-as-layout",
-    "product-performs",
-    "type-only-statement",
-    "one-motif",
-    "colour-chapters"
-   ],
-   "needs": [],
-   "blueprint": "The closing sentence has a gap in it, and the gap is the form. A sentence of five to eight words is set at about 6vw on two lines, flush left across columns 1–11; there is no separate heading. Where the reader's email (or name, or city) belongs, an `<input>` sits inline on the baseline: a filled block of the one-step tone, exactly one line-height tall and about 7em wide, with the placeholder in the same face and size in the softer ink, no border, and the page's radius or motif corner. The sentence's last word is the submit `<button>`, set in the same type on a block of the accent colour of the same height. Field and button use `em` units so they scale with the sentence. One line at 16px under the sentence, in the softer ink, says what happens after sending. Nothing else is in the section.",
-   "mobile": "The sentence is set at 10vw on two lines; the input drops to a line of its own between them at full width and one line-height tall, and the final word, as the button, ends the second line. The explaining line follows at 15px.",
-   "seenIn": [
-    "opl-shelf"
-   ]
-  },
-  {
-   "id": "footer-single-quiet-line",
-   "role": "footer",
-   "name": "A single quiet line",
-   "shape": "strip",
-   "tags": [
-    "quiet"
-   ],
-   "directions": [
-    "quiet-instrument",
-    "contact-sheet",
-    "product-performs",
-    "split-stage",
-    "dark-room",
-    "pinned-poster"
-   ],
-   "needs": [],
-   "blueprint": "No footer block at all. After at least 30svh of empty page ground, one baseline 30px above the bottom edge carries three items in the page's ordinary small text size (14–16px), the same size and weight as the navigation: at the left margin, what this is in three or four words; centred, two to five links separated by 24px of space; at the right margin, the year and a privacy link. Use a three-column grid (1fr auto 1fr) so the centre group is truly centred whatever the side lengths. No logo, no background change, no line above it, no columns. Links are in the full ink; the rest in the softer ink. If the page has a narrow text column, the three items may instead sit on that column's left edge as one wrapped line. The restraint only works if the page above has already made its invitation.",
-   "mobile": "Three short lines at 14px on the left margin with 8px between them: the description, the links on one wrapped line, then year and privacy. Links stay in the full ink. Leave 20svh of empty ground above and 24px below.",
-   "seenIn": [
-    "aww-studio-k95-3",
-    "aww-gil-huybrecht",
-    "opl-rows",
-    "opl-compile",
-    "opl-tiny-computer-co"
-   ]
-  }
- ],
- "references": [
-  {
-   "id": "opl-rows",
-   "name": "Rows",
-   "url": "https://rows.gg/",
-   "source": "One Page Love",
-   "kind": "saas",
-   "score": 7.5,
-   "idea": "Radical understatement: a product about simple lists is sold with a 27px headline, 12px copy and a column of small live demos, each proving one interaction.",
-   "mood": [
-    "quiet",
-    "dry",
-    "precise",
-    "warm",
-    "confident"
-   ],
-   "archetype": "left-statement-quiet",
-   "hero": "Warm off-white page, almost empty. Everything hangs on one vertical line 27% in from the left. A small striped-letter logo mark sits there near the top; 220px lower comes a two-line headline at only 27px (under 2vw), then three lines of 13px body about 370px wide, then a near-black rectangular button with 4px corners beside a text link with an arrow. A single grey sign-in link sits in the top-right corner; there is no navigation bar. More than 80% of the viewport is blank. At the bottom edge the first feature module peeks in: grey demo panel left, short text column right.",
-   "type": "Suisse Intl only, weight 450–500, tracking −0.04em. Headline 27px, feature headings about 16px on two lines, body 12px. Three sizes in total, no uppercase and no display moment; hierarchy comes from weight and empty space alone.",
-   "colour": "#f5f6f1 #e6e7e1 #1a191d #ffffff #c7372f #3aa56a — Warm paper off-white with slightly darker grey-green demo panels and near-black type; colour appears only inside the UI as priority dots, outlined status pills and one green or red action button.",
-   "imagery": "No pictures: small live-rendered fragments of the app (two or three white list rows with dots, status pills, avatars and a visible cursor) sit in flat grey panels of fixed 368px width with barely rounded corners.",
-   "layout": "One content block about 650px wide, offset left of centre, repeated down the page: 368px demo panel plus a 245px text column, top-aligned, separated by 200px or more of empty space. The logo mark sticks to the top-left corner on scroll. Footer is one line.",
-   "sections": [
-    {
-     "role": "features",
-     "description": "The repeating module: a flat grey panel roughly 368px wide and 120–190px tall holding a tiny mock list (white rows with 6px radius, a coloured numbered dot at left, task title, an outlined status pill, an avatar, a chevron) and often a cursor mid-action. To its right, 20px away and top-aligned, a medium-weight heading of one or two lines and two short paragraphs at 11–12px in a column only 245px wide. Modules never alternate sides; they stack with large gaps."
-    },
-    {
-     "role": "cta",
-     "description": "The closing block keeps the same narrow measure: a three-line paragraph at 13px, then the identical button and arrow-link pair from the hero, left-aligned on the text column's axis. After a long gap a single hairline spans the 650px block and under it sits one row of tiny footer text: brand line at left, six links and a copyright strung along the right."
-    }
-   ],
-   "steal": [
-    "Set the headline at near-body size (under 2vw) and let empty space, not scale, give it importance.",
-    "Explain each feature with a tiny cropped fragment of real UI in a fixed-width flat panel, one interaction per panel, with the cursor left visible.",
-    "Hang the whole page on one off-centre left edge and never break it, logo and footer included."
-   ]
-  },
-  {
-   "id": "opl-typewave",
-   "name": "Typewave",
-   "url": "https://typewave.blendmodes.com",
-   "source": "One Page Love",
-   "kind": "dev-tool",
-   "score": 7.2,
-   "idea": "A plugin about type scales sold on a near-black page where flat saturated fields (orange, lime, blue) act as stages for the plugin's own dark interface.",
-   "mood": [
-    "dark",
-    "tidy",
-    "friendly",
-    "product-focused"
-   ],
-   "archetype": "centred-statement-media-below",
-   "hero": "Near-black field. Nav row at the top: pixel-block logo and wordmark left, four plain links centred (one carrying a tiny lime tag), a cream rectangular button with a Figma glyph right. The headline sits centred around mid-height: three lines at about 6.7vw, medium weight, off-white, with the third line recoloured pale lime. Below it a three-line 18px paragraph held to about 45% of the width, then a small cream button repeating the nav action. About 150px lower, the top edge of a flat orange slab, 70% of the viewport wide with barely rounded corners, peeks over the fold; it holds the plugin window.",
-   "type": "Roobert throughout: weight 500 for the 96px headline with slight negative tracking, 16-18px body, 28px card headings, about four sizes in all. Sentence case everywhere; the only emphasis device is recolouring one headline line.",
-   "colour": "#0f0f0e #191918 #e6e3da #f88616 #e4f283 #1463ff — Warm near-black ground with cream text. Orange, lime and electric blue never colour paragraphs; they only fill the rectangles behind product screenshots and the matching step-number chips.",
-   "imagery": "Dark plugin windows with a soft drop shadow, floated centred on flat saturated rectangles (orange, lime, blue, one pink); the rectangles are near square-cornered and inset inside a slightly lighter dark card.",
-   "layout": "Centred hero, then a 1000px container of full-width dark cards, each split one-third text and two-thirds colour stage. Export features alternate text and tile left to right. A small two-button bar stays pinned bottom-centre.",
-   "sections": [
-    {
-     "role": "how-it-works",
-     "description": "Three stacked cards in a slightly lighter black, each about 1000 by 350px. Left third: a 16px square number chip in the card's accent colour at the top, a three-line 28px heading under it, and a grey 12px paragraph pushed to the card's bottom edge, leaving a tall gap between. Right two-thirds: a flat colour rectangle inset 16px with the dark plugin window centred and shadowed on it. Cards differ only by hue: lime, orange, blue."
-    },
-    {
-     "role": "intro",
-     "description": "Between demo blocks a single left-aligned sentence at about 36px sits alone on black with some 300px of space above and below. Its words light up from dark grey to cream one after another as you scroll, so mid-capture the sentence trails off into the background. The pinned two-button bar is the only other element on screen."
-    },
-    {
-     "role": "features",
-     "description": "Export options as alternating rows. One side: a square colour tile (lime, then orange) holding a code-panel screenshot. Other side: a 24px heading, a five-line grey paragraph and a row of three or four small monochrome tool logos. Tile and text swap sides on each row, and the tiles are staggered vertically so one row's tile overlaps the next row's text band."
-    }
-   ],
-   "steal": [
-    "Stage dark UI screenshots on flat saturated rectangles instead of on the page background, so the colour does the branding and the UI stays legible.",
-    "Pin the paragraph to the bottom of a tall card and the heading to the top so the gap between them becomes the card's composition.",
-    "Colour-key each step: the number chip and the stage behind the screenshot share one hue and nothing else on the card uses it."
-   ]
-  },
-  {
-   "id": "opl-the-content-architecture",
-   "name": "The Content Architecture",
-   "url": "https://www.contentarchitecture.dev/",
-   "source": "One Page Love",
-   "kind": "dev-tool",
-   "score": 7.9,
-   "idea": "The product name becomes a rotating vortex of concentric text rings that you scroll into, and the sales argument is a ticking hours-lost counter beside an itemised receipt.",
-   "mood": [
-    "technical",
-    "wry",
-    "tactile",
-    "precise"
-   ],
-   "archetype": "split-text-media",
-   "hero": "Exact 50/50 vertical split. The left half is warm cream with a left-aligned stack starting a third of the way down at an 80px margin: one-line mono caps label, a two-line medium-weight sans headline at only 3vw, a four-line grey paragraph capped near 510px, then a black button notched into two joined halves beside a pale grey secondary. A mono scroll cue with a target glyph sits bottom-left. The right half is a charcoal canvas filled with concentric rings of white mono caps spiralling round a centre and cropped by the viewport. A dark boxed nav with a marquee strip floats top-centre across the seam; a minimap thumbnail sits top-right.",
-   "type": "GeistMono carries two thirds of the page: caps labels, nav, buttons and receipt rows with dot leaders. GeistSans 500 sets quiet 43px sentence-case headlines with zero tracking. The only loud size is a counter numeral near 18vw, so three sizes in total.",
-   "colour": "#f1eee7 #232323 #dedede #f28a1c #000000 — Warm cream and charcoal trade places section by section. A single small orange dot marks the paid action on the button and nav; no other hue appears.",
-   "imagery": "No photographs. Canvas-drawn concentric rings of the product name in white mono over a faint dotted grid, later dissolving into scattered glyphs and inverted text fragments. Full-bleed and cropped by the viewport.",
-   "layout": "An 80px left margin holds every text block. Headlines stay small at the top-left of tall cream sections while one oversized element (vortex, numeral, receipt) takes the opposite side. Floating nav, minimap and a help tab stay pinned throughout.",
-   "sections": [
-    {
-     "role": "other",
-     "description": "Scroll transition between hero and first section: the camera pushes into the text vortex, rings scaling until letters are hundreds of pixels tall and cropped at every edge, the dotted grid showing between them. A solid cream disc opens at the centre and grows until it becomes the next section's background. A full-screen wipe built from the hero's own artwork, with the nav still floating above."
-    },
-    {
-     "role": "stats",
-     "description": "Pinned cream section. Top-left, a three-line 43px headline with a two-line grey note. Bottom-left, a tilde-prefixed numeral about 18vw tall counts from 00 to 24 as you scroll, with a mono caption and small chip beneath. On the right a receipt column framed by dashed rules fills line by line: mono caps rows grouped by day, dot leaders running to right-aligned hour values, the newest row inverted white on black."
-    },
-    {
-     "role": "footer",
-     "description": "The cream page ends in a band where the vortex returns as debris: tiny mono fragments, some inverted in black boxes, scattered sparsely and thickening upward into the dark ring pattern. Below it a plain footer: logo mark with a stacked two-line name on the left, two short mono caps link columns on the right, and a builder credit bottom-right."
-    }
-   ],
-   "steal": [
-    "Split the primary button into two notched halves so a two-word action reads like a physical ticket, with one orange dot as the page's only accent.",
-    "Argue the cost of doing nothing with a pinned counter: a huge numeral ticks up while itemised mono rows with dot leaders append beside it.",
-    "Build the hero graphic from the brand name set on concentric rotating rings, then reuse it as the scroll transition and as footer debris."
-   ]
-  }
- ],
- "scenes": []
-}

package/.taste-skill/notes.md

@@ -1,84 +0,0 @@
-# Concorde docs — notes de direction
-
-## Brief (lecture)
-Refonte visuelle de la doc de Concorde, surtout la home. Ambiance demandée : rétro, suisse,
-légèrement brutaliste ; vieille documentation informatique élégante (IBM, Braun).
-Contraintes : n'écrire l'interface qu'avec des composants Concorde (sonic-*), Lit + Tailwind,
-garder contenu et fonctionnalités (menu, sommaire, pager, démos vivantes).
-Action unique : « Get started ».
-
-## Inventaire du sujet (ce qui n'appartient qu'à Concorde)
-1. Le nom : Concorde, l'avion supersonique franco-britannique (1969–2003), aile delta.
-2. Mach 2.04 en croisière, 18 300 m d'altitude, Paris CDG – New York JFK en ~3 h 30.
-3. Le nez basculant (droop nose) et la silhouette en flèche ; le logo de la lib en reprend la vue de dessus.
-4. L'écorché technique du Concorde déjà dans le projet (public/img/concorde_seuil.png, version inversée).
-5. Les artefacts imprimés de l'aviation : carte d'embarquement, manuel de vol, horaires, billet.
-6. Supersoniks : billetterie, ~100 sites (salles, festivals) servis par une seule bibliothèque depuis 2022.
-7. Le préfixe de toutes les balises : sonic-* (sonic-button, sonic-fetch…), 41 composants (29 UI, 12 fonctionnels).
-8. La pile : Lit, TypeScript, Vite ; marche sans bundler, jusque dans du PHP.
-9. dataProvider / formDataProvider : l'état circule dans le balisage.
-10. SDUI : un écran décrit en JSON rendu avec les mêmes composants.
-11. Version 5.1, commande d'installation `npx @supersoniks/create-concorde-ts-starter`.
-12. Référence d'ambiance : manuels IBM des années 60–70, catalogues Braun (Rams), grille suisse.
-
-## Argument (une ligne par section)
-- Hero — Concorde est une bibliothèque de web components pour toutes les surfaces. Preuve : l'écorché, Get started, la commande.
-- Index — 41 composants prêts. Preuve : la liste complète, en liens.
-- Capacités — Le HTML suffit : état, API, thème, SDUI, agents. Preuve : six démos vivantes.
-- Démo — L'état circule dans le balisage. Preuve : la carte d'embarquement vivante.
-- Origine — Construit pour ~100 sites de billetterie. Preuve : l'histoire Supersoniks, chiffres réels (100 sites, 41 composants, 2022).
-- Fin — Construire son premier composant. Preuve : deux actions.
-
-## Direction
-Choisie : product-performs — le produit EST des composants vivants ; la doc en a déjà de vrais (carte d'embarquement, thèmes, SDUI).
-
-## Écarts à la fiche
-- Palette : la fiche donne « Lunar and bronze » (fond noir). La demande fixe un vieux manuel IBM / Braun clair.
-  Proportions gardées (un fond, une encre, un accent sur l'action, un aplat de scène), couleurs prises du sujet :
-  pierre #e9e8e4, encre #111, orange signal Braun #e8501c. Mode sombre : fond #121212, encre #ecebe7, même orange.
-- Section « list » : pas de portraits (aucun intervenant), les bandes listent les composants.
-- Section « about » : pas de portrait (aucune photo de l'équipe) ; signé « L'équipe Supersoniks ».
-
-## Idée
-Sur cette page, **le Concorde et sa carte d'embarquement** deviennent **le fragment vivant posé sur une scène orange
-découpée en aile delta** : la doc se lit comme un manuel de vol, et chaque capacité est un instrument qu'on manipule.
-Test du concurrent : « Shoelace » ou « Lit » dans la phrase ne marche pas — ni avion, ni billetterie.
-Live thing : le visiteur tape son nom et choisit sa destination, la carte d'embarquement se met à jour (vrais
-composants sonic-* liés par formDataProvider) ; plus bas, il tape un nom de composant et le voit rendu.
-
-## Copy deck
-H1 : « Web components / for every stack. »
-Sous-titre : Concorde is a Lit library of 41 components that bind data, call APIs and theme themselves from plain HTML — in React, Vue, PHP or a static page.
-Action : Get started.
-Index : « 41 components, one tag each. » + bouton All components.
-Capacités : « Plumbing in attributes. » — 4 blocs (état, thème, SDUI, stacks).
-Showcase : « Type a component. » + champ géant prérempli « button ».
-Origine : photo 1968 + lettre (4 paragraphes, première personne du pluriel), signée L'équipe Supersoniks.
-Planches : prototype 001, poste de pilotage, cabine 1984, train d'atterrissage.
-Fin : « Take [MyProject] / supersonic. » — le dernier mot copie la commande.
-Pied : une ligne.
-
-## Critique
-ROUND 1
-Seen in one second: « Web components for every stack. » en noir massif, une scène orange découpée en aile delta qui porte une vraie carte d'embarquement.
-Idea (one sentence): la doc se lit comme un manuel de vol ; chaque capacité est un instrument qu'on manipule, entre des planches d'archives du Concorde.
-Live thing: carte d'embarquement (nom, destination, first class) dans le hero ; panneau de vol réglé par 4 contrôles ; champ « <sonic-…> » qui rend le composant tapé ; nom de projet → commande copiée.
-Layout words by section: hero=titre haut-gauche + scène orange en biais / index=onglets + bandes alternées / instruments=champ noir collant + colonne de contrôles / typer=champ géant / story=photo pleine largeur + lettre en deux colonnes + 4 planches / takeoff=photo 7/5 + formulaire / footer=une ligne + crédits.
-Scores: design 7.5 · usability 8 · creativity 8 · content 8 → overall 7.8.
-Caps applied: aucun (0 FAIL, 6 vraies photos, pas d'eyebrow ni de numérotation).
-Top three problems (most visible first):
-1. desktop-page-02 : la ligne « <sonic-button> » du typer est cassée — le champ est en graisse normale dans un pavé gris trop haut, décalé du « <sonic- » en 800. Fix : graisse/interlettrage hérités, hauteur à 1em, fond à un seul pas de ton.
-2. desktop-page-02 : sous le typer, une demi-page vide ; la réponse est petite. Fix : réponse posée sur un aplat (pas de ton) à côté des exemples, en deux colonnes.
-3. desktop-fold : le coin bas-gauche du hero est vide sous les actions. Fix : la commande d'installation (vrai code) sous les actions ; mobile : l'index fait 3,5 écrans de bandes, compacter les bandes sur téléphone.
-
-ROUND 2 (après retours utilisateur : typer et planches retirés, tableau des départs, JSON visible, commande en sonic-code)
-Seen in one second: titre noir massif, scène orange en aile delta avec une carte d'embarquement vivante.
-Idea: inchangée.
-Live thing: carte d'embarquement (hero) ; tableau des départs piloté par 4 contrôles ; nom de projet → commande.
-Layout words by section: hero=titre + scène / index=onglets + bandes / instruments=champ noir collant + contrôles / story=photo 1969 pleine largeur + film + lettre / takeoff=photo 1968 + champ + code / footer=une ligne + crédits.
-Scores: design 8 · usability 8 · creativity 8 · content 8 → overall 8.0 ; cap appliqué : 3 vraies images (2 photos + 1 film) < 4 → design plafonné à 6,5 → overall 7,4.
-Caps applied: few-pictures (décision de l'utilisateur de retirer la galerie).
-Top three remaining:
-1. Mobile : l'index déroule 29 bandes (≈3 écrans) ; envisager un repli ou 2 colonnes compactes.
-2. Desktop : coin bas-gauche du hero encore calme sous la commande.
-3. Inspecteur aveugle au shadow DOM (blank-gap mobile, first-action) : artefacts de mesure, visibles corrects sur captures.