Agent feeds · raw
landing.agent.json raw feed
Machine feed: every landing block with its category, summary, paste-and-run html/css, and how to consume it.
◆ generated — the exact file served to agents at /landing.agent.json · do not edit by hand
landing.agent.json
[
{
"generatedFrom": "landing/button.json",
"kind": "landing-block",
"name": "Button",
"slug": "button",
"cat": "Elements",
"summary": "Marketing call-to-action buttons for the AhaSlides landing sites. Three emphasis levels — primary, secondary and tertiary — each shown at all three control sizes (sm 28px / md 36px / lg 40px) with its own paste-and-run snippet. They FOLLOW the product Button contract (aha-button): colour, size, radius, weight and motion all bind to the DS Button tokens, so the marketing site and the product app stay on one brand source. The tertiary is the DS ghost button (transparent, purple label, soft purple hover fill) — the same component Webflow ships as its \"Text link\"; the live Text link's colour-only hover and hard-border focus are logged in landing/SCAN.md as Webflow-to-update items, because the DS ghost definition wins. A promotional pink accent (aha-btn--pink) stays available as a further variant. On a product surface reuse <aha-button> itself; on a framework-free marketing page paste the anchor form.",
"consume": {
"framework": "none (paste-and-run HTML+CSS)",
"tokens": "https://ahaslides-product.github.io/ahaslides-design/variables.css",
"note": "Load the token layer once on the page, then paste the html. Every colour/size/space/radius binds to an --aha-* token, so it inherits the AhaSlides brand."
},
"html": "<div class=\"aha-btns\">\n <a class=\"aha-btn aha-btn--primary\" href=\"#primary\">Primary</a>\n <a class=\"aha-btn aha-btn--secondary\" href=\"#secondary\">Secondary</a>\n <a class=\"aha-btn aha-btn--tertiary\" href=\"#tertiary\">Tertiary</a>\n</div>",
"css": ".aha-btns{\n font-family:var(--aha-font-product);\n display:flex;\n flex-wrap:wrap;\n align-items:center;\n gap:var(--aha-space-12);\n}\n.aha-btn{\n display:inline-flex;\n align-items:center;\n justify-content:center;\n gap:var(--aha-space-8);\n min-height:var(--aha-control-height-button-lg);\n padding:0 var(--aha-space-20);\n border:1px solid transparent;\n border-radius:var(--aha-radius-default);\n font-family:inherit;\n font-size:var(--aha-size-l);\n font-weight:var(--aha-weight-semibold);\n text-decoration:none;\n cursor:pointer;\n transition:background-color var(--aha-motion-mid) var(--aha-ease-in-out),border-color var(--aha-motion-mid) var(--aha-ease-in-out),color var(--aha-motion-mid) var(--aha-ease-in-out),box-shadow var(--aha-motion-mid) var(--aha-ease-in-out),transform var(--aha-motion-fast) var(--aha-ease-out);\n}\n.aha-btn:active{transform:translateY(1px)}\n.aha-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--aha-button-focus-ring,rgba(211,180,255,.3))}\n.aha-btn--sm{min-height:var(--aha-control-height-button-sm);padding:0 var(--aha-space-8);border-radius:var(--aha-radius-xs);font-size:var(--aha-size-default)}\n.aha-btn--md{min-height:var(--aha-control-height-button-md);padding:0 var(--aha-space-16);border-radius:var(--aha-radius-default);font-size:var(--aha-size-default)}\n.aha-btn--lg{min-height:var(--aha-control-height-button-lg);padding:0 var(--aha-space-20);border-radius:var(--aha-radius-default);font-size:var(--aha-size-l)}\n.aha-btn--primary{\n background:var(--aha-button-primary-bg);\n color:var(--aha-button-primary-text);\n box-shadow:var(--aha-button-elevate-primary);\n}\n.aha-btn--primary:hover{background:var(--aha-button-primary-bg-hover)}\n.aha-btn--primary:active{background:var(--aha-button-primary-bg-press)}\n.aha-btn--secondary{\n background:var(--aha-button-default-bg);\n color:var(--aha-button-default-text);\n border-color:var(--aha-button-default-border);\n box-shadow:var(--aha-button-elevate-secondary);\n}\n.aha-btn--secondary:hover{background:var(--aha-button-default-bg-hover);border-color:var(--aha-button-default-border-hover);color:var(--aha-color-primary)}\n.aha-btn--secondary:active{border-color:var(--aha-button-default-border-press)}\n.aha-btn--tertiary{background:transparent;color:var(--aha-color-primary)}\n.aha-btn--tertiary:hover{background:var(--aha-button-ghost-bg-hover);color:var(--aha-purple-50)}\n.aha-btn--tertiary:active{background:var(--aha-button-ghost-bg-press);color:var(--aha-color-primary)}\n.aha-btn--pink{background:var(--aha-pink-60);color:var(--aha-white)}\n.aha-btn--pink:hover{background:var(--aha-pink-50)}"
},
{
"generatedFrom": "landing/fonts.json",
"kind": "landing-block",
"name": "Fonts",
"slug": "fonts",
"cat": "Foundations",
"summary": "A landing Foundations-usage page for type: the marketing register of the shared type scale — Plus Jakarta Sans for body (matching the live site) and Nunito (--aha-font-display) reserved for Display and H1 only, each row bound to the DS size, weight, line-height and family tokens. H2/H3 stay on the body face by design (a two-tier headline treatment); the live site uses one face everywhere, so this is a deliberate DS-wins delta, not an oversight. Not a second type source; the same --aha-* tokens the product design system ships. Sizes h1-h6 (48/40/32/24/20/18) match the live site's own --_typography scale token-for-token.",
"consume": {
"framework": "none (paste-and-run HTML+CSS)",
"tokens": "https://ahaslides-product.github.io/ahaslides-design/variables.css",
"note": "Load the token layer once on the page, then paste the html. Every colour/size/space/radius binds to an --aha-* token, so it inherits the AhaSlides brand."
},
"html": "<div class=\"aha-type\">\n <p class=\"aha-type__display\">Display — Nunito</p>\n <h1 class=\"aha-type__h1\">Heading 1 — make the promise big</h1>\n <h2 class=\"aha-type__h2\">Heading 2 — a section headline</h2>\n <h3 class=\"aha-type__h3\">Heading 3 — a card or sub-section</h3>\n <p class=\"aha-type__lead\">Lead — a short, confident sentence that sets up the section below it.</p>\n <p class=\"aha-type__body\">Body — the workhorse size for landing copy. The quick brown fox jumps over the lazy dog while three million presenters run their rooms with AhaSlides.</p>\n <p class=\"aha-type__small\">Small — captions, trust lines and fine print.</p>\n</div>",
"css": ".aha-type{\n font-family:var(--aha-font-product);\n color:var(--aha-text-default);\n display:flex;\n flex-direction:column;\n gap:var(--aha-space-16);\n}\n.aha-type>*{margin:0}\n.aha-type__display{\n font-family:var(--aha-font-display);\n font-size:clamp(var(--aha-size-h1),6vw,var(--aha-size-display1));\n line-height:var(--aha-line-height-tight);\n font-weight:var(--aha-weight-semibold);\n letter-spacing:var(--aha-letter-spacing-headlines);\n}\n.aha-type__h1{\n font-family:var(--aha-font-display);\n font-size:var(--aha-size-h1);\n line-height:var(--aha-line-height-tight);\n font-weight:var(--aha-weight-semibold);\n}\n.aha-type__h2{font-size:var(--aha-size-h2);line-height:var(--aha-line-height-heading);font-weight:var(--aha-weight-semibold)}\n.aha-type__h3{font-size:var(--aha-size-h3);line-height:var(--aha-line-height-heading);font-weight:var(--aha-weight-semibold)}\n.aha-type__lead{font-size:var(--aha-size-xl);line-height:var(--aha-line-height-body);color:var(--aha-text-secondary);max-width:52ch}\n.aha-type__body{font-size:var(--aha-size-l);line-height:var(--aha-line-height-body);color:var(--aha-text-secondary);max-width:60ch}\n.aha-type__small{font-size:var(--aha-size-sm);line-height:var(--aha-line-height-body);color:var(--aha-text-tertiary);letter-spacing:var(--aha-letter-spacing-subtext)}"
},
{
"generatedFrom": "landing/grid.json",
"kind": "landing-block",
"name": "Grid",
"slug": "grid",
"cat": "Layout",
"summary": "A fluid marketing grid for feature cards, logo walls and stat rows. The base grid auto-fits as many columns as fit; the --2 / --3 / --4 variants target that many across on desktop and collapse to a single column on narrow screens with no media queries. Gap and card styling bind to the DS space and radius scales. Mirrors the live site's 1/2/3/4-up grids at a 24px gutter.",
"consume": {
"framework": "none (paste-and-run HTML+CSS)",
"tokens": "https://ahaslides-product.github.io/ahaslides-design/variables.css",
"note": "Load the token layer once on the page, then paste the html. Every colour/size/space/radius binds to an --aha-* token, so it inherits the AhaSlides brand."
},
"html": "<div class=\"aha-grid aha-grid--3\">\n <div class=\"aha-grid__cell\"><b>Live polls</b><span>Ask, and watch answers land in real time.</span></div>\n <div class=\"aha-grid__cell\"><b>Quizzes</b><span>Score teams and settle it on a leaderboard.</span></div>\n <div class=\"aha-grid__cell\"><b>Word clouds</b><span>Turn open answers into one shared picture.</span></div>\n <div class=\"aha-grid__cell\"><b>Q&A</b><span>Let the room raise and upvote questions.</span></div>\n <div class=\"aha-grid__cell\"><b>Spinner wheel</b><span>Pick a name or a prize at random.</span></div>\n <div class=\"aha-grid__cell\"><b>Open ended</b><span>Collect free-text responses on any slide.</span></div>\n</div>",
"css": ".aha-grid{\n font-family:var(--aha-font-product);\n display:grid;\n gap:var(--aha-space-24);\n grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));\n}\n.aha-grid *{box-sizing:border-box}\n.aha-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}\n.aha-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}\n.aha-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}\n.aha-grid__cell{\n display:flex;\n flex-direction:column;\n gap:var(--aha-space-6);\n background:var(--aha-purple-10);\n border:1px solid var(--aha-split);\n border-radius:var(--aha-radius-lg);\n padding:var(--aha-space-24);\n}\n.aha-grid__cell b{font-size:var(--aha-size-h6);font-weight:var(--aha-weight-semibold);color:var(--aha-text-default)}\n.aha-grid__cell span{font-size:var(--aha-size-default);line-height:var(--aha-line-height-body);color:var(--aha-text-secondary)}"
},
{
"generatedFrom": "landing/hero.json",
"kind": "landing-block",
"name": "Hero",
"slug": "hero",
"cat": "Sections",
"summary": "A marketing hero for the AhaSlides landing sites: eyebrow, headline, lead, two calls to action and a live-poll product mock. Framework-free and bound entirely to the shared --aha-* tokens.",
"consume": {
"framework": "none (paste-and-run HTML+CSS)",
"tokens": "https://ahaslides-product.github.io/ahaslides-design/variables.css",
"note": "Load the token layer once on the page, then paste the html. Every colour/size/space/radius binds to an --aha-* token, so it inherits the AhaSlides brand."
},
"html": "<section class=\"aha-hero\">\n <div class=\"aha-hero__wrap\">\n <div class=\"aha-hero__copy\">\n <p class=\"aha-hero__eyebrow\">Interactive presentations</p>\n <h1 class=\"aha-hero__title\">Turn every presentation into a conversation</h1>\n <p class=\"aha-hero__lead\">Add live polls, quizzes and word clouds to your slides. Your audience joins from their phones and answers in real time — so you can see what the room thinks the moment they do.</p>\n <div class=\"aha-hero__actions\">\n <a class=\"aha-hero__cta\" href=\"#get-started\">Get started — it’s free</a>\n <a class=\"aha-hero__cta aha-hero__cta--ghost\" href=\"#book-a-demo\">Book a demo</a>\n </div>\n <p class=\"aha-hero__trust\"><b>3 million presenters</b> at schools, universities and teams worldwide trust AhaSlides.</p>\n </div>\n <div class=\"aha-hero__media\" role=\"img\" aria-label=\"A live AhaSlides poll showing audience responses updating in real time\">\n <div class=\"aha-hero__poll-head\">\n <p class=\"aha-hero__poll-q\">Which session do you want next?</p>\n <span class=\"aha-hero__live\">Live</span>\n </div>\n <div class=\"aha-hero__bar\">\n <div class=\"aha-hero__bar-top\"><span>Live Q&A</span><b>64%</b></div>\n <div class=\"aha-hero__track\"><div class=\"aha-hero__fill\" style=\"width:64%\"></div></div>\n </div>\n <div class=\"aha-hero__bar\">\n <div class=\"aha-hero__bar-top\"><span>Team quiz</span><b>28%</b></div>\n <div class=\"aha-hero__track\"><div class=\"aha-hero__fill aha-hero__fill--soft\" style=\"width:28%\"></div></div>\n </div>\n <div class=\"aha-hero__bar\">\n <div class=\"aha-hero__bar-top\"><span>Word cloud</span><b>8%</b></div>\n <div class=\"aha-hero__track\"><div class=\"aha-hero__fill aha-hero__fill--soft\" style=\"width:8%\"></div></div>\n </div>\n </div>\n </div>\n</section>",
"css": ".aha-hero{\n background:var(--aha-white);\n color:var(--aha-text-default);\n font-family:var(--aha-font-product);\n padding:clamp(var(--aha-space-40),6vw,var(--aha-space-96)) var(--aha-space-24);\n}\n.aha-hero *{box-sizing:border-box}\n.aha-hero__wrap{\n max-width:72rem;\n margin-inline:auto;\n display:grid;\n grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));\n gap:clamp(var(--aha-space-32),5vw,var(--aha-space-64));\n align-items:center;\n}\n.aha-hero__eyebrow{\n margin:0 0 var(--aha-space-16);\n font-size:var(--aha-size-sm);\n font-weight:var(--aha-weight-semibold);\n letter-spacing:var(--aha-letter-spacing-subheadings);\n text-transform:uppercase;\n color:var(--aha-color-primary);\n}\n.aha-hero__title{\n margin:0 0 var(--aha-space-20);\n font-family:var(--aha-font-display);\n font-size:clamp(var(--aha-size-h2),4.6vw,var(--aha-size-display1));\n line-height:var(--aha-line-height-tight);\n font-weight:var(--aha-weight-semibold);\n letter-spacing:var(--aha-letter-spacing-headlines);\n color:var(--aha-text-default);\n}\n.aha-hero__lead{\n margin:0 0 var(--aha-space-28);\n max-width:44ch;\n font-size:clamp(var(--aha-size-l),1.4vw,var(--aha-size-xl));\n line-height:var(--aha-line-height-body);\n color:var(--aha-text-secondary);\n}\n.aha-hero__actions{display:flex;flex-wrap:wrap;gap:var(--aha-space-12)}\n.aha-hero__cta{\n display:inline-flex;\n align-items:center;\n justify-content:center;\n gap:var(--aha-space-8);\n min-height:var(--aha-control-height-button-xl);\n padding:0 var(--aha-space-28);\n border:1px solid transparent;\n border-radius:var(--aha-radius-pill);\n font-family:inherit;\n font-size:var(--aha-size-l);\n font-weight:var(--aha-weight-semibold);\n text-decoration:none;\n cursor:pointer;\n background:var(--aha-button-primary-bg);\n color:var(--aha-button-primary-text);\n transition:background-color var(--aha-motion-mid) var(--aha-ease-in-out),transform var(--aha-motion-fast) var(--aha-ease-out);\n}\n.aha-hero__cta:hover{background:var(--aha-button-primary-bg-hover)}\n.aha-hero__cta:active{background:var(--aha-button-primary-bg-press);transform:translateY(1px)}\n.aha-hero__cta:focus-visible{outline:var(--aha-space-2) solid var(--aha-focus);outline-offset:var(--aha-space-2)}\n.aha-hero__cta--ghost{\n background:var(--aha-button-default-bg);\n color:var(--aha-button-default-text);\n border-color:var(--aha-button-default-border);\n}\n.aha-hero__cta--ghost:hover{background:var(--aha-button-default-bg-hover);border-color:var(--aha-button-default-border-hover)}\n.aha-hero__cta--ghost:active{background:var(--aha-button-default-bg-hover);border-color:var(--aha-button-default-border-press)}\n.aha-hero__trust{\n margin:var(--aha-space-24) 0 0;\n display:flex;\n align-items:center;\n gap:var(--aha-space-8);\n font-size:var(--aha-size-sm);\n line-height:var(--aha-line-height-body);\n color:var(--aha-text-tertiary);\n}\n.aha-hero__trust b{color:var(--aha-text-secondary);font-weight:var(--aha-weight-semibold)}\n.aha-hero__media{\n background:var(--aha-bg-container);\n border:1px solid var(--aha-split);\n border-radius:var(--aha-radius-marketing);\n padding:var(--aha-space-24);\n box-shadow:0 var(--aha-space-12) var(--aha-space-40) var(--aha-ink-a10);\n}\n.aha-hero__poll-head{display:flex;align-items:center;justify-content:space-between;gap:var(--aha-space-12);margin:0 0 var(--aha-space-20)}\n.aha-hero__poll-q{margin:0;font-size:var(--aha-size-h6);font-weight:var(--aha-weight-semibold);color:var(--aha-text-default)}\n.aha-hero__live{\n display:inline-flex;\n align-items:center;\n gap:var(--aha-space-6);\n flex:none;\n font-size:var(--aha-size-sm);\n font-weight:var(--aha-weight-semibold);\n color:var(--aha-color-primary);\n}\n.aha-hero__live::before{\n content:\"\";\n width:var(--aha-space-8);\n height:var(--aha-space-8);\n border-radius:var(--aha-radius-pill);\n background:var(--aha-color-primary);\n}\n.aha-hero__bar{margin:0 0 var(--aha-space-16)}\n.aha-hero__bar:last-child{margin-bottom:0}\n.aha-hero__bar-top{display:flex;justify-content:space-between;gap:var(--aha-space-12);margin:0 0 var(--aha-space-6);font-size:var(--aha-size-default);color:var(--aha-text-secondary)}\n.aha-hero__bar-top b{color:var(--aha-text-default);font-weight:var(--aha-weight-semibold)}\n.aha-hero__track{height:var(--aha-space-12);border-radius:var(--aha-radius-pill);background:var(--aha-purple-10);overflow:hidden}\n.aha-hero__fill{height:100%;border-radius:var(--aha-radius-pill);background:var(--aha-color-primary)}\n.aha-hero__fill--soft{background:var(--aha-purple-40)}"
},
{
"generatedFrom": "landing/link.json",
"kind": "landing-block",
"name": "Link",
"slug": "link",
"cat": "Elements",
"summary": "Inline text links for landing copy: the brand purple, a soft underline that strengthens on hover, and a quiet variant for footer and secondary links. Colour binds to --aha-color-primary (matching the live site) and weight to --aha-weight-semibold (the DS type scale is 400/600, so the DS wins over the live site's 500). No product Link component exists yet, so this is the landing definition.",
"consume": {
"framework": "none (paste-and-run HTML+CSS)",
"tokens": "https://ahaslides-product.github.io/ahaslides-design/variables.css",
"note": "Load the token layer once on the page, then paste the html. Every colour/size/space/radius binds to an --aha-* token, so it inherits the AhaSlides brand."
},
"html": "<p class=\"aha-copy\">Explore our <a class=\"aha-link\" href=\"#docs\">documentation</a>, browse <a class=\"aha-link\" href=\"#templates\">ready-made templates</a>, or <a class=\"aha-link aha-link--quiet\" href=\"#pricing\">see pricing</a> before you sign up.</p>",
"css": ".aha-copy{\n font-family:var(--aha-font-product);\n font-size:var(--aha-size-l);\n line-height:var(--aha-line-height-body);\n color:var(--aha-text-secondary);\n max-width:60ch;\n}\n.aha-link{\n color:var(--aha-color-primary);\n font-weight:var(--aha-weight-semibold);\n text-decoration:none;\n border-bottom:1px solid var(--aha-purple-30);\n transition:color var(--aha-motion-fast) var(--aha-ease-in-out),border-color var(--aha-motion-fast) var(--aha-ease-in-out);\n}\n.aha-link:hover{color:var(--aha-color-primary-hover);border-bottom-color:var(--aha-color-primary-hover)}\n.aha-link:focus-visible{outline:var(--aha-space-2) solid var(--aha-focus);outline-offset:var(--aha-space-2);border-radius:var(--aha-radius-xs)}\n.aha-link--quiet{color:var(--aha-text-secondary);border-bottom-color:var(--aha-border)}\n.aha-link--quiet:hover{color:var(--aha-color-primary);border-bottom-color:var(--aha-color-primary)}"
},
{
"generatedFrom": "landing/section-container.json",
"kind": "landing-block",
"name": "Section container",
"slug": "section-container",
"cat": "Layout",
"summary": "The outer wrapper for every landing section: a full-bleed background band with its content centred and capped at the landing content width (1280px), carrying the standard vertical rhythm. Soft and dark variants alternate sections. Grounds directly on the live marketing site (max-width 1280px, section padding ~64/32); framework-free and bound to the shared --aha-* tokens.",
"consume": {
"framework": "none (paste-and-run HTML+CSS)",
"tokens": "https://ahaslides-product.github.io/ahaslides-design/variables.css",
"note": "Load the token layer once on the page, then paste the html. Every colour/size/space/radius binds to an --aha-* token, so it inherits the AhaSlides brand."
},
"html": "<section class=\"aha-section\">\n <div class=\"aha-section__inner\">\n <p class=\"aha-section__eyebrow\">Section container</p>\n <h2 class=\"aha-section__title\">A band that spans full width, with its content centred</h2>\n <p class=\"aha-section__lead\">The section paints its background edge to edge; the inner column caps the reading width at the landing content max-width and carries the standard vertical rhythm. Add a modifier for a soft or dark band.</p>\n </div>\n</section>\n<section class=\"aha-section aha-section--soft\">\n <div class=\"aha-section__inner\">\n <h2 class=\"aha-section__title\">Soft band</h2>\n <p class=\"aha-section__lead\">The same container, tinted, for alternating sections down a page.</p>\n </div>\n</section>\n<section class=\"aha-section aha-section--dark\">\n <div class=\"aha-section__inner\">\n <h2 class=\"aha-section__title\">Dark band</h2>\n <p class=\"aha-section__lead\">The same container on the dark surface token, for a high-contrast closing section.</p>\n </div>\n</section>",
"css": ".aha-section{\n background:var(--aha-white);\n color:var(--aha-text-default);\n font-family:var(--aha-font-product);\n padding:clamp(var(--aha-space-48),6vw,var(--aha-space-96)) clamp(var(--aha-space-16),4vw,var(--aha-space-32));\n}\n.aha-section *{box-sizing:border-box}\n.aha-section__inner{\n max-width:var(--aha-breakpoint-desktop);\n margin-inline:auto;\n display:flex;\n flex-direction:column;\n gap:var(--aha-space-16);\n}\n.aha-section--soft{background:var(--aha-purple-10)}\n.aha-section--dark{background:var(--aha-bg-dark);color:var(--aha-icon-inverse)}\n.aha-section--dark .aha-section__lead{color:var(--aha-white-a50)}\n.aha-section__eyebrow{\n margin:0;\n font-size:var(--aha-size-sm);\n font-weight:var(--aha-weight-semibold);\n letter-spacing:var(--aha-letter-spacing-subheadings);\n text-transform:uppercase;\n color:var(--aha-color-primary);\n}\n.aha-section__title{\n margin:0;\n font-size:clamp(var(--aha-size-h3),4vw,var(--aha-size-h1));\n line-height:var(--aha-line-height-heading);\n font-weight:var(--aha-weight-semibold);\n letter-spacing:var(--aha-letter-spacing-headlines);\n}\n.aha-section__lead{\n margin:0;\n max-width:60ch;\n font-size:var(--aha-size-l);\n line-height:var(--aha-line-height-body);\n color:var(--aha-text-secondary);\n}"
},
{
"generatedFrom": "landing/spacing.json",
"kind": "landing-block",
"name": "Spacing",
"slug": "spacing",
"cat": "Foundations",
"summary": "A landing Foundations-usage page for the spacing rhythm: the same --aha-space-* scale the product design system ships, shown as bars so marketing builders pick padding, gaps and margins from one source. This is not a second token source — every value is the shared token. The live marketing rhythm (section 64/32, gaps 24) maps entirely onto this scale.",
"consume": {
"framework": "none (paste-and-run HTML+CSS)",
"tokens": "https://ahaslides-product.github.io/ahaslides-design/variables.css",
"note": "Load the token layer once on the page, then paste the html. Every colour/size/space/radius binds to an --aha-* token, so it inherits the AhaSlides brand."
},
"html": "<div class=\"aha-scale\">\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-4</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-4)\"></span><span class=\"aha-scale__val\">4px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-8</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-8)\"></span><span class=\"aha-scale__val\">8px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-12</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-12)\"></span><span class=\"aha-scale__val\">12px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-16</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-16)\"></span><span class=\"aha-scale__val\">16px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-20</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-20)\"></span><span class=\"aha-scale__val\">20px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-24</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-24)\"></span><span class=\"aha-scale__val\">24px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-32</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-32)\"></span><span class=\"aha-scale__val\">32px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-40</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-40)\"></span><span class=\"aha-scale__val\">40px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-48</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-48)\"></span><span class=\"aha-scale__val\">48px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-64</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-64)\"></span><span class=\"aha-scale__val\">64px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-80</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-80)\"></span><span class=\"aha-scale__val\">80px</span></div>\n <div class=\"aha-scale__row\"><span class=\"aha-scale__name\">space-96</span><span class=\"aha-scale__bar\" style=\"width:var(--aha-space-96)\"></span><span class=\"aha-scale__val\">96px</span></div>\n</div>",
"css": ".aha-scale{\n font-family:var(--aha-font-product);\n color:var(--aha-text-default);\n display:flex;\n flex-direction:column;\n gap:var(--aha-space-12);\n}\n.aha-scale__row{\n display:grid;\n grid-template-columns:7rem 1fr auto;\n align-items:center;\n gap:var(--aha-space-16);\n}\n.aha-scale__name{font-size:var(--aha-size-default);font-weight:var(--aha-weight-semibold);color:var(--aha-text-secondary)}\n.aha-scale__bar{\n height:var(--aha-space-16);\n min-width:var(--aha-space-2);\n background:var(--aha-color-primary);\n border-radius:var(--aha-radius-xs);\n display:block;\n}\n.aha-scale__val{font-family:var(--aha-font-mono);font-size:var(--aha-size-sm);color:var(--aha-text-tertiary)}"
}
]