Every part, in both modes.

<Button>Start building</Button>
<Button variant="quiet">Read the notes</Button>
<Button variant="ghost">Skip for now</Button>
<Button loading>Starting</Button>
<Button as="a" href="https://tally.so/r/J9aR5r" size="lg">Request a Call</Button>

• One primary per view. Laser marks the one thing to do next. A second action is quiet, a third is ghost (rule 5).
• States are CSS. Hover adds a faint light edge; pressed drops 1px with a dark inset (accent-press, quiet-press); focus is the double ring, 2px accent inside 2px partner, with a 2px gap in --focus-gap (default surface-0; set it to the card color when a button sits on a card); disabled is surface-3 with text-3, no red (rule 14).
• Loading keeps the label, adds the Sweep B head and sets aria-busy. Do not swap the label for a spinner.
• Sentence case labels, verbs first. On g8n.ai the call button reads Request a Call and opens the inquiry form; it never implies a confirmed booking.
• The consumer provides the label, an onClick or href, and type="submit" inside forms.

<Badge>New</Badge>
<Badge variant="live">Live</Badge>
<Badge variant="draft">Draft</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="success">Sent</Badge>
<Badge variant="info">Note</Badge>
<Badge variant="warning">Check</Badge>

• new is accent-fill with accent-ink; live is accent-quiet with quiet-ink. Both are brand labels, not status.
• error (an error border), success (done is the same badge), info and warning always carry an icon and a word; the color never carries the meaning alone (rule 10). The three status hues use success, info and warning with their -text and -tint, and only for status.
• Never smaller than 11px (fs-badge), never lighter than bold.

<Menu label="Actions" items={[
  { id: "rename", label: "Rename", icon: "edit", shortcut: "R", onSelect: rename },
  "separator",
  { id: "delete", label: "Delete draft", icon: "trash", onSelect: remove },
]} />

• Keyboard: arrows move, Home and End jump, Enter and Space choose, Esc closes and returns focus. A click outside closes it.
• The list is surface-1 on light and surface-2 (Plate) on dark, with shadow-lg. Hover and focus rows are surface-3.
• Destructive items keep the same colors: no red text outside errors. Confirm a destructive choice with a Dialog.

<Logo size={40} />
<Logo orientation="stacked" size={48} />

• Use it for headers, footers of documents and title slides. In tight spots use the wordmark or the mark alone, never a squeezed lockup.
• Keep one node diameter of clear space around it.

<Mark size={48} />                     // follows the theme
<Mark form="roundel" size={64} />      // the badge
<Mark variant="mono-ink" size={32} />  // one color, for light grounds

• The shape is the 1.1 System mark, unchanged. Never stretch, rotate, recolor the line, or add a second Ember node.
• On dark (auto or dark): Frost rings, Void node fills, a soft Scanner glow under the line, a faint Ember halo. On light: Ink rings, Sheet fills, an Ink outline on the Ember node, no glow (Ember alone is 2.9:1 on Paper).
• One-color files: mono-ink for stamps, receipts and light grounds; mono-frost reversed out of photos and dark grounds.
• Clear space is one node diameter. Minimum: glyph 24px bare (16px only as the tab icon on its tile), roundel 24px.
• Screen readers hear "Generation AI". The uploaded files in assets/mark/ are the same drawing for places React cannot reach.

<Wordmark size="lg" />
<Wordmark size={20} tone="muted" />

• G8N•AI is the written mark everywhere it is seen; "Generation AI" is the spoken name, page titles and alt text. The component sets role="img" and aria-label="Generation AI".
• No spark, no outline, no other colors. For the mark and wordmark together use <Logo>.

<AccentHeadline accent="collapsed.">The barrier to building has</AccentHeadline>
<AccentHeadline as="h3" size="28px" underline="curve" accent="Not to you.">Every follower you have belongs to the platform.</AccentHeadline>

• Laser text is display only: 24px or larger, or 18.7px bold. Below that, emphasize with italic in text-1.
• One phrase per headline. The italic carries the emphasis, so the sentence reads without the color (red-blind viewers).
• In email and in 100px thumbnails, drop the red: italic only.

<Eyebrow>Signal · Issue 04</Eyebrow>
<Eyebrow tone="ink">The AI Workflow Audit</Eyebrow>

