{ "schema": "brand-kit@2", "palette": { "paper": "#060913", "surface": "#0C0F19", "ink": "#F2F6FA", "ink_muted": "#BFC1C9", "accent": "#3245FF", "on_accent": "#FFFFFF", "accent_secondary": "#F041FF", "night": "#060913", "on_night": "#F2F6FA", "ground_note": "Astro is dark-first: the rebrand chose a dark-mode site with its own palette, so paper here is the navy-black homepage ground, not white. Accent is the blue-purple gradient's start; accent_secondary the red-pink gradient's end. Color roles come from the repo's Tailwind tokens (published as repo source) and the homepage (observed 2026-10-31); no guideline prose assigns roles or proportions.", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "extras": [ { "name": "astro-dark-900 (page ground)", "hex": "#060913", "role": "Deepest navy-black. The homepage ground (body bg-astro-dark-900); the night sky everything floats on", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "site_use": "Homepage root ground (observed https://astro.build/ (2026-10-31))" }, { "name": "black", "hex": "#0D0F14", "role": "The repo's 'black'. Ground of the press page and blog posts; nav backing", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "site_use": "Root ground of /press/ and /blog/welcome-world/ (observed 2026-10-31)" }, { "name": "astro-dark-800 (panel)", "hex": "#0C0F19", "role": "Panel and card ground on the homepage (Islands chart panel bg-astro-dark-800)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "site_use": "Most homepage bands and panels (observed https://astro.build/ (2026-10-31))" }, { "name": "astro-dark-700", "hex": "#11172A", "role": "Deep navy step", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-dark-600", "hex": "#2C2C2C", "role": "Secondary button fill (bg-astro-dark-600/30)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "site_use": "Secondary pill buttons, measured #2C2C2C (observed https://astro.build/ (2026-10-31))" }, { "name": "astro-dark-500", "hex": "#4B4B4B", "role": "Neutral dark step", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-dark-400", "hex": "#18191E", "role": "Near-black step", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-dark-300", "hex": "#343841", "role": "Dark step (same hex as astro-gray-500)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-dark-100", "hex": "#858B98", "role": "Muted text and borders at 20-60% (border-astro-dark-100/20 on panels)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-gray-100 (off-white ink)", "hex": "#F2F6FA", "role": "Primary text on dark; outline of the default button; headline color", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "site_use": "H1 and section headings measured #F2F6FA (observed https://astro.build/ (2026-10-31))" }, { "name": "astro-gray-200 (muted ink)", "hex": "#BFC1C9", "role": "Body copy, nav links and descriptions on dark (.link, SectionCopy description)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "site_use": "Body text and nav links measured #BFC1C9 (observed https://astro.build/ (2026-10-31))" }, { "name": "astro-gray-300", "hex": "#858B98", "role": "Quiet captions (chart caption text-astro-gray-300)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-gray-400", "hex": "#545864", "role": "Mid gray", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-gray-500", "hex": "#343841", "role": "Panel border and input border (.panel, .input)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-gray-600", "hex": "#23262D", "role": "Panel and input fill; horizontal rules between tab rows (border-astro-gray-600)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-gray-700", "hex": "#17191E", "role": "Press-page asset tile ground (data-[bg=dark]); ink of the 'logo on light' file", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "also": [ "https://astro.build/press/" ] }, { "name": "white", "hex": "#FFFFFF", "role": "Logo on dark, primary 'Get Started' pill fill, light logo tile ground (repo carries a TODO to replace it with a brand off-white)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-blue", "hex": "#3245FF", "role": "Start of the blue-purple gradient; primary-button text hover color", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-purple", "hex": "#BC52EE", "role": "Purple; gem shade with astro-blue", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "blue-purple gradient end", "hex": "#B845ED", "role": "End stop of blue-purple-gradient (83.21deg, #3245FF to #B845ED). Gradient-only", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-purple-dark", "hex": "#3F224D", "role": "Deep purple step", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-red", "hex": "#D83333", "role": "Start of the red-pink gradient; bottom stop of the gradient logo's flame", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "also": [ "https://astro.build/press/ (astro-logo-light-gradient.svg)" ] }, { "name": "astro-pink", "hex": "#F041FF", "role": "Hot pink/magenta. End of the red-pink gradient (eyebrow labels, gradient flame, agency glow)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-pink-light", "hex": "#E8C4F9", "role": "Pale lilac. Focus-visible outline and astro-hover", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "astro-green", "hex": "#4AF2C8", "role": "Mint/aqua. Start of the blue-green gradient; Server-First gem", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "blue-green gradient end", "hex": "#2F4CB3", "role": "End stop of blue-green-gradient (247.23deg, #4AF2C8 to #2F4CB3). Gradient-only", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "yellow (repo token astro-orange)", "hex": "#F8E42E", "role": "A bright yellow, despite its token name astro-orange (the repo swaps the names). Start of orange-yellow-gradient; Customizable gem", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "orange (repo token astro-yellow)", "hex": "#FF7D54", "role": "A coral orange, despite its token name astro-yellow. End of orange-yellow-gradient", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "final-CTA teal ground", "hex": "#1A3E57", "role": "Fallback fill under the final CTA's starfield image (bg-[#1a3e57])", "prov": "published", "source": "github.com/withastro/astro.build src/pages/_components/landing-page/FinalCTA.astro (main, read 2026-10-31)" }, { "name": "homepage #1321AC", "hex": "#1321AC", "role": "Release-pill left segment gradient start (to top right, #1321AC to #881ABD)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #881ABD", "hex": "#881ABD", "role": "Release-pill left segment gradient end", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #07040F", "hex": "#07040F", "role": "Zero Lock-in code-card frame and browser-window fill", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #264A89", "hex": "#264A89", "role": "Highlighted code line in the Zero Lock-in code card (at 50% alpha)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #61DAFB", "hex": "#61DAFB", "role": "React brand cyan: active framework tab ring and label, Add to cart button fill (product UI, not a brand colour)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #41B883", "hex": "#41B883", "role": "Vue brand green: Vue tab active ring (product UI)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #673AB8", "hex": "#673AB8", "role": "Preact brand purple: Preact tab active ring (product UI)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #FF3E00", "hex": "#FF3E00", "role": "Svelte brand orange: Svelte tab active ring (product UI)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #76B3E1", "hex": "#76B3E1", "role": "Solid brand blue: Solid tab active ring (product UI)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #030712", "hex": "#030712", "role": "Add to cart button label (near-black) on the framework colour", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #3178C6", "hex": "#3178C6", "role": "TypeScript blue: shield badge on scanned docs in the Content Collections card", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #6B7AAB", "hex": "#6B7AAB", "role": "Document icon light fill (Content Collections art)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #2F3854", "hex": "#2F3854", "role": "Document icon dark fill (Content Collections art)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #8B909D", "hex": "#8B909D", "role": "Code sample: frontmatter fences ---", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #54B9FF", "hex": "#54B9FF", "role": "Code sample: keywords (import, from, const, await)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #4BF3C8", "hex": "#4BF3C8", "role": "Code sample: identifiers", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #FFD493", "hex": "#FFD493", "role": "Code sample: strings", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #EEF0F9", "hex": "#EEF0F9", "role": "Code sample: punctuation", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #ACAFFF", "hex": "#ACAFFF", "role": "Code sample: components and variables", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #00DAEF", "hex": "#00DAEF", "role": "Code sample: function call", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #40DEBF", "hex": "#40DEBF", "role": "Islands stardust glow start (rgba at 30%)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #334BA9", "hex": "#334BA9", "role": "Islands stardust glow end (rgba at 30%)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #211F2F", "hex": "#211F2F", "role": "View Transitions tile 1 gradient start", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #074170", "hex": "#074170", "role": "View Transitions tile 1 gradient end", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #184560", "hex": "#184560", "role": "View Transitions tile 2 gradient start", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #08203E", "hex": "#08203E", "role": "View Transitions tiles 2 and 5 gradient end", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #000328", "hex": "#000328", "role": "View Transitions tile 3 gradient start", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #103783", "hex": "#103783", "role": "View Transitions tile 3 gradient end", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #243748", "hex": "#243748", "role": "View Transitions tile 4 gradient start", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #0A3431", "hex": "#0A3431", "role": "View Transitions tile 4 gradient end", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #133A94", "hex": "#133A94", "role": "View Transitions tile 5 gradient start", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #282C34", "hex": "#282C34", "role": "Simple Templating component chip gradient end (from #17191E)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #1D2025", "hex": "#1D2025", "role": "File-tree card gradient start (File-Based Routing art)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #2D3039", "hex": "#2D3039", "role": "File-tree card gradient end", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #1A146A", "hex": "#1A146A", "role": "Sampled hero glow image, top-left (image colour, reference only)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #34157C", "hex": "#34157C", "role": "Sampled hero glow image, centre (reference only)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #6019A5", "hex": "#6019A5", "role": "Sampled hero glow image, right (reference only)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #140C32", "hex": "#140C32", "role": "Sampled hero glow image at the hero bottom (reference only)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #111140", "hex": "#111140", "role": "Sampled nav bar over the hero glow (reference only)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #2D7D8B", "hex": "#2D7D8B", "role": "Sampled final-CTA starfield, teal glow (reference only)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #275A8D", "hex": "#275A8D", "role": "Sampled final-CTA starfield, blue glow (reference only)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" }, { "name": "homepage #16354A", "hex": "#16354A", "role": "Sampled final-CTA starfield, centre (reference only)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "site_use": "Homepage anatomy only; not a brand palette colour" } ] }, "typography": { "display": { "family": "Hubot Sans", "steal_family": "Hubot Sans", "weight": 750, "width": "wdth 120 (font-stretch: 120%) at wght 750 for every bold Obviously heading 30px and up; wdth 115 wght 700 for the 20px chart labels; the light intro statement uses Archivo wdth 125 wght 350 + 0.015em tracking", "tracking": 0, "line_height": 1.1, "fallback_stack": "\"Hubot Sans\", Archivo, Verdana, system-ui, sans-serif", "real": "Obviously by OH no Type Company (proprietary, licensed; https://ohnotype.co/fonts/obviously). Not supplied with this book", "stand_in": true, "stand_in_note": "Hubot Sans (GitHub, SIL OFL 1.1) at wdth 120 / wght 750 stands in for Obviously 700. Calibrated 2026-10-31 against the real face rendered on astro.build: line width within +0.8% / -0.4% on the two hero lines, ink darkness 0.373 vs 0.373, x-height 0.55 vs 0.61 em, cap height 0.74 vs 0.76 em. The intro statement (Obviously wdth 490 wght 290) is Archivo wdth 125 / wght 400 + 0.01em tracking (width -1.35% before tracking, ink 0.2345 vs real 0.2361; 450 was 0.2444, too dark). Mapping: Obviously 700 -> Hubot Sans 120/750; Obviously light intro -> Archivo 125/350 +0.015em (its bold word Hubot Sans 120/700).", "prov": "published", "source": "https://astro.build/blog/welcome-world/", "also": [ "github.com/withastro/astro.build src/styles/fonts.css (main, read 2026-10-31)", "github.com/withastro/astro.build src/styles/tailwind.css (main, read 2026-10-31)" ], "site": { "family": "Obviously, variable (wght 100-1000, wdth 490-620)", "weight": "700 hero and final CTA; 700 section titles (h2 is 400 but its text is a at 700, font-variation-settings normal); wght 475 is only the intro statement's bold word; 300 intro statement (wght 290); 380 on press and blog headings", "size_px": "48 desktop / 30 phone (hero H1); 36 intro and final CTA; 30 desktop / 24 phone section titles; 20 card numbers", "line_height": "1.1 hero (52.8px at 48); 1.11 at 36; 1.2 at 30", "tracking": "normal", "variation": "font-variation-settings wght 290/380/475 and wdth 490; features salt, ss06, ss11, cv09, liga, calt", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "also": [ "github.com/withastro/astro.build src/styles/tailwind.css (main, read 2026-10-31)", "github.com/withastro/astro.build src/pages/_components/landing-page/Intro.astro (main, read 2026-10-31)" ] }, "axes": { "wdth": 120, "wght": 800, "css": "font-family: \"Hubot Sans\"; font-stretch: 120%; font-weight: 800" } }, "body": { "family": "Inter", "steal_family": "Inter", "weight": 300, "tracking": 0, "line_height": 1.5, "scale": 1, "fallback_stack": "Inter, Arial, system-ui, sans-serif", "real": "Inter (Rasmus Andersson; SIL OFL 1.1). The real face; variable woff2 from github.com/rsms/inter v4.1", "stand_in": false, "prov": "published", "source": "github.com/withastro/astro.build src/styles/fonts.css (main, read 2026-10-31)", "also": [ "https://astro.build/blog/welcome-world/ (Type System image names Inter)" ], "site": { "weights": "300 .body (repo), 200 .body-large lead (repo; measured 18px/200), 400 buttons, 600 card titles and footer heads; repo range 300-600", "sizes_px": "18 hero lead, 16 body and buttons, 14 small buttons", "line_height": "1.5 (24px at 16, 27px at 18); prose 1.8125", "tracking": "normal; buttons tracking-wide", "font_feature_settings": "case, ss03, cpsp, cv03-cv06 on (repo .font-sans)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "also": [ "github.com/withastro/astro.build src/styles/tailwind.css (main, read 2026-10-31)" ], "homepage_render": "As served 2026-10-31 the homepage loads Inter only where a .font-sans/.body-large/.button class asks for it: the hero lead (Inter 300, 18px (CSS asks 200, but the served Inter face spans 300-600, so it renders at 300; build 300, never 200)) and the theme-card overlay pills. Every other text (nav, eyebrows, descriptions, card titles, buttons, footer) inherits Tailwind preflight's ui-sans-serif, system-ui, sans-serif and renders SF Pro on macOS (CDP platform font .SF NS). Build a landing page with that system stack for those roles and Inter for the lead." } }, "mono": { "family": "IBM Plex Mono", "steal_family": "IBM Plex Mono", "weight": 400, "fallback_stack": "ui-monospace, SFMono-Regular, Menlo, \"IBM Plex Mono\", monospace", "real": "MDIO by Mass-Driver (proprietary, licensed). Not supplied with this book", "stand_in": true, "stand_in_note": "MDIO (proprietary) appears on the homepage only in 12px image labels; the install command and code sample are served in ui-monospace (Menlo on macOS). For MDIO, IBM Plex Mono Regular 400 (SIL OFL) matches best of eight open monos measured 2026-10-31: advance 0.600 em vs MDIO 0.600 (14px command 193.2px vs 193.2px), x-height 0.52 vs 0.53 em, cap height 0.71 vs 0.70 em, ink darkness 0.196 vs 0.195. Runners-up: Geist Mono (x 0.54, darkness 0.213), JetBrains Mono (x 0.56, 0.206); Martian Mono and Azeret Mono are 8-17% wider. Use 400, not 300: MDIO ships only weight 400.", "prov": "published", "source": "https://astro.build/blog/welcome-world/", "also": [ "github.com/withastro/astro.build src/styles/fonts.css (main, read 2026-10-31)" ], "site": { "weights": "font-light (.code, CodeBlock)", "sizes_px": "14 (text-sm) in the npm create command block", "features": "calt and zero on", "prov": "observed", "source": "https://astro.build/ (2026-10-31)", "also": [ "github.com/withastro/astro.build src/components/CodeBlock.astro (main, read 2026-10-31)" ] } }, "calibration": "Faces are published by the rebrand post (Obviously main, MDIO code) and the repo fonts.css (Obviously variable wght 100-1000, font-stretch 490-620; Inter 300-600; MDIO 400). Only Inter is open and shipped. Calibration 2026-10-31 (Playwright, deviceScaleFactor 1): each line rendered in the real face on astro.build and in candidates loaded from Google Fonts; advance width from the DOM, ink from screenshots. Targets (Obviously 700, live): \"The web framework for\" 637.1px and \"content-driven websites\" 676.5px at 48px; \"Get professional Astro support\" 537.3px at 30px; \"Astro today\" 248px at 36px; ink darkness 0.373; x-height 0.61 em, cap height 0.76 em. Candidates (width error line1/line2, darkness, x-height, cap): Hubot Sans wdth 120 wght 750 +0.83%/-0.35%, 0.373, 0.55, 0.74 (title30 -1.1%, Astro today -0.4%) CHOSEN; Archivo wdth 110 wght 900 +0.49%/+0.16%, 0.367, 0.54, 0.70 (title30 -1.3%, Astro today -2.4%); Anybody wdth 100 wght 760 +1.7%/-0.6%, 0.373, 0.60, 0.68; Encode Sans wdth 125 wght 800 -0.96% avg, 0.372, 0.56, 0.75; Mona Sans maxes out 2.8% narrow; Unbounded 7-10% wide. Hubot wins on darkness and cap height at equal width. Light intro (Obviously wdth 490 wght 290, \"is a JavaScript web framework\" 625.7px at 36px): Archivo wdth 125 wght 350, letter-spacing 0.015em -0.19%; Anybody wdth 110 wght 400 -0.27%; Hubot Sans wdth 125 -10% (too narrow). Keep the H1 box at 704px (not 24ch) so line breaks match. Mono: MDIO 0.600 em advance, x 0.53, cap 0.70, darkness 0.195; IBM Plex Mono 400 0.600/0.52/0.71/0.196 chosen. Body: the homepage renders most text in the system UI font (SF Pro on macOS), Inter only on the hero lead; Inter is real (InterVariable.woff2). Round-1 recalibration of the light intro (2026-10-31, same method, real ink 0.2361 over \"is a JavaScript web framework\" 625.7px at 36px): Archivo wdth 125 at wght 250/300/350/400/450 gave widths -4.71/-3.69/-2.52/-1.35/-0.18% and ink 0.2020/0.2121/0.2236/0.2345/0.2444. Chosen: wght 400 with letter-spacing 0.01em (closes the width gap), the lightest weight that still matches darkness; 450 read uniformly too heavy in grading. The bold word \"Astro\" (Obviously wght 475) is Hubot Sans 120/700, so the line keeps a visibly light sentence against one bold word. Round-2 recalibration (2026-10-31, specimen sheet of the real hero, section title, 20px chart label and CTA screenshotted on astro.build beside candidates): Obviously has a taller x-height (0.61 vs 0.55 em) so at equal ink its strokes are thinner than Hubot 800 and the grader read 800 as heavier and flatter twice. Final mapping: Obviously 700 at 30px and up (hero H1 48px, section titles 30px, final CTA 36px, sponsors 30px) -> Hubot Sans wdth 120 wght 750; Obviously 700 at 20px (Islands chart labels) -> Hubot Sans wdth 115 wght 700, which keeps \"WordPress\" at the real ~100px width while reading less expanded; light intro -> Archivo wdth 125 wght 350 + letter-spacing 0.015em (ink 0.2236 vs real 0.2361; the grader read 450 and then 400 as too firm, both times in the same direction); its bold \"Astro\" -> Hubot Sans 120/700. Anybody (taller x-height) was rejected: at matching width it breaks the hero into four lines and its wide letterforms are further from Obviously than Hubot. Do not raise these weights again on a single grade." }, "style": { "button_shape": "pill", "button_note": "Every button is a full pill (rounded-full). Primary on the homepage: white pill with the label in blue-purple gradient text; default .button: 1px astro-gray-100 outline pill, white text, h-14; .button-primary: blue-purple gradient fill; secondary: translucent dark pill with a faint astro-dark-100 border", "corners": "rounded-xl / 2xl (12-16px) on panels, cards and the final CTA; rounded-lg (8px) on agency tiles and inputs; full circles on gem icons", "linework": "1px hairline borders at low opacity (astro-dark-100/20, white/20); horizontal rules under tab rows", "motion": "Gentle and slow: transitions 300-500ms ease-out or ease-in-out; cards scale to 1.03 on hover; a 6s ease-in-out float of +/-8px; logo grids de-saturate until hover", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "also": [ "github.com/withastro/astro.build src/styles/tailwind.css (main, read 2026-10-31)", "github.com/withastro/astro.build src/pages/_components/Link.astro (main, read 2026-10-31)", "github.com/withastro/astro.build src/components/Card.astro (main, read 2026-10-31)" ] }, "voice": { "tone": [ "Whimsical", "Approachable", "Friendly" ], "notes": [ "The rebrand gives Houston, and through him Astro, three words: whimsical, approachable, friendly.", "Idealism of the early web: building for the web is framed as a shared, almost heroic craft ('let's build the web we want, together').", "Plain developer English on the homepage: say what it does (server-first, content-driven, zero JavaScript by default), then show a command to run.", "Numbers are always sourced on the page itself (the Core Web Vitals chart cites HTTP Archive and the Chrome UX Report).", "Space puns are part of the voice (Ready For Takeoff, See You Out There, Astronaut; the Houston mascot), used in headings, not in product claims.", "No written voice guideline is published; everything beyond the three Houston traits is observed." ], "rules": [ { "id": "traits", "kind": "guidance", "text": "Whimsical, approachable and friendly: Houston's personality, chosen to reflect Astro itself", "prov": "published", "source": "https://astro.build/blog/welcome-world/" }, { "id": "hero-case", "kind": "headline_case", "value": "sentence", "text": "Hero and big statements in sentence case (The web framework for content-driven websites)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)" }, { "id": "section-case", "kind": "guidance", "text": "Section titles, eyebrows and feature names in Title Case (Zero Lock-in, Fully Featured, Best-In-Class Performance)", "prov": "observed", "source": "https://astro.build/ (2026-10-31)" }, { "id": "cite-numbers", "kind": "guidance", "text": "Every performance number carries its dataset and a link to it", "prov": "observed", "source": "https://astro.build/ (2026-10-31)" }, { "id": "command-cta", "kind": "guidance", "text": "Pair the main CTA with the literal install command, npm create astro@latest", "prov": "observed", "source": "https://astro.build/ (2026-10-31)" }, { "id": "logo-text", "kind": "guidance", "text": "Lowercase 'astro' in the wordmark only; the name is 'Astro' in copy", "prov": "observed", "source": "https://astro.build/press/" } ], "approved": { "phrases": [ "The web framework for content-driven websites", "Build the web you want", "let's build the web we want, together", "Server-First", "Content-Driven", "Zero Lock-in", "npm create astro@latest" ], "words": [ "content-driven", "server-first", "islands", "fast" ] }, "banned": [], "banned_note": "No banned words are published.", "is_not": [ [ "Whimsical", "Childish (Houston stays simple and square)" ], [ "Approachable", "Generic devtool" ], [ "Friendly", "Salesy" ], [ "Idealistic", "Nostalgic for its own sake" ] ], "is_not_prov": "inferred", "prov": "published", "source": "https://astro.build/blog/welcome-world/" }, "spec": { "source": "https://astro.build/press/", "how": "Astro publishes no brand PDF. Logo law from the press page (astro.build/press/, read 2026-10-31); brand idea, faces and mascot from the 2023 rebrand post; tokens from the open-source site repo github.com/withastro/astro.build (sparse clone, main, read 2026-10-31); voice and proof from the homepage (observed 2026-10-31)", "provenance": "published", "motion": [ { "name": "float", "easing": "ease-in-out", "duration_ms": 6000, "use": "Infinite float of translateY -8px to +8px (animate-float)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "card-hover", "easing": "ease-out", "duration_ms": 300, "use": "Link cards scale to 1.03 on hover", "prov": "published", "source": "github.com/withastro/astro.build src/components/Card.astro (main, read 2026-10-31)" }, { "name": "link", "easing": "ease-out", "duration_ms": 300, "use": "Link color from astro-gray-200 to white (.link)", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)" }, { "name": "button", "easing": "ease-in-out", "duration_ms": 500, "use": "Pill buttons; primary label swaps gradient text for astro-blue on hover", "prov": "published", "source": "github.com/withastro/astro.build src/pages/_components/Link.astro (main, read 2026-10-31)" }, { "name": "logo-reveal", "easing": "ease", "duration_ms": 500, "use": "Integration logos go from grayscale at 65% opacity to full color on hover", "prov": "published", "source": "github.com/withastro/astro.build src/pages/_components/landing-page/Features.astro (main, read 2026-10-31)" } ], "icons": { "grid": "24px viewBox (custom src/icons); Remix Icon line set (ri/*) for feature gems", "sizes": [ { "name": "gem-glyph", "px": 20, "use": "Glyph inside a 48px gem circle (size-5 in size-12); 28px in 56px at lg" }, { "name": "ui", "px": 24, "use": "Custom UI icons (rocket, chevron, arrows), filled outline shapes in currentColor" } ], "stroke": "not published; glyphs are filled outline shapes, white on black", "caps_joins": "not published", "color": "white glyph on black, ringed by one of the four gem gradients", "rule": "Feature icons sit in 'gem' circles: a 2-3px gradient ring around a black disc tinted with the same gradient at 15-30%", "prov": "published", "source": "github.com/withastro/astro.build src/components/GemIcon.astro (main, read 2026-10-31)" }, "signature": [ { "id": "gem-gradients", "name": "Four gem gradients", "where": "Feature icon rings, eyebrow labels, the primary button, card fills and background glows", "spec": "Only four two-stop gradients: blue-purple 83.21deg #3245FF to #B845ED; blue-green 247.23deg #4AF2C8 to #2F4CB3; red-pink 66.77deg #D83333 to #F041FF; orange-yellow 266.93deg #F8E42E to #FF7D54. Each is used whole, never mixed with another", "once": "one gradient per element; a section may use a different gem than its neighbor", "example": { "ground": "#060913", "text": "Server-First", "edge": "gradient", "edge_to": "#4AF2C8" }, "dont_example": { "ground": "#060913", "text": "Server-First", "edge": "gradient", "edge_to": "#858B98" }, "dont": "invent new gradient pairs, blend three stops, or put gray in a gradient", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "also": [ "github.com/withastro/astro.build src/components/GemIcon.astro (main, read 2026-10-31)", "https://astro.build/blog/welcome-world/ (Visual Elements & Color Palette image)" ] }, { "id": "gradient-eyebrow", "name": "Gradient-text eyebrow over a white title", "where": "Above every homepage section title (What is Astro?, Best-In-Class Performance, Maximum Flexibility, Ecosystem)", "spec": "A short Title Case label (16px/24px weight 600, system UI font as served; Inter SemiBold in the repo intent) clipped to the red-pink gradient (#D83333 to #F041FF), then a white Obviously title (30px bold), then a 16px light description in #BFC1C9 at half width", "once": "one eyebrow per section", "example": { "ground": "#060913", "text": "Maximum Flexibility Zero Lock-in", "mark": "Maximum Flexibility", "mark_style": "color", "mark_color": "#F041FF" }, "dont_example": { "ground": "#060913", "text": "Maximum Flexibility Zero Lock-in", "mark": "Zero Lock-in", "mark_style": "color", "mark_color": "#F041FF" }, "dont": "gradient the title itself or the body copy", "prov": "published", "source": "github.com/withastro/astro.build src/pages/_components/SectionCopy.astro (main, read 2026-10-31)" }, { "id": "command-cta", "name": "Get Started plus the install command", "where": "Hero and final CTA", "spec": "A white 278x42 pill whose Get Started label is blue-purple gradient text (#3245FF to #B845ED), stacked 8px above a same-width dark install block (rgba(6,9,19,0.55), radius 12px) holding a chevron, npm create astro@latest in ui-monospace 14px (Menlo on macOS; MDIO in the repo intent) and a copy icon", "once": "hero and closing CTA only", "example": { "ground": "#060913", "text": "Get Started", "button": true, "button_fill": "#FFFFFF", "mark": "Get Started", "mark_style": "color", "mark_color": "#3245FF" }, "dont_example": { "ground": "#060913", "text": "Get Started", "button": true, "button_fill": "#3245FF" }, "dont": "drop the command, or fill the primary pill with flat brand blue", "prov": "published", "source": "github.com/withastro/astro.build src/pages/_components/landing-page/Hero.astro (main, read 2026-10-31)", "also": [ "github.com/withastro/astro.build src/pages/_components/landing-page/FinalCTA.astro (main, read 2026-10-31)", "https://astro.build/ (2026-10-31)" ] }, { "id": "space-glow", "name": "Night sky with nebula glow", "where": "Hero ground, section backdrops (stardust), final CTA starfield, press-page header grid", "spec": "Deep navy-black ground (#060913) lit by large, soft, rotated gradient glows masked radially (e.g. red-pink at 30% opacity, -7deg) and star specks; the hero blooms violet from the gem gradients. Optional 100px grid (bg-grid.png) faded top and bottom by a mask", "once": "one glow per band", "example": { "ground": "#060913", "text": "Start building with Astro today", "edge": "gradient", "edge_to": "#3F224D" }, "dont_example": { "ground": "#FFFFFF", "text": "Start building with Astro today", "edge": "gradient", "edge_to": "#F8E42E" }, "dont": "set the brand on a flat white page or a hard-edged gradient band", "prov": "published", "source": "github.com/withastro/astro.build tailwind.config.ts (main, read 2026-10-31)", "also": [ "github.com/withastro/astro.build src/pages/_components/landing-page/Agencies.astro (main, read 2026-10-31)", "https://astro.build/blog/welcome-world/" ] } ], "page": { "source": "https://astro.build/", "date": "2026-10-31", "prov": "observed", "how": "Measured live with Playwright at 1440x900 and 390x844 (computed styles, bounding boxes, CDP platform fonts), cross-read with the site repo (index.astro and src/pages/_components/landing-page/*.astro) for structure and copy order. Where the repo and live values differ, the live value is written here. y values are page coordinates from the top of the document.", "voices": "Two voices. (1) Homepage voice, which a landing page follows: plain developer English in short declaratives. Sentence case for the hero H1, the intro statement and the closing CTA (\"The web framework for content-driven websites\", \"Start building with Astro today\"); Title Case for eyebrows, section titles and feature names (\"Best-In-Class Performance\", \"Zero Lock-in\", \"Fully Featured\", \"Content Collections\"); each section is eyebrow + title + one or two sentence description, then proof (a sourced chart, real code, real themes, real partner logos); every number names its dataset; CTAs are literal (Get Started, npm create astro@latest, Integrate your favorite framework, Explore partner agencies). No space puns, no Houston, no exclamation marks except the release pill (\"Available now!\"). (2) Campaign/brand voice from the 2023 rebrand post (whimsical, approachable, friendly; Houston; space puns such as Ready For Takeoff): use it for blog, launch and social pieces, never in a landing page's section titles or product claims. Precedence: the press page and rebrand post are the brand law (logo, colours, faces); this homepage is how that law is applied on the web. Where they differ, both are kept and scoped: (a) the press page says the gradient logo is the default on dark, but the homepage nav and footer use the monochrome #F2F6FA logo and logomark: on a landing page build the monochrome one; (b) the repo names Inter as body and MDIO as code, but as served on 2026-10-31 everything without an explicit font class falls back to Tailwind's system stack (ui-sans-serif, system-ui, sans-serif; rendered as SF Pro on the macOS reference capture) and the hero install command uses ui-monospace (rendered Menlo). Build the landing page with that system stack for nav, eyebrows, card text, buttons and footer, Inter only where named below (hero lead, theme-card overlays), and the stand-in display face for every Obviously heading.", "nav": { "summary": "One 80px bar, not sticky (it scrolls away): monochrome astro logo at left, five centred text links (three open dropdowns), GitHub icon at right. Phone: logo left, 24px hamburger right.", "ground": "rgba(13,15,20,0.3) (#0D0F14 at 30%, class bg-black/30) laid over the hero glow, which bleeds up under it, so the bar reads deep violet-navy at left and purple at right; box-shadow 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1). No border, no backdrop blur.", "height": "80px at both widths (repo h-header 5rem)", "border": "none", "position": "static (position: static; it is NOT fixed or sticky). The hero section starts at y 80 directly under it.", "container": "nav max-width 1280px centred (x 80-1360) with 32px side padding, so content runs x 112-1328 (1216px) on desktop; 16px padding on phone (x 16-374)", "logo": { "variant": "monochrome wordmark+mark in #F2F6FA (nav-astro-logo.svg, 114x30); not the gradient logo", "px": "114x30", "position": "x 112, y 25 desktop; x 16, y 25 phone" }, "links": { "count": 5, "labels": [ "Documentation", "Blog", "Resources", "Community", "Enterprise" ], "hrefs": [ "https://docs.astro.build", "/blog/", "dropdown", "dropdown", "dropdown" ], "size": "16px/24px system ui-sans-serif 300", "weight": 300, "color": "#BFC1C9; hover #FFFFFF (color transition 300ms ease-out)", "alignment": "a centred flex group x 438-1063, 48px gaps (Documentation x 438, Blog x 596, Resources x 676, Community x 820, Enterprise x 970), top y 28", "dropdown_marker": "12x12 chevron (icon-chevron) after Resources, Community and Enterprise, 8px after the label, #BFC1C9", "dropdowns": "Resources: Themes, Integrations, Site showcase, Playground, Tutorials; Community: Discord, Sponsors, Merch; Enterprise: Agencies (with a small \"New\" badge: 14px, background rgba(50,69,255,0.4)), Case studies. closed at rest (animation only on open): a vertical list under the label, each item 158x38, 15px line icon then label 16px/16px 400 #BFC1C9" }, "actions": "GitHub mark only: 28x28 white #FFFFFF icon (nav-github-FFFFFF.svg) centred in a 52x52 hit area at x 1276, y 14. No buttons and no search in the bar.", "sticky": false, "phone": { "shows": "logo 114x30 at x 16, y 25; hamburger (three 1.5px lines, 24x24) at x 350, y 28 in #BFC1C9", "menu": "full-width drawer under the bar on the dark #0D0F14 ground: rows Blog, Resources, Community, Enterprise at 20px/28px 300 #BFC1C9 with 24px padding and 1px #343841 dividers (the last three are accordions with a chevron at right); then a row of eight 48x48 white social icons (Bluesky, Discord, GitHub, LinkedIn, Mastodon, Reddit, X, YouTube); then a full-width \"Read the docs\" pill 342x56, blue-purple gradient fill (83.21deg #3245FF to #B845ED), white 16px 500 Inter label", "cta": "none in the bar; only the drawer's Read the docs pill" }, "weight_note": "Nav links Documentation/Blog and the Resources/Community/Enterprise buttons are the system UI stack at 300 (SF Pro Light on macOS), 16px/24px, #BFC1C9; the GitHub icon is #FFFFFF 28px. Release pill 14px system 300; install command ui-monospace 14px (Menlo has no light, so it renders regular 400). Use the system stack, never Inter, for these; on the dark ground keep -webkit-font-smoothing auto (subpixel default), not antialiased, so the light strokes keep their density (observed 2026-10-31)" }, "hero": { "summary": "Centred, text-only hero on a blurred violet-to-indigo glow: a two-part release pill, a two-line 48px bold display headline, a two-line light Inter lead, a white Get Started pill stacked on a dark install-command block, then \"Used by the largest companies around the world:\" over a two-row wall of 14 white company logos. No product image.", "desktop": { "section": "y 80-844 (764px tall), full width; inner column max-width 768px (sm:max-w-screen-md) centred with 32px padding, margin-top 96px", "column_split": "single centred column; everything text-align center", "vertical_anchors": "release pill y 176-212 (219x36, x 611); H1 y 244-350 (2 lines of 52.8px); lead y 366-420 (2 lines of 27px); Get Started y 452-494; install block y 502-544; \"Used by...\" line y 640-664; logo row 1 y 688-744, row 2 y 776-812; section ends y 844", "gaps": "32px between pill, title block and button stack (lg:gap-8); H1 to lead 16px (mb-4); button to install block 8px (grid gap-2); 96px from install block bottom to the \"Used by\" line (mt-16 + 32px padding)", "text_max_width": "H1 704px box (x 368-1072; repo sm:max-w-[24ch] in Obviously; use 704px with the stand-in, not ch), text-wrap balance, breaks after \"for\": \"The web framework for / content-driven websites\" (lines 637px and 677px wide); lead 704px box, breaks after \"marketing\" (line 1 \"Astro powers the world's fastest marketing\", line 2 \"sites, blogs, e-commerce websites, and more.\")", "media": "none in the column: the only image is the blurred background glow (hero-background.webp)", "cta_size": "Get Started 278x42 and the install block 278x42, both x 581-859 (a 278px grid column centred)" }, "phone": { "order": "release pill (left segment only), H1, lead, Get Started, install block, \"Used by\" line, logo wall", "alignment": "centred, 16px gutters", "sizes": "section y 80-804 (724px); pill 104x36 at x 143, y 144; H1 30px/33px in 3 lines (\"The web framework / for content- / driven websites\", the hyphen breaks), y 200-299, 358px wide; lead 18px/27px 3 lines y 315-396; Get Started 278x42 at x 56, y 416; install block 278x42 at y 466; \"Used by the largest companies around the world:\" y 556 (one line, 352px); logo wall from y 596", "logo_wall": "smaller logos (Google 74x24, Unilever 33x36, Visa 49x16, Microsoft 83x16, Porsche 120x8, OpenAI 74x24, Netlify 78x32, NordVPN 92x20, Cloudflare 119x24, NBC News 109x12, The Guardian 61x20, Michelin 123x24, Proton 63x16, Webflow 96x16) wrapping into 7 centred rows with 24px row gap and 32px column gap; the wall is capped at 256px tall and masked linear-gradient(to bottom, white 0, white 33%, transparent) over 16rem, so rows 5-7 fade out (The Guardian, Michelin, Proton are dim, Webflow invisible); -64px bottom margin" }, "at_rest": { "ground": "page ground #060913; behind the hero an hero-background.webp (256x214 source, quality 10) stretched to 2353x1969, object-fit cover, centred horizontally on the page (left -456px at 1440 wide), top at page y -684px at 1440 (that is 764px above the hero section, whose top is y 80, so it also lights the nav); at 390 its top is page y -644 (724px above the section) and left -981.5px, still centred, filter blur(16px), z-index -50. Sampled from the capture, it reads indigo #1A146A at top-left, violet #34157C at centre, saturated purple #6019A5 at right, fading to #140C32 at the section bottom (y 844); the nav bar over it samples #111140 at left. Place the file; do not redraw it with CSS gradients. Higher-resolution original: hero-background-source.png (same art).", "animation": "none at rest. The logo wall is static (not a marquee)." }, "media": "hero-background.webp (blurred glow) and the 14 logo-wall SVGs; no screenshot or illustration", "type": { "h1": "Obviously 700, 48px/52.8px (line-height 1.1) desktop (36px at md, 30px/33px phone), tracking normal, #F2F6FA, centred, text-wrap balance; font-feature-settings calt, cv09, liga, salt, ss06, ss11. Stand-in: Hubot Sans wdth 120 wght 750 (see kit.typography.calibration)", "lead": "Inter 300, 18px (CSS asks 200, but the served Inter face spans 300-600, so it renders at 300; build 300, never 200)/27px, #BFC1C9, centred (the only Inter on the hero)", "pill": "14px/20px system ui-sans-serif 300: left segment \"Astro 7.4\" in #FFFFFF, right segment \"Available now!\" in #F2F6FA", "used_by": "16px/24px system ui-sans-serif 300, #F2F6FA, centred" }, "cta": "Get Started: white #FFFFFF pill 278x42, border 1px transparent, padding 8px 16px, label 16px/24px 400 system font set as blue-purple gradient text (linear-gradient(83.21deg, #3245FF, #B845ED) clipped to text); links to https://docs.astro.build/. Under it, 8px gap: the install block, 278x42, background rgba(6,9,19,0.55), radius 12px, padding 8px 16px: a 12px chevron (rotated to point right) #BFC1C9, 8px gap, \"npm create astro@latest\" in ui-monospace 14px/20px 300 #BFC1C9 (renders Menlo on macOS; IBM Plex Mono 400 if you need a webfont), then a 20x20 copy icon #BFC1C9 at the right (x 819).", "release_pill": "Above the H1: a 36px-tall pill (radius 9999px) on rgba(6,9,19,0.55), two segments with no gap: left segment px 12px, background linear-gradient(to top right, #1321AC, #881ABD), radius 9999px, white \"Astro 7.4\"; right segment px 12px, \"Available now!\" then 8px gap then a 16px right arrow #F2F6FA. 219x36 desktop. Phone hides the right segment and shows the arrow inside the left segment (104x36). Links to the latest release blog post. The version text changes with releases; keep the two-segment structure.", "proof": "Logo wall, desktop: 14 monochrome #F2F6FA logos in two centred rows inside a 1376px flex-wrap box (x 32-1408, padding 0 16px, gap 32px row / 40px column, align-items center). Row 1 (y 688-744): Google 111x36, Unilever 51x56, Visa 74x24, Microsoft 124x24, Porsche 210x14, OpenAI 111x36, Netlify 118x48, NordVPN 147x32. Row 2 (y 776-812): Cloudflare 178x36, NBC News 181x20, The Guardian 98x32, Michelin 185x36, Proton 94x24, Webflow 143x24. Heights are per logo (repo classes sm:h-9/h-14/h-6/h-3.5/h-12/h-8/h-5), width auto. Files: logo-wall-logos-*.svg (the -F2F6FA copies are already recoloured)." }, "sections": [ { "name": "Intro: What is Astro?", "summary": "Left-aligned statement in a light wide display face with the bold word \"Astro\", then three gem-icon points in a 3-column row.", "ground": "#060913 (page ground); a faint violet bloom from the hero glow still tints the top-right corner", "desktop": { "band": "section y 988-1386 (398px), margin-top 144px (sm:mt-36) after the hero; container max-width 1280px, padding 32px, so content x 112-1328", "eyebrow": "\"What is Astro?\" y 1023, 16px/24px 600 system font, red-pink gradient text (linear-gradient(66.77deg, #D83333, #F041FF) clipped), 110x18 box", "h2": "y 1048, max-width 1024px, 2 lines of 40px: \"Astro is a JavaScript web framework optimized / for building fast, content-driven websites.\" Obviously 36px/40px, font-variation-settings wdth 490 wght 290 (light, wide) in #F2F6FA; the first word \"Astro\" is at wdth 490 wght 475 (bold). Line 1 is 968px wide. Stand-in: Archivo wdth 125 wght 350, letter-spacing 0.015em, with \"Astro\" at Hubot Sans wdth 120 wght 700", "points": "3 equal columns 373px wide at x 112, 533, 955 (48px gap, lg:grid-cols-3), top y 1160 (32px below the H2, space-y-8): gem icon 62x62, 12px gap, title y 1234, description y 1258" }, "phone": { "band": "y 884-1672, margin-top 80px, padding 16px", "h2": "24px/32px in 4 lines, 358px wide (y 928-1056)", "points": "one column, 32px apart: gem 52x52 (2px ring, 48px disc, 20px glyph), titles at y 1152, 1368, 1560" }, "anatomy": [ "Eyebrow sits 4px above the title (space-y-1); the eyebrow is the only gradient text in the block", "Gem icon: outer circle 62px with 3px padding filled by the gem gradient (the ring); inner 56px disc #0D0F14 overlaid with a to-bottom-right tint of the same pair at low alpha; 28px white line glyph centred (gem-ri-*-FFFFFF.svg). Server-First = blue-green (247.23deg #4AF2C8 to #2F4CB3; tint #3245FF 25% to #4AF2C8 25%), Content-Driven = red-pink (66.77deg #D83333 to #F041FF; tint 20%), Customizable = orange-yellow (266.93deg #F8E42E to #FF7D54; tint 15%)", "Point title 16px/24px 600 #FFFFFF (\"Server-First\", \"Content-Driven\", \"Customizable\"); description directly under it 16px/24px 300 #BFC1C9, text-wrap balance, 3-4 lines in 373px" ], "components": [ "eyebrow", "gem_icon" ] }, { "name": "Astro Islands: Core Web Vitals bar chart", "summary": "Section copy (eyebrow, white title, half-width description) over a dark rounded panel holding a five-row horizontal bar chart: Astro's bar in the blue-green gradient with a glowing mint score, four competitors in flat grey; a sourced footnote under it.", "ground": "#060913 with ONE compact teal haze behind the chart panel (GreenishStardust.astro): two full-width rounded-full blocks of base height 384px at lg+ (320 md, 224 below), placed in normal flow just above the panel and pulled behind it (-z), rotate(-7deg); block 1 scaleX 1.5 scaleY 2.5 at opacity 0.75, block 2 scaleX 2.5 scaleY 4.2 at opacity 0.5; both filled linear-gradient(270deg, rgba(64,222,191,0.3), rgba(51,75,169,0.3)) and masked by the brand radial mask (layout.radial_mask: alpha 0.8 at centre, 0.36 at 31.5%, 0 at 60%). The two blocks overlap into a single soft haze centred on the panel; at 30% colour x 0.8 mask x 0.75 the brightest point is a dim teal-blue, the section copy above stays on near-black, and no haze reaches the neighbouring sections. Never render it as two distinct glows or as a band of light across the section", "desktop": { "band": "section y 1530-2140, margin-top 144px; container 1280px with 32px padding (content x 112-1328)", "copy": "eyebrow \"Best-In-Class Performance\" y 1533; H2 \"Astro Islands\" y 1558 (Obviously 30px/36px, the renders 700, #FFFFFF); description y 1606, width 608px (lg:w-2/3 xl:w-1/2), 3 lines of 16px/24px 300 #BFC1C9", "panel": "y 1710-2140, x 112-1328 (1216x430), background #0C0F19, 1px solid rgba(133,139,152,0.2) border, radius 16px, padding 32px; margin-top 32px under the description", "chart": "caption \"% of real-world sites with good Core Web Vitals\" at y 1743, 16px/24px 400 #858B98; rows start y 1799 and repeat every 56px (row tops 1799, 1855, 1911, 1967, 2023); each row: label column x 145, 144px wide, right-aligned, Obviously 20px/28px 700 #F2F6FA (stand-in Hubot Sans wdth 115 wght 700); 16px gap; track x 305-1295 (990x40), radius 8px, outline 1px offset 4px (Astro #545864, others #343841); fill bar from the track's left edge, height 40px, radius 8px, width = score % of the track (Astro 71% = 703px, WordPress 48% = 475px, Gatsby 45% = 446px, Next.js 35% = 347px, Nuxt 28% = 277px); fill colour Astro = blue-green gradient (247.23deg #4AF2C8 to #2F4CB3, so mint at the right end), others #343841; inside the fill at 8px from its left, the framework logo 19-24px #F2F6FA; 8px after the fill, the score: Astro \"71%\" 30px/36px 600 #4AF2C8, others 20px/28px 600 #858B98", "footnote": "y 2086, 20px below the last row: \"View the full dataset · Based on real-world performance data from HTTP Archive and the Chrome UX Report.\" 16px/24px #858B98; the three links #F2F6FA, underline offset 2px, decoration #858B98 (hover white)" }, "phone": { "band": "y 1752-2382, padding 0 16px", "copy": "H2 24px/32px; description 4 lines", "panel": "y 1952, 358x430, radius 12px, padding 16px", "chart": "labels hidden (lg:block only), so each row is just the track: 324px wide, 32px tall, rows every 48px from y 2049; outline offset 2px; Astro score 24px/32px, others 18px/28px" }, "anatomy": [ "Section copy pattern used by every section from here on: eyebrow (gradient text) 4px above a white Title Case Obviously title, 12px to a half-width description, then 16px to an optional secondary pill CTA", "The panel is the proof: real numbers with the source named and linked under them, never a number without its dataset", "Only the Astro row is coloured; competitor rows are flat #343841 with grey scores" ], "components": [ "eyebrow", "panel", "bar_chart_row" ] }, { "name": "Zero Lock-in: framework tabs, code and cap", "summary": "Section copy with a secondary pill CTA, a row of five round framework tabs (React active), a full-bleed hairline, then a two-panel stage: a syntax-highlighted Astro code card (2 columns wide) and a fake browser window showing a product card with the Astro cap and an Add to cart button.", "ground": "#060913", "desktop": { "band": "section y 2284-3071 (full width; inner blocks in the 1280 container)", "copy": "eyebrow \"Maximum Flexibility\" y 2287; H2 \"Zero Lock-in\" y 2312; description y 2360 (2 lines); secondary button \"Integrate your favorite framework\" 275x42 at y 2424", "tabs": "row at y 2502, x from 112, 24px gaps (96px pitch): each tab 72x108 = a 72px circle (4px ring, 64px #0D0F14 disc, 32px logo) and a 16px/24px 500 label 12px below (y 2586). Order: React, Vue, Preact, Svelte, Solid", "rule": "1px #23262D line across the full 1440px at y 2646 (32px under the tabs)", "stage": "grid of 3 columns (394.7px each, 16px gap) starting y 2679: code card spans 2 columns (x 112-917, 805x392); browser window in column 3 (x 933-1328, 395x462) pulled up 72px (lg:-mt-[4.5rem]) to y 2607 so it overlaps the rule and rises beside the tabs" }, "phone": { "band": "copy y 2462-2664; tabs y 2684 (52px circles, 2px ring, 48px disc, labels 16px, 68px pitch, horizontally scrollable row); rule y 2792", "stage": "one column, 12px gap; the browser window comes FIRST (order-first): 358x385 at y 2809 with the cap 197x160; then the code card 358x328 at y 3206, code clipped on the right (horizontal scroll)" }, "anatomy": [ "Tab states: active (React) ring #61DAFB, disc tinted #61DAFB at 20%, logo in colour, label #61DAFB; inactive rings #858B98, logos grayscale, labels #858B98; hover ring #BFC1C9. Active colours per framework: React #61DAFB, Vue #41B883, Preact #673AB8, Svelte #FF3E00, Solid #76B3E1", "Code card: outer frame #07040F, padding 4px, radius 20px; inside it a 
 797x384 on #17191E with a 1px rgba(133,139,152,0.2) border and radius 16px; code 13.6px/22.44px ui-monospace, padding about 24px; lines 2 and 12 highlighted (line 2 = the BuyButton import, line 12 = the  line; counting the frontmatter fence as line 1) with full-width rgba(38,74,137,0.5) bars (#264A89) and a 2px left marker. Syntax colours: frontmatter fences --- #8B909D, keywords (import, from, const, await) #54B9FF, identifiers #4BF3C8, strings #FFD493, punctuation #EEF0F9, components/variables #ACAFFF, function call #00DAEF. The code (verbatim, it is product UI): ---, import BuyButton from '../components/BuyButton.jsx';, import { getProductDetails } from \"ecommerce-package\";, import ProductPageLayout from '../layouts/ProductPageLayout.astro';, blank, const product = await getProductDetails(Astro.params.slug);, ---, blank, , {product.imageAlt}, 
{product.name}
, , ",
            "Browser window: #07040F fill, 1px #23262D border, radius 16px; top bar 39px tall with a 1px #23262D bottom border and three 12px #23262D dots (12px from the left, 8px apart); body 421px tall, overflow hidden, content bottom-aligned: a device frame 262px wide (x 1000-1262, from y 2719 to the bottom edge, cut off) #23262D with radius 24px 24px 0 0 and 12px padding; inside it a #17191E screen (238px wide, radius 16px 16px 0 0, padding 16px) holding the cap image (zero-lockin-astro-cap.webp, 206x224, radius 12px, object-fit contain), then a row \"Snapback Cap\" left and \"$25.00\" right (16px/24px 500 #858B98), then an \"Add to cart\" button 206x40, #61DAFB fill, #030712 text 16px 400, radius 8px (the button colour follows the active tab)",
            "The hairline is full-bleed while everything else stays in the 1216px column"
          ],
          "components": [
            "eyebrow",
            "button_secondary",
            "framework_tab",
            "code_card",
            "browser_window"
          ]
        },
        {
          "name": "Fully Featured: feature card grid",
          "summary": "Section copy, then a dense 3-column grid of 14 dark rounded cards: five carry small product illustrations (docs being scanned, a giant 0, view-transition tiles, image placeholders, a 3D file tree, a component grid), two carry logo rows, six are text only.",
          "ground": "#060913",
          "desktop": {
            "band": "section y 3215-4714 (container 1280, content x 112-1328)",
            "copy": "eyebrow \"Everything you need\" y 3218; H2 \"Fully Featured\" y 3243; description y 3291 (2 lines)",
            "grid": "3 columns 395px with 16px gaps (x 112, 523, 933), grid-auto-flow dense, starting y 3371 (32px below the description). Placement (x, y, w x h): Content Collections 112,3371 395x378 (tall, art on top); Zero JavaScript, By Default 523,3371 395x378 (art on top); View Transitions 933,3371 395x378 (art on top); Optimized Images 112,3765 805x203 (wide, 2 inner columns: text left, art right); UI Integrations 933,3765 395x203 (text then logo row); File-Based Routing 112,3984 395x370 (tall, text then art); Middleware 523,3984 395x157; Actions 933,3984 395x157; Deployment Adapters 523,4157 395x197 (text then logo row); Simple Templating 933,4157 395x386 (tall, text then art); Instant Page Loads 112,4370 395x173; AI-Ready 523,4370 395x173; Environment Variables 112,4559 395x154; Dev Toolbar 523,4559 395x154. Rows are content-height; the third column ends at y 4543 and the grid ends y 4713",
            "card": "background #0C0F19, 1px solid rgba(133,139,152,0.2) border, radius 16px, overflow hidden; text block padding 24px with 8px between title and description; title 16px/24px 600 #FFFFFF (the title is the card link, stretched over the whole card); description 16px/24px 300 #BFC1C9, text-wrap pretty"
          },
          "phone": {
            "band": "y 3614-6883, padding 0 16px",
            "grid": "one column 358px, 8px gaps (gap-2), cards in the same order; text padding 16px, radius 12px; descriptions 14px/20px 300; art keeps its size (Content Collections 314px tall, Zero JS 334, View Transitions 314, Optimized Images 334 with art first, UI Integrations 155)"
          },
          "anatomy": [
            "Content Collections art (top, min-height 208px, padding-top 24px at lg): the art row is split into two halves of the 395px card (about 197px each), both overflow hidden. LEFT half (transparent): a row of 64x80 unscanned docs (#6B7AAB/#2F3854 page with three #6B7AAB 4px text bars) with 32px gaps, anchored right: 4px; each doc has an 18px #D83333 circle with a white 14px x at bottom -6px right -8px. At rest (paused marquee, translateX(0)) exactly TWO full docs are visible: doc A at x 129-193 and doc B at x 33-97 of the left half, vertically centred; the next doc ends at x 1, so only a sliver of its red badge peeks at the left edge. RIGHT half: ground #0C0F19, a 1px scanner line on its left edge, and beside it a 48px-wide blurred glow (blur 24px, height 2/3 of the art, linear-gradient(42deg, rgba(50,69,255,0.3), rgba(188,82,238,0.3))) that reads as a restrained violet light; the scanned docs start at left -952px, so at rest the right half shows NO docs, only the dark ground and the glow. Animation only: a 50s linear marquee",
            "Zero JavaScript art (top, 208px), RESTING STATE: the big \"0\" dominates and reads as a smooth dark charcoal numeral: system font 700, 200px/200px, text filled with linear-gradient(to bottom, #545864, rgba(35,38,45,0.5)) via background-clip:text, the whole numeral at opacity 0.7, a 2px rgba(255,255,255,0.06) text stroke and drop-shadow(0 10px 8px rgba(0,0,0,0.04)) drop-shadow(0 4px 3px rgba(0,0,0,0.1)). Behind it a dot field that is barely visible: dots are 1px (radial-gradient(#fff 0.5px, transparent 0.5px) as a mask, mask-size 5px 5px) filled with the blue-purple gradient, the whole layer at opacity 0.3 AND masked by radial-gradient(closest-side, #fff 40%, transparent 100%). Never make the dots larger than 1px or the layer brighter than 0.3: in the capture the field is a faint grey-violet texture, not a visible purple pattern. Hover/in-viewport only: opacity 0.7 and a green-blue fill (animation only)",
            "View Transitions art (top, padding 16px 16px 0, at xl padding-top 24px): five rounded 12px tiles in two rows, 8px gaps: three 115x96 then two 176x96. The tile gradients (to top right) are #211F2F->#074170, #184560->#08203E, #000328->#103783, #243748->#0A3431, #133A94->#08203E, BUT the whole tile group has mix-blend-mode: luminosity at rest, so over the dark card it renders as desaturated charcoal greys, never blue or teal. Build it with mix-blend-mode: luminosity (or filter: grayscale(1)) on the wrapper. Colour returns only on hover (animation only)",
            "Optimized Images art (right half of the wide card): dot grid as above; a sharp 120x90 image placeholder (feature-image-placeholder-png-120x90.svg, radius 8px, soft drop shadow) labelled \"3600px • PNG\" in MDIO 12px/16px 400 #858B98 tracking 0.3px, overlapped to the right by a blurred grayscale 90x68 copy (filter blur(6px) grayscale(1), opacity 0.75) labelled \"800px • WEBP\" in #FFFFFF",
            "UI Integrations and Deployment Adapters: after the text, a row of seven 28px logos with 24px gaps, padding 0 24px 24px, shown grayscale at opacity 0.65 (full colour on hover). UI: React, Vue, Svelte, Angular, Preact, Solid, Qwik. Adapters: Node.js, Cloudflare, Vercel, Netlify, SST, Deno, AWS (feature-logos-*.svg)",
            "File-Based Routing art (bottom, max-height 224px, padding 16px): a 224px-wide file-tree card in a perspective wrapper (perspective 500px, perspective-origin 50% 30%) transformed rotateZ(-10deg) rotateY(20deg) rotateX(40deg) translateX(5%) translateY(-10%) translateZ(50px) at rest; 1px rgba(255,255,255,0.2) border, radius 8px, background linear-gradient(to top right, #1D2025, #2D3039), padding 6px 0 80px 8px, mask-image linear-gradient(to bottom, white 0%, white 33%, transparent 90%); rows 14px/25.4px #BFC1C9, tree lines 1px #545864, everything grayscale(1) at rest. On top of the whole art area sits a full overlay linear-gradient(to bottom, transparent, transparent, #0C0F19), so the lower half of the tree fades into the card ground. Luminance target: the tree must read as a dim, subordinate diagram (brightest pixels the #BFC1C9 labels in its top third only); the dot field is the same 0.3-opacity 1px dots as Zero JS and the two glows (blue-purple 320px circle, red-pink 208px circle, both radial-masked) are at opacity 0.05, effectively invisible",
            "Simple Templating art (bottom, 208-224px tall): a 16-column x 8-row grid over the art box; 1px white lines at opacity 0.10 on rows 2/4/6/8 and columns 2/4/.../16, each fading out at its ends. AT REST exactly ONE chip is visible: , spanning columns 2-7 and rows 2-3 (about 139x44), radius 8px, 1px rgba(255,255,255,0.1) border, background linear-gradient(to top right, #17191E, #282C34), padding 10px, MDIO (stand-in IBM Plex Mono) 12px #BFC1C9. The other chips (, , 
,