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.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A content-first framework system that combines a centered onboarding story with soft release context, command proof, integration choices, and performance evidence.
Deep indigo and violet atmosphere, white content, rounded controls, and mint fle themeTypography
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.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
11 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
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 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
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.