• The red is the tick, never the words: small Laser text fails on dark (rule 1). The same pattern is used on light so the component never changes between modes.

<QuoteCard label="SIGNAL / 04" accent="Not to you.">Every follower you have belongs to the platform.</QuoteCard>

• Always the dark tile: the feed test showed it is the only treatment that holds in both dark and light feeds. The edge keeps it visible in a dark feed.
• At most one italic Laser phrase, and only where it shows at 24px or more. Never in 100px thumbnails. Body text is Mist; lit figures are Amber.
• Type scales with the card's width; render it at the export size (1080 × 1350) when making the image.
• 1.x variants (ink, board, paper) all render the dark tile now.

<Stat value="19%" unit="slower" label="They felt faster with AI. Measured, they were slower." sublabel="Source: [study]" />

• Numbers are evidence, never decoration. Cite the study in sublabel when the figure comes from one; never invent a figure.
• The unit is a lit word: Burnt on light, Amber on dark (rule 9). When a figure must pop on light, set Ink on an Ember highlight instead of Ember text (rule 17).

<Avatar src="/ahad.jpg" name="Ahad Amdani" />
<Avatar name="Ahad Amdani" size="lg" />

• Never use a stock or generated face. Until a real photo is approved, use initials.

<Table caption="Workflows by hours a week" numbered columns={[
  { key: "w", header: "Workflow", sortable: true },
  { key: "h", header: "Hours/wk", mono: true, align: "right" },
]} rows={rows} sort={sort} onSort={setSort} />

• Label sample rows as samples; never show invented client data as real.

<Alert title="Your Map is on its way">It arrives within five business days of the session.</Alert>
<Alert variant="danger" title="The form did not send">Check your connection and send it again.</Alert>

• Only errors are red (rule 18). danger gets a 2px error border and the word Error. Success, info and warning take their status hue (success, info, warning) on the border, the icon and the word, and are still told apart by that icon and word.
• info and success use role="status"; warning and danger use role="alert".

<EmptyState title="No workflows mapped yet." action={<Button size="sm">Add a workflow</Button>}>
  Add the first recurring task and the Map starts to fill in.
</EmptyState>

• State the situation and the next step. No apology, no illustration of sadness, no emoji.

<Skeleton label="Loading your Map…" />

• It does not shimmer. If the wait is long, pair it with a Sweep. role="status" announces the words.

<Spinner label="Loading your Map…" />

• role="status" with a visually hidden label. Under reduced motion it stops turning.

<Sweep label="Loading your notes" />
<Sweep variant="frost" label="Refreshing the map" />
<Sweep value={60} label="Uploading 3 of 5" />
<Sweep variant="ambient" height={6} />

• Sweep by context (rule 11). Sweep B (signal), Ember with a Frost core, is the default for loading, progress and the signal, at dur-sweep (1.6s). The frost head is for loading on a screen where Ember already marks a result, so two lights do not compete. Sweep A (ambient) is decoration at dur-sweep-ambient (2s), under display type only, and hidden from assistive tech. Never a sweep beside body text.
• On light the track is a dark slot (well with a rail edge): light never glows on paper. On dark it is surface-1 with a line edge.
• Determinate progress fills from Scanner to Laser with an Ember head and a Frost tip at the leading edge (rule 15).
• Reduced motion: the head holds still in the middle. Always say in words what is happening next to it (rule 16).
• Email gets a GIF whose first frame has the light in the middle; print gets an Ember point with a white ink core.

<div className="g8n-toast-region" aria-live="polite">
  <Toast kind="success" action={{ label: "Undo", onClick: undo }} onDismiss={close}>Inquiry sent. Ahad replies by email.</Toast>
</div>

• Ink on light pages, Plate on dark ones.
• Only errors are red (rule 18): the 2px error border. The status word carries the meaning for everyone.
• It does not time out or position itself: put it in a .g8n-toast-region with aria-live="polite" that is on the page from load, so new toasts are announced, and remove it on dismiss. Keep anything important on the page too.
• A request is not a booking: say "Inquiry sent", never "Call booked".

<Checkbox label="Email me the Map when it is ready" />
<Checkbox label="I have read the terms" error="please confirm" />

