An original, unofficial Astro-inspired system for content-driven framework onboarding, integration choices, performance proof, and documentation-led exploration. It retains only 11 focused elements supported by Astro's live homepage.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
Style identity
A content-first framework system that combines a centered onboarding story with soft release context, command proof, integration choices, and performance evidence.
Reference style: Deep indigo and violet atmosphere, white content, rounded controls, and mint fleTypography
Obviously
Hero and large content headings observed in the current Astro homepage.
Obviously, obviously-fallback, system-ui, sans-serifFallback: system-ui, sans-serif
Inter
Navigation, body copy, labels, and controls observed in the live site.
Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, sans-serifFallback: ui-sans-serif, system-ui, sans-serif
Code mono
npm create command, code examples, and metric values.
ui-monospace, SFMono-Regular, Menlo, Consolas, monospaceFallback: monospace
Palette
Content canvas / light
#f7f3ffPale violet documentation field.
Content canvas / dark
#0c0f19Observed deep navy hero canvas.
Panel / light
#ffffffFeature and command surface.
Panel / dark
#14192aRaised content and proof surface.
Ink / light
#1f1734Readable dark type on pale field.
Ink / dark
#f2f6faObserved hero and feature text.
Violet action / light
#7e48d8Primary CTA and selected integration.
Violet action / dark
#a78bfaHigh-contrast action on dark.
Island mint
#a9f7d2Framework flexibility and performance signal.
Muted lavender
#c3b3e7Supporting copy on dark.
Hairline
#30433eQuiet panel separation.
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero desktop | 48px | 700 | 52.8px | — |
| Hero mobile | 30px | 700 | 33px | — |
| Lead section | 36px | 300 | 40px | — |
| Body | 16px | 400 | 24px | — |
| UI | 16px | 600 | 24px | — |
| Command | 13px | 500 | 20px | — |
Spacing & shape
Iconography
Use currentColor, pair symbols with labels for important actions, and preserve optical alignment.
System metrics
Radius
Spacing
Motion
Guidelines
Imagery
Prefer original abstract gradients, CSS metric bars, and framework-neutral diagrams. Do not ship Astro's logo, brand illustrations, or copied page imagery.
Layout
Center the hero and command first, then branch into feature cards, performance comparison, and integration choices. At 390px preserve one vertical content axis and keep the menu explicit.
Assigned collection
11 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.
