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
**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.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
**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 (, , ,