• Focus is the double ring. Errors print an icon and the word Error. Disabled is surface-3 with a line border and text-3 label.

<Input label="Email" type="email" hint="Ahad replies to this address." />
<Input label="Email" defaultValue="ahad@g8n" error="enter a full email address" />

• Focus turns the border accent and adds a 2px partner ring. Invalid fields get the error border.
• Errors carry an icon and the word Error (rule 6); error renders both and wires aria-describedby. The red border alone never carries the message.
• The label is wired with htmlFor; an id is generated when none is passed. Placeholders are text-3 and never replace the label.
• On the inquiry form, keep the live line under the button: submitting does not commit anyone to paid work and does not subscribe them to a newsletter.

<RadioGroup name="start" legend="How would you like to start?" defaultValue="fit"
  options={[{ value: "fit", label: "Free fit conversation" }, { value: "audit", label: "The $297 audit" }]} />

• Native radios give the full keyboard contract. Errors print an icon and the word Error.
• Where the free conversation and the paid audit both appear, present them as alternatives; never claim the paid audit performs better.

<Select label="What kind of help?" placeholder="Choose one" options={[{ value: "find", label: "Find what to automate first" }]} />

• Same focus, error and disabled rules as Input.

<Switch label="Weekly digest" defaultChecked />

• Use it only for settings that apply immediately; use a Checkbox inside forms that are submitted.

<Textarea label="The problem" hint="A real example is more useful than a perfect explanation." />

• Same focus, error and disabled rules as Input.

<Card>…</Card>
<Card surface="flat">…</Card>
<Card surface="well"><Mark size={96} /></Card>

• raised: surface-1, a line hairline and shadow-md, radius-lg.
• flat: transparent with an edge outline.
• well: well (Void) and data-theme="dark" on the card, so everything inside uses the dark tokens. This is where the mark at hero size, the trace and the sweep go on a light page (rule 8).
• glow adds shadow-glow, the soft Scanner glow; it is empty in the light theme because light never glows on paper.
• Cards set --focus-gap to their own surface so focus rings inside them stay clean.

<Accordion items={[{ id: "prep", summary: "Do I need to prepare anything?", content: "Just the intake, honestly answered." }]} />

• Questions are text-1 bold; answers text-2 at 13px. The summary gets the double focus ring.
• Use it for FAQs. Answers that need new wording are drafted by Alfred and approved by Ahad; mark them until then.

<SiteFooter note="A Def Launch, LLC brand." columns={[
  { title: "Work with Ahad", links: [{ label: "The AI Workflow Audit", href: "https://audit.g8n.ai" }] },
]}>© {year} Def Launch, LLC</SiteFooter>

• The six-month service is "Fractional technology partner" everywhere. Never link tools.g8n.ai or engagelive.io as working destinations.
• The consumer provides real URLs; leave a link out rather than invent one.

<SiteHeader
  links={[{ label: "The audit", href: "https://audit.g8n.ai", current: true }, { label: "Coaching", href: "https://coaching.g8n.ai" }]}
  cta={{ label: "Request a Call", href: "https://tally.so/r/J9aR5r" }} />

• The call to action is a quiet button: the page's one primary button lives in the hero (rule 5). On g8n.ai it reads "Request a Call" and opens the inquiry form; never a calendar, never "confirmed".
• The current page is text-1 bold with a 2px Laser underline and aria-current="page".
• Below 768px the links fold into a Menu button that opens a panel. Give the page's main element the id the skip link targets.

<Tabs label="The audit" tabs={[{ id: "overview", label: "Overview", content: "…" }]} />

• Arrow keys move focus, Enter and Space choose (manual activation, roving tabindex).

<Dialog open={open} onClose={() => setOpen(false)} title="Send this inquiry?"
  description="Ahad will review it and reply by email; submitting does not commit you to paid work. You will not be subscribed to a newsletter."
  footer={<><Button variant="ghost" size="sm">Keep editing</Button><Button size="sm">Send inquiry</Button></>} />

• The browser owns the focus trap, Esc, the top layer and returning focus. Keep it short: one question, one primary action.

<Tooltip content="Delivered within five business days"><button>When does the Map arrive?</button></Tooltip>

• Dismissible with Esc, hoverable and persistent (WCAG 1.4.13). Never put the only copy of important information in a tooltip.