If we ship it, we own it.

Brand book

• Using the system
• Content fundamentals: how G8N•AI writes
• Visual foundations
• The twenty rules
• The mark
• Charts
• Iconography
• Imagery
• Surfaces
• Governance

G8N•AI (read "Generation AI") is an Ahad Amdani brand that helps people end AI overwhelm: cut through the noise and build what matters. This system is the single source for every G8N•AI surface: the g8n.ai offer pages, product UI (Pulse, the Discord bot, the course engagement app), Substack, social images, email, print and the AI Opportunity Map PDF. Version 2.0.0, "Scanner": one dark-first identity in two modes. CHANGELOG.md has what changed from 1.2 and the map from every 1.x token name to its 2.0 name.

Using the system

• Load order: link styles.css (it imports tokens.css and components/bundle.css inside @layer g8n, so a page's own styles win), then React and ReactDOM 18, then components/bundle.js, which assigns window.G8NAIDesignSystem_1a8d9d. Pages that do not use React still use the tokens and the g8n-* classes. Repository-specific: the npm package @g8n-ai/design-system is consumed by import "@g8n-ai/design-system/styles.css" plus named ESM imports (import { Button } from "@g8n-ai/design-system") and ships no window global or components/bundle.js.
• Themes are an attribute. data-theme="dark" or data-theme="light" on any element switches every role token inside it; with no attribute the page is light. A dark hero band or a well inside a light page is one attribute, not a second stylesheet.
• Ask for a role, never a hex. Components and pages use role tokens (surface-0, text-1, accent, lit-text…). The named colors (laser, void, paper…) exist for illustration, print and the places a role does not fit.
• Which mode where. Dark is the brand's home: product UI, social images, hero bands, the welcome page, slides. Light is for long reading: the g8n.ai offer pages (Scanner light with a dark top band), Substack posts, forms, the Map PDF. deflaunch.com is the parent company's site and keeps its own look; G8N•AI appears there as a Scanner window (guidelines/surfaces.md).
• Components: Button, Badge, Card, Eyebrow, Input, Mark, Stat, Sweep, Wordmark, AccentHeadline, Logo, QuoteCard, Accordion, Alert, Avatar, Checkbox, Dialog, EmptyState, Menu, RadioGroup, Select, SiteFooter, SiteHeader, Skeleton, Spinner, Switch, Table, Tabs, Textarea, Toast, Tooltip. Each has a README with what the consumer provides; sources are in components/src/.
• Assets: the mark kit in assets/mark/ (SVG and PNG: glyphs, roundels, app and tab icons, avatars, wordmark), the chalk illustrations in assets/illustrations/.

Content fundamentals: how G8N•AI writes

The voice is a builder talking plainly to other builders. Confident, declarative, a little contrarian. Short sentences. No hype words, no emoji, no exclamation-point energy.

• Person: Speaks to "you" directly; uses "I" for lived experience ("What shipping daily through monk mode actually taught me"). Personal: a single builder's account, not a corporate "we."
• Casing: Sentence case everywhere: headlines, buttons, labels. The one fixed exception is the call button label Request a Call. The only caps are the wordmark, tracked eyebrows and Courier labels, series numbers ("01", "02"), badges, and the occasional all-caps stat word ("19% SLOWER") for punch.
• Sentence shape: Declarative truths, often setup and reversal: "They felt faster with AI. They were 19% slower." / "Motivation got me started. By week two it was gone." The reversal is the hook.
• Tone: Calm and certain, not loud. States hard truths without ranting: "Every follower you have belongs to the platform. Not to you."
• Punctuation: Full stops inside short headlines are deliberate ("has collapsed.", "Not to you.").
• Spelling: American English.
• Emoji: None. Ever. The only brand glyph is the wordmark's middle dot •. The ✦ spark is retired.
• Numbers: Evidence, never decoration. A stat earns its place ("1,000+ commits", "19% slower"). Cite the source for a study. Never invent a figure, a result, a testimonial or a client name; use a marked placeholder until the real one exists.

Ownership over disclosure (the AI principle). G8N•AI is openly AI-driven and makes no apology for it: "If we ship it, we own it." The tool gets neither the credit nor the blame; the maker is accountable for the work. Never hedge or disclaim AI use; never apologize for or pre-empt criticism of AI. Full text: guidelines/voice-ownership.md.

Spoken and written brand. Written and visual: G8N•AI, everywhere it is seen. Spoken, in page titles, in alt text and in any accessible name you write (aria-label): "Generation AI" (never "G8N bullet AI"). The Wordmark, Logo and Mark components already announce "Generation AI"; where the mark appears as display type outside them, give it that accessible name. The domain is said "G-eight-N dot AI". Locked opener: "Welcome to Generation AI at G8N•AI," then the surface. Handles @G8N, fallback @GenerationAI. Full text: guidelines/spoken-brand.md.

Offer wording. The call button on every g8n.ai page reads Request a Call and opens the inquiry form; a request is not a booking, so nothing implies a confirmed time. The inquiry form always says that submitting it buys nothing and subscribes to nothing. The audit's commitments are identical everywhere: a 60-minute session, the Map within five business days, a PDF Map, a Loom recording, $297. The six-month service is "fractional technology partner". New or changed marketing wording is drafted by Alfred and approved by Ahad; until then the spot carries a visible marker. The full list is in guidelines/surfaces.md.

Examples to imitate: "6 products. 60 days. One system." · "The barrier to building has collapsed." · "Map first. Then build." Don't: marketing-speak ("revolutionary", "unlock", "supercharge"), emoji, ALL-CAPS shouting (except a single stat word), filler.

Visual foundations

The idea: many tools, one path, one outcome. A dark board. Many inputs in Frost. One Laser path, with a soft Scanner glow under it. One Ember outcome. Red is the path; Ember is the result; everything else is quiet.

Color

• Three lights, three meanings. laser (#BC2525) is the primary: the main button, the path, the 8 and the dot, focus, italic display emphasis. scanner (#8C1B1B) is its deeper shade: the quiet button and the glow. ember (#D97706) is the outcome, and it is a shape: the mark's end node, the bulb, the one lit series, the sweep head. Red means the path, and in UI it also means an error; Ember means the result. Neither is used for anything else. Moss, Tide and Brass are the status hues, used only for status.
• Neutrals by name. Dark: void page, deck cards, plate raised panels and menus, rail rails, hover rows and disabled fills; frost, mist, fog text. Light: paper page, sheet cards and menus, tray raised panels, shelf hover rows and disabled fills; ink, slate, ash text. Roles map them: surface-0 to surface-3, line, edge, text-1 to text-3.
• Lit words. A lit word (a unit, a lit figure, the lit label in a chart) is lit-text: amber on dark, burnt on light. Ember is never text on light (2.9:1 on Paper). To make a figure pop on light, set Ink on an Ember highlight (5.7:1).
• Partners. Every Laser line has a partner: Frost on dark, Ink on light (nodes, arrowheads, a caption). It carries the shape for red-blind viewers, for whom Laser on Void drops to 2.3:1.
• Light never glows on paper. In light mode, anything that gives off light (the mark at hero size, the trace, the sweep, hero bands) sits in a well with data-theme="dark". Inline lines on light go plain.
• Status. Only errors are red: a 2px error border with an icon and the word Error. Success, info and warning have their own hues, success (Moss), info (Tide) and warning (Brass), each with a -text and a -tint, used only for status and always with an icon and a word. New and Live badges are brand labels, not status.
• Contrast. Every text role passes 4.5:1 on all four surfaces in both themes (the usage note on each token gives the lowest pair). Laser text is display-only: 3.2:1 on Void, enough for 24px or 18.7px bold and for lines.

Type

All type is email-safe: Georgia, Verdana and Courier New come from the reader's machine. The system ships no font file; Geneva is named in the Verdana stack as a fallback for machines that have it.

• Georgia (font-display) for headlines and big statements: bold, tracked ls-tight, leading 1.05 to 1.15. Emphasis is italic regular, and in Laser only at 24px and up.
• Verdana (font-body) for body and UI: regular and bold, leading 1.5 for UI, 1.65 for reading (t-body).
• Courier New bold (font-mono) for labels and numbers: captions, series markers ("G8N•AI / SIGNAL / 04"), table headers, figures in tables and charts (t-label, t-figure, tracked ls-label).
• Eyebrows are 12px Verdana bold capitals tracked ls-eyebrow, in text-3, after a 28px Laser tick (t-eyebrow). Badges are 11px bold capitals (t-badge), the smallest text in the system.
• The wordmark is Verdana bold tracked ls-wordmark; the 8 and the dot are Laser.

Space, shape and depth

• Spacing: a 4px base (space-1 to space-9); generous and calm. Layout: breakpoints 640, 768, 1024, 1280; a 12-column grid (.g8n-grid) that collapses to 6 and 2; .g8n-container up to container-max; reading width measure.
• Radii: radius-md (12px) for buttons, fields, alerts, toasts, menus and tables; radius-lg (16px) for cards and dialogs; radius-sm (8px) for tooltips and menu rows; radius-xs (5px) for checkboxes; radius-pill for badges, chips and the sweep.
• Borders: border-width (1px) hairlines in line; border-width-bold (2px) for fields, ghost buttons, checkboxes and error borders in edge or error; border-width-tab (3px) for the active tab bar and display underlines.
• Shadows are neutral and low (shadow-sm to shadow-xl). The one colored shadow is shadow-glow, the soft Scanner glow, on dark only; it is empty in the light theme.
• The glow on a line is Scanner, 16 to 18px wide, blurred 5 to 6px, at 90%, under a 4px Laser line. In SVG set the filter region in user space, or a straight line's glow disappears. Never a flat band.

Motion

One easing (ease-out, settled, no bounce) and a few timings: dur-press 80ms, dur-hover 120ms, dur-ui 200ms, dur-sweep 1.6s and dur-sweep-ambient 2s (back and forth, ease-sweep), dur-signal 4s for the signal loop. Under reduced motion nothing moves: the sweep's light holds in the middle and words say what is happening. The mark build and the sonic logo are in guidelines/motion-and-sonic.md.

States

• Hover: a faint light edge on filled buttons; borders go to text-1 on outlined controls. No scale-up.
• Pressed: one step down (accent-press, quiet-press), a 1px drop, a dark inset and a light edge.
• Focus: the double ring, 2px accent inside 2px partner, with a 2px gap in the surface color (--focus-gap). Fields: an accent border with a 2px partner ring.
• Disabled: surface-3 with text-3; no red.
• Loading: buttons keep their label and add the Sweep B head; regions use Sweep or Skeleton with words.

The twenty rules

1. No small Laser text on dark. Eyebrows, labels and links use Fog or Frost with a Laser tick or underline; Laser text starts at 24px, or 18.7px bold. The same pattern is used on light.
2. Laser lines sit on Void or Deck. On Plate or Rail they get a Frost partner.
3. Every Laser line has a partner: Frost on dark, Ink on light. Nodes, arrowheads or a caption carry the shape for red-blind viewers.
4. Focus is a double ring: 2px Laser inside 2px Frost on dark, or Ink on light, with a 2px gap on filled buttons.
5. One main button per view. Second actions use the quiet fill, third actions the ghost style.
6. Errors carry an icon and the word Error. The red border alone never carries the message.
7. Glow is soft: Scanner, 16 to 18px, blurred 5 to 6px, at 90%. Never a flat band.
8. Light never glows on paper. In light mode, the mark, trace and sweep sit in a dark well; inline lines go plain.
9. Lit words are Amber on dark and Burnt on light. Ember is a shape, never a word on light; Ember shapes on light get an Ink outline.
10. Badges are 11px bold capitals or larger. Status badges (error, success, info, warning) carry an icon and a word.
11. Sweep by context: B, Ember with a Frost core, is the default for loading, progress and the signal at 1.6s; the Frost-only sweep is for loading beside a result that is already lit; A, plain, is decoration at 2s; never a sweep beside body text.
12. Email and print get flat versions: glows become images, the sweep becomes a GIF with a meaningful first frame, print uses flat Scanner and spot inks.
13. Pressed states drop one step and add a dark inset and a light edge, because the steps are close in lightness.
14. Disabled loses the red: Rail or Shelf fill with Fog or Ash text.
15. Determinate progress is a filled bar from Scanner to Laser with an Ember head and a Frost tip at the leading edge.
16. Reduced motion: nothing moves; the light holds in the middle and the words say what is happening.
17. When a figure must pop in light mode, set Ink text on an Ember highlight (5.7:1). Never Ember text.
18. Among status messages only errors are red: Laser with an icon and the word Error. Success, info and warning use Moss, Tide and Brass (success, info, warning) with their own icon and word, and those hues are used only for status. New and Live badges are brand labels, not status.
19. Charts are Fog or Ash for context with one lit series in Ember; Laser only for a target line; label series directly, never by color alone.
20. The logo mark keeps its 1.1 shape: three open nodes climbing to one solid Ember node. On light the Ember node gets an Ink outline; in one color, everything is one ink.

The mark

• The shape is the 1.1 System mark, unchanged: three open nodes on a line that climbs left to right to one solid node. Use <Mark> in React and the files in assets/mark/ elsewhere.
• The end node is always Ember, except in the one-color files. Never a second Ember node, never a red end node.
• The glow appears only on dark grounds. On light, the end node gets an Ink outline instead.
• Clear space is one node diameter on every side. Minimum size: glyph 16px as a tab icon on its Void tile, 24px bare; roundel 24px.
• Never stretch, rotate, recolor the line, or set the mark on a mid-tone photo without the roundel.
• Alt text and screen readers say "Generation AI".

Charts

1. Context series are chart-context (a deeper Fog on dark, Ash on light); the one series that matters is lit (Ember).
2. On light, Ember marks get an Ink outline: 2px on chart marks, 3px on larger shapes.
3. Laser appears only as a dashed target or limit line, never as a data series, so red keeps one meaning.
4. Label series and values directly at the end of the line or bar. No legend boxes, no color-only keys.
5. At most three series in one chart; beyond that, use small multiples.
6. Numbers in Courier New bold with units spelled out (h, hours, %). Lit values use lit-text.
7. No gradients, no 3D, no pie charts with more than three slices. Gridlines are hairlines in line.

Iconography

• UI icons: the components carry a small set drawn on a 16px grid with 1.8px round strokes in currentColor (info, warn, ok, err, close, chevrons, check, dash, arrow, external, menu, search, sort, edit, copy, trash, clock, user, doc). Anything else comes from Lucide at the same stroke and the 16, 20 and 24px sizes. Icons are text-1 or text-2; a success, info or warning icon takes its status -text color; in an error the red is the 2px error border, and the icon and the word Error carry the message.
• Status icons: info is a circle with an i, success a circle with a check, warning a diamond, error a triangle. The shapes differ so status never depends on color.
• Brand glyphs: the wordmark's middle dot is the only recurring glyph. No emoji, no spark.
• In illustrations: tool icons are part of the chalk drawing (guidelines/sketch-grammar.md), never recreated as UI icons.

Imagery

Illustrations are vector chalk on a clean Void board, drawn in the brand's exact colors: many tools in Frost and Mist, one meeting point, one Laser path with a Scanner under-stroke, one Ember outcome, four corner ticks. No photos of people except Ahad's own, once approved; no stock; no generated faces. The recipe is guidelines/sketch-grammar.md; the three references are in assets/illustrations/.

Surfaces

Offer pages, Substack, social, email, print, the Map PDF, the small surfaces (form theme, signature, page not found) and the deflaunch.com window each have their own rules in guidelines/surfaces.md. Read it before building any of them.

Governance

Semantic versioning in VERSION; every change goes in CHANGELOG.md. MINOR for additions, PATCH for fixes, MAJOR for renamed or removed tokens and components. Owner: Ahad Amdani. The design-system repository and g8n-ds.css follow this system; they are updated by Ahad's agents, not from here.

Surfaces

Where G8N•AI shows up outside product UI, and the rules for each. The domain decides the look: g8n.ai pages, Substack, social, email, print and the Map PDF are G8N•AI in Scanner; deflaunch.com is the parent company's site and keeps its own look, with G8N•AI shown inside it as a Scanner window.

Markers used while wording or assets are missing, on every surface:

• ALFRED · [what]: a dashed Courier label where new or changed marketing wording is needed. Alfred drafts it, Ahad approves it; reuse the live wording everywhere else.
• PLACEHOLDER · [what]: a dashed box where an asset is missing (founder photo, approved cover, excerpt). Never fill it with stock, a generated face or invented content.
• COMING: a dashed pill on offers named in the book that do not exist yet (the cohort week, the free AI Process Audit guide). No link, date or price until they exist.

g8n.ai offer pages (audit, coaching, partner, build)

Scanner light with a dark top band: the SiteHeader and the hero sit in a data-theme="dark" band on Void; the reading sections are light on Paper with cards on Sheet; the closing call and the footer return to dark. The audit page is the template the other three follow.

The audit page, in order: dark header and hero (eyebrow, H1 with one italic Laser word, the live lede, four check chips, the price line, the primary button and a ghost "See what you get", the inquiry note) · From Beyond Hours (a bridge card for book readers) · The problem (four cards) · How it works (four steps on the brand path: Ask and arrange, The intake, The session, The Map; the last step lit) · Audit or conversation (free fit conversation against the $297 audit) · Why me (live text, founder photo placeholder, the print-business case) · Who this is for · What it costs ($297 card, OR, the Playbook as the do-it-yourself alternative) · Other ways in (fit conversation, Playbook, and the guide and cohort week marked COMING) · What you leave with · FAQ · dark closing band · dark footer. On phones the same sections stack in one column.

Rules for every offer page:

1. Every call button on every g8n.ai page reads Request a Call and opens the inquiry form (https://tally.so/r/J9aR5r). No price on the call; the $100 call is retired.
2. A request is not a booking. No page shows a calendar, a time slot or "confirmed" until a verified free schedule exists. When one exists, the page shows two ways to start: send an inquiry, or pick a time.
3. The inquiry form always says it buys nothing and subscribes to nothing. Live wording: "Ahad will review it and reply by email; submitting does not commit you to paid work. You will not be subscribed to a newsletter."
4. The audit's commitments are identical everywhere: 60-minute session, Map within five business days, PDF Map, Loom recording, $297.
5. The Playbook is never shown as part of the audit. Where both appear, they are alternatives, with OR between them.
6. The six-month service is called fractional technology partner everywhere.
7. Coaching prices appear on coaching.g8n.ai only.
8. Never link tools.g8n.ai or engagelive.io. g8n.ai offer pages and deflaunch.com do not link the booking calendar; their call buttons open the inquiry form (rule 1). The newsletter on Substack keeps its booking links (Ahad Amdani, 2026-10-11): the short calendar addresses all open one live page, "Strategy Call Schedule", 45 minutes, free.
9. Nothing claims the paid audit performs better than the free conversation.

The audit button. Now: "Ask about the $297 audit" (label marked ALFRED) opens the inquiry form; Ahad replies by email to arrange the audit and payment; the intake (https://tally.so/r/68GDDe) is sent only after the audit is arranged and takes no payment. Later, when the paid flow is wired: "Get the audit · $297" (label marked ALFRED) opens the existing $297 payment link, which works but is not wired yet, then the intake. The intake count is not shown.

Coaching, partner and build heroes use the same dark band and header as the audit page, with their live headlines and ledes; only the call buttons and the lines under them change. The drawn line under the button, "Free. Starts with a short inquiry; Ahad replies by email. Submitting does not commit you to paid work.", is marked ALFRED until approved.

Motion: one signal in the audit hero, off under reduced motion. One primary button per view; the header's Request a Call is the quiet button.

Share image: one per page, 1200 × 630, the dark tile with the page's live headline and the mark.

The AI Opportunity Map (PDF)

The $297 audit's deliverable. Four pages: a cover (dark band with the wordmark and the chalk header art, then "AI Opportunity Map" with "Map" in italic Laser, and Prepared for, Session, Prepared by, Recording), Start here (the top three items and the effort and impact matrix), the ranked list, and the 30-day plan.

1. US Letter portrait, light pages for reading and printing. Only the cover band is dark, and it prints as a solid; the chalk art is the cover image.
2. Ember appears once per page: the first item to start, the lit point in the matrix. Lit words in the PDF are Burnt.
3. Red is not used for status in the Map. The warning icon, drawn in Ink, marks what should not run unattended (money, authentication, customers' data).
4. Georgia for headings, Verdana for text, Courier New bold for labels and numbers, so the PDF needs no embedded web fonts.
5. Every Map carries the client name, the session date and the Loom link. Sample rows are labeled "SAMPLE ROWS · NOT CLIENT DATA" until real data replaces them.

Substack (g8n.ai on Substack)

Headers are text-free chalk illustrations at 16:9, because Substack prints the title. Start Here is a Substack page built only from Substack's own blocks, published 2026-10-12 at /p/start-here: Ahad's intro, "Read these first" (five post picks, his), then every way to work with him, grouped: start small (the free strategy call, the Level-Up Playbook, OR the AI Workflow Audit), work together (coaching, custom build, fractional technology partner), and the book. The free AI Process Audit guide does not exist yet and is not on the page. The About page ends with a matching "Work with me" section. Top bar: Home, Podcast, Notes, Start Here, Archive, About; Chat and Leaderboard are hidden, and the booking link lives on Start Here and About, not in the bar. Substack fixes the position of its own tabs and offers no pin for a custom page. In-post links are Laser on Void at about 3.2:1, below the 4.5:1 this system asks of small text; Substack sets link color from the accent and offers no separate control, and the owner accepted that on 2026-10-12.

Social

1. Every social image is the dark tile with a 1px Frost edge at 35% (tile-edge), because it is the only treatment that survives both dark and light feeds. A plain Void tile disappears in a dark feed; a light tile disappears in a light feed.
2. At most one italic Laser phrase per image, and only where it shows at 24px or more at the size people see it. Never in 100px thumbnails. Body text is Mist; lit figures are Amber.
3. Headlines are set by the template in Georgia, never drawn in chalk and never baked into a Substack header.
4. Share images for each g8n.ai page use that page's live headline and the mark, at 1200 × 630.
5. Carousels (1080 × 1350): a cover, numbered points in Courier, and an end slide pointing to g8n.ai. No emoji, no stock photos. Quote cards are QuoteCard at 4:5.

Profile banner: 1584 × 396, the chalk header on the right behind a Void field, the wordmark clear of the profile photo, which covers the lower left. The line "Many tools. One path. One outcome." is a working tagline, not approved wording (ALFRED). Before a campaign, post one test image to each feed in light and dark mode and look at it on a phone.

Email

1. Set every color on every cell. The header band and the button keep their colors because their backgrounds are set explicitly; a dark client repaints anything left to it.
2. No red words in email. A dark client can lighten red text toward pink. Emphasis is italic; the only red is the button and the 8 and dot in the header.
3. The button is a bulletproof table cell: Laser with white text, 6.1:1 in light and dark clients. Some Outlook versions square the corners; that is fine.
4. Glow and trace are one image with its own dark background baked in, so a client that inverts images cannot strand the glow on white. Alt text: many tools, one path, one outcome.
5. The sweep is a GIF whose first frame has the light in the middle, because some Outlook versions show only the first frame.
6. Courier New falls back to the default monospace on Android; keep labels short so a wider fallback cannot wrap.
7. Emails from the offer pages use the light template with the dark header band. Test sends to Gmail, Apple Mail and Outlook, each in light and dark mode, before the first campaign.

Print

1. The two reds differ almost only in black (about K26 against K45 in a simple conversion). On uncoated stock the gap narrows further; two spot inks keep them apart.
2. Match by eye, not by hex: pick the two reds from a printed swatch book under daylight and proof them side by side on the real stock.
3. No glow in print. The glow becomes a flat Scanner shape under the path; the sweep head becomes an Ember point with a white ink core. Sweep A has no print form.
4. The mark survives one color: in black only, the ringed nodes carry the shape and the end node is solid ink.
5. Large black areas show scuffs; a matte or soft-touch finish on the dark side hides handling marks.
6. One physical proof of every piece before any run. Business card: the dark front carries the wordmark and the flat print mark; the light back carries the name, "[Title · Ahad to confirm]", g8n.ai and ahad@g8n.ai.

Small surfaces

Inquiry and intake form theme (apply what the form tool's plan allows; the wording rules apply either way): page background Paper #F8F4F3; text Ink #1A1414; buttons Laser #BC2525 with white text; inputs white with a 2px Edge #847978 border (4.2:1 on white); font Verdana or the tool's closest sans, headings Georgia if the tool allows a heading font; logo g8n-roundel-void at the top. The no-commitment, no-newsletter line stays on the form, with the email fallback ahad@g8n.ai.

Email signature: a plain table that survives every inbox: the roundel as a hosted PNG with alt text "Generation AI", a 2px Laser rule, the name in Georgia bold, "[Title · Ahad to confirm]", and g8n.ai · ahad@g8n.ai in Courier. No red text; the rule line is the only red.

Page not found, every g8n.ai site: the dark band and header, a 404 eyebrow, "This page is not on the map." (page copy is ALFRED), links to the pages that exist (the audit, coaching, partner, build, the newsletter) and the signal trace. Never a link to tools.g8n.ai or engagelive.io.

Customer-owned screens in product UI

Some product screens belong to a customer, not to G8N•AI: a page a customer shows to their own audience under their own name. Decided by Ahad Amdani on 2026-10-11.

1. A customer-owned screen keeps the customer's colors, type and logo. It does not take the Scanner look.
2. G8N•AI appears once, as a small credit in the footer: the glyph or the written mark G8N•AI, at caption size, in the screen's own neutral text color. No Laser, no glow, no sweep.
3. The product's own screens (sign in, settings, dashboards the customer's staff use) are G8N•AI in Scanner.
4. Never mix the two on one screen: a customer's page does not borrow Scanner components, and a Scanner screen does not take a customer's accent.

deflaunch.com: G8N•AI as a Scanner window

deflaunch.com keeps its own look (warm paper, DM Sans and Manrope, its own orange) on every page, including Work with me, and stays static HTML, CSS and JS. Only G8N•AI's card changes:

• The window: the G8N•AI card in the brands section becomes a Void panel the same size as the EngageLive card. Inside, G8N•AI's own type: a Courier label row ("NEWSLETTER & PODCAST", "PUBLISHED ON SUBSTACK" in an Edge outline), the real wordmark (Verdana bold, Frost letters, Laser 8 and dot) beside the cropped mark with its glow, a Georgia headline in Frost ("From AI overwhelm / to something you can use."), the live description in Mist Verdana, a Frost "Explore G8N•AI ↗" link with a 2px Laser underline, and "Subscribe on Substack ↗" in Fog. Nothing in Laser below display size. Static: at most one signal pulse on scroll, off under reduced motion.
• The brand strip goes to one ink: every name in deflaunch's ink, G8N•AI in Verdana bold; no orange dot competing with G8N•AI's Laser.
• The chalk illustrations belong on g8n.ai, not on deflaunch.com.

The full deflaunch.com specification, including its contrast fixes and later pages, lives in the deflaunch handoff document, not in this system.

Voice and ownership

A brand principle, not a disclosure. G8N•AI is openly AI-driven and makes no apology for it.

The principle

If we ship it, we own it. The tool — AI, a ghostwriter, a camera — gets neither the credit nor the blame. The maker is accountable for the work, full stop. We owe no one an explanation for using what's available to build what matters.

How it shows up in copy

• Never hedge or disclaim AI use ("AI-assisted," "made with AI") as if it needs forgiveness. Use the best tool; stand behind the result.
• Never apologize for, or pre-empt, criticism of AI. State the work; let it stand.
• When the topic is AI itself, the tone is confident and plain — not defensive, not evangelical.

Why no provenance statement

A provenance/disclosure stance assumes an explanation is owed. It isn't. Ownership is the whole position: the brand is accountable for everything it publishes, regardless of how it was made.

Spoken brand

Convention

• Written / visual: G8N•AI, everywhere the brand is seen: the wordmark, headings, body copy, social images, signatures.
• Spoken (the brand): "Generation AI". Also the name in page titles (the browser tab), alt text and anything a screen reader announces.
• Domain spoken: g8n.ai → "G-eight-N dot AI"
• The • is never said aloud as "dot" in the brand name, only in the domain. It's a visual mark.

The opener (locked)

"Welcome to Generation AI at G8N•AI," then the product/topic.

Examples:

• "Welcome to Generation AI at G8N•AI. This is our Signal podcast."
• "Welcome to Generation AI at G8N•AI. Read our weekly Dispatch newsletter."

Lead with the spoken name and the written mark, then name the surface you're on. Confident, plain, no hype.

Handles & domain

• • is illegal in handles/URLs. Primary handle @G8N, fallback @GenerationAI. Domain g8n.ai.

Trademark

• Use G8N•AI™ on first prominent use. The • and the constructed mark are the distinctiveness vs. generic "Gen AI / Generation AI" names — worth a clearance check before filing.

i18n / accessibility

• Alt text and screen readers say "Generation AI" (never "G8N bullet AI"). The Wordmark, Logo and Mark components already do this.
• Sentence case + plain words already travel well across languages.

Sketch grammar

The signature illustration, codified so every new piece matches the three references in assets/illustrations/. Illustrations are drawn as vector art in the brand's exact colors, then exported. They are not generated by an image model; that rule from 1.x is retired, and so is the navy-on-cream sketch.

Principle

The chalk look is an aesthetic choice, not an authenticity signal. G8N•AI is openly AI-driven; the art never pretends otherwise. The goal is a clear concept drawn with confidence: many tools, one path, one outcome.

The board

• Void (#0D0A0A), clean. No texture across the background. Chalk dust sits only around the strokes (a slight roughened edge and a faint dust halo), never as a field of noise.
• Four symmetric corner ticks, even margins, a left-to-right narrative axis, vertically centered.

The cast

• Many inputs: recognizable tool icons (terminal, chat bubble, cloud, database, mail, spreadsheet, and so on) drawn as chalk outlines in Frost and Mist. Lines from each tool converge on one meeting point.
• One meeting point: a Frost-ringed node.
• One path: a single Laser line with a Scanner under-stroke (the chalk version of the glow), ending in a confident arrowhead. It is the most assured line in the picture.
• One outcome: in Ember with short rays, chosen by the subject: a bulb for an idea, a page with a check for a finished document, and so on.
• Nothing else is colored. No second Ember shape, no red outside the path, no spark or star.

Scenes

The cast above is the design system's demo illustration, not a layout to repeat. For a post image or a header, the style is fixed and the composition never is.

1. The style is fixed, and it means only colors and drawing style (chalk set v4):

• the chalk look: the rough and dust filters, a slightly roughened edge and a faint dust halo around the strokes only;
• the clean Void board;
• Frost and Mist chalk linework: main outlines about 2.0 to 2.2, detail and echo lines about 1.5 to 1.6 at about 0.5 opacity, texture as light hatching (about 1.2 at about 0.4); no solid fills;
• Laser red with its Scanner under-stroke glow, only for the one mark that matters, if any;
• Ember with its echo line and short rays for the one focal object;
• the four corner ticks, and the top 40% clear on 4:5 for the headline.

Nothing else is colored.

2. The composition is never fixed. Each image is its own picture of its actual subject, drawn literally. No metaphors, analogies or stand-in objects (a stamp, cookie cutter, clock or button standing for an idea). No reused template: the converging cast above is not a layout to repeat, and variants differ in what is drawn, never only in the focal object.

3. Draw like a master draughtsman.

• Use realistic proportions and perspective: a laptop is a 16:10 screen with its keyboard and trackpad shown, not alluded to.
• Give the subject detailed, lovingly etched treatment so it draws the eye: knobs, sills, a legible calendar.
• Keep the surroundings quiet and minimal, so nothing competes with the subject.
• Make everything fit, with no collisions, and with nothing a careful viewer would expect missing.

Formats

• Substack header, 16:9 (1920 × 1080): text-free, because Substack prints the title. Reference: chalk-header-16x9.
• Concept, 16:9: the same grammar for a specific subject (scattered notes to one finished document). Reference: chalk-concept-16x9. Also the hero art of the audit page. (The Map PDF cover uses the header art.)
• Social, 4:5 (1080 × 1350): the top 40% left clear for a headline set by the template in Georgia; never draw the headline in chalk. Reference: chalk-linkedin-4x5.
• Profile banner, 1584 × 396: the 16:9 header on the right behind a Void field.

Production

• Keep the SVG as the source; export PNG at 2x for platforms and JPG where the platform compresses anyway.
• Alt text describes the idea in plain words ("Many tools lead to one path and one outcome"), never "G8N bullet AI".
• On light pages the illustration keeps its own Void background: it is a dark well, never recolored for paper.
• The chalk set belongs on g8n.ai surfaces (offer pages, Substack, social, the Map), not on deflaunch.com.

Motion and sonic

Motion language

• One easing for UI: ease-out, cubic-bezier(0.22, 1, 0.36, 1), settled, never springy. No bounce. The sweeps use ease-sweep (ease-in-out) so the head slows at each end.
• Timings are tokens (timing in tokens.json), so code matches the boards:

• Reduced motion: nothing moves. The sweep's light holds in the middle, the signal shows its resting frame, and the words say what is happening.
• Use motion once per page. The signal plays in the hero of the audit page and nowhere else on it. Never a sweep beside body text.

The glow and the sweeps

• The glow under a Laser line is Scanner, 16 to 18px wide, Gaussian blur 5 to 6px, 90% opacity, under a 4px Laser line. In SVG, set the filter region in user space (filterUnits="userSpaceOnUse"); on a perfectly straight line the default region has no height and the glow disappears. Dark grounds only; in light mode the glowing thing sits in a dark well.
• Sweep B, the default for loading, progress and the signal: Scanner to Laser, then an Ember head with a Frost core. Frost only: the same sweep with a Frost head, for loading beside a result that is already lit, so two lights do not compete. Sweep A: plain Scanner and Laser, decoration under display type.
• Determinate progress fills from Scanner to Laser with an Ember head and a Frost tip at the leading edge.
• Email gets a GIF of the sweep whose first frame has the light in the middle. Print has no sweep: the head becomes an Ember ink point with a white ink core.

The mark build: "drawn-on" (locked)

The line draws itself; each node inks in as the stroke reaches it; the solid Ember node lands last. Drawing speed is mapped to the sonic logo's note onsets so motion and sound hit together:

• Note onsets: 0 / 220 / 450 / 720 ms (three journey nodes and the focal node).
• The path is segmented so the stroke arrives at each node exactly on its note; the Ember node and its glow land on the resolving note.
• Assemble once: the build plays once on entry, then rests. Only the Ember node's halo may breathe. Never loop the whole build.
• Sub-second stinger: a ~0.5s clipped cut for short-form and notifications, still resolving on the Ember node.
• Under prefers-reduced-motion, the build skips to the resolved still.

The sonic logo

• Key: D major: warm, open.
• Shape: D · F# · A → D (held), the octave resolution on the Ember node.
• Voice: celeste (crystalline, warm) lead over soft bowed strings. Lowpass-warmed; gentle shimmer on the landing note.
• Feel: composed, certain, no flourish. Master ~−16 LUFS for spoken-word beds.
• ~1.4s full; the stinger is the clipped variant.
• The sonic logo never autoplays: sound only on user intent.