Style identity
Green Runtime
A direct technical system for runtime onboarding that makes installation, built-in tooling, security, and release context easy to scan.
Dark technical minimalism with a confident mint action and cool runtime glow. themeDesign system Pro AI Kit13 components
Deno-inspired Green Runtime
An original, unofficial Deno-inspired system for runtime onboarding, built-in developer tooling, and security-aware technical marketing surfaces. It retains only 13 focused elements supported by Deno's live landing-page workflows.
Desktop · 1440 × 15528
Foundations
The visual decisions behind the system
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Visit website
Typography
Font families
Inter
Body, navigation, hero headings, controls, and release labels observed on the live Deno homepage.
Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif- Weights
- 400,500,600,700
- Sizes
- 14px,16px,36px,72px
- Line height
- 20px,24px,39.6px,79.2px
- Tracking
- 0,-0.9px,-1.8px
Fallback: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
Runtime mono
Install commands, package names, version values, and utility labels.
ui-monospace, SFMono-Regular, Menlo, Consolas, Monaco, Liberation Mono, monospace- Weights
- 400,500,600
- Sizes
- 12px,13px,14px
- Line height
- 18px,20px,22px
- Tracking
- 0,0.02em
Fallback: monospace
Palette
Core colors
Runtime canvas / light
#f1faf5Soft green documentation field.
Runtime canvas / dark
#0a100fPrimary near-black runtime surface.
Panel / light
#ffffffInstall and feature card surface.
Panel / dark
#111a17Raised command or feature surface.
Ink / light
#12201aReadable dark copy on the light field.
Ink / dark
#edfff3High-contrast runtime copy.
Runtime mint / light
#238f61Primary install action and success.
Runtime mint / dark
#8cf2b2Primary action and focus on dark.
Cool blue
#6ab7ffSecondary tool and link signal.
Warm warning
#f3c06eRelease or caution state.
Hairline
#30433eQuiet panel and list separation.
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero desktop | 72px | 700 | 79.2px | — |
| Hero mobile | 39.25px | 700 | 43.175px | — |
| Section desktop | 36px | 700 | 39.6px | — |
| Body | 16px | 400 | 24px | — |
| Utility | 14px | 600 | 20px | — |
| Command | 13px | 500 | 20px | — |
Spacing & shape
Layout rhythm
- Density
- Base unit
- Max width
- Section gap
- Card padding
- Element gap
Iconography
Compact stroke-based chevrons, copy glyphs, product marks, and social icons authored in the site UI.
1.5px to 2px; use currentColor and preserve a 24px viewBox. stroke · 14px / 16px / 24px
Use currentColor, pair symbols with labels for important actions, and preserve optical alignment.
System metrics
Radius
Sm 6pxValue 6pxMd 10pxValue 10pxLg 16px
Spacing
1 4pxValue 4px2 8pxValue 8px3 12px
Motion
Fast 180msValue 180msStandard 300msValue 300msEasing ease-out
Guidelines
Do
- Keep install and GitHub/community actions adjacent to the runtime promise.
- Use mint for success and action, blue for secondary tool context, and warning sparingly.
- Show the exact command and its target platform instead of hiding setup behind prose.
- Keep skip links, keyboard focus, and copy status visible to assistive technology.
Don't
- ×Do not overload the hero with every Deno product.
- ×Do not use a generic security warning tone; explain permissions calmly.
- ×Do not rely on a moving glow to communicate readiness.
- ×Do not copy Deno's logo, wording, release art, or source imagery.
Imagery
Prefer original CSS glows, terminal shapes, and simple diagrams. Do not use Deno logos, screenshots, live-site illustrations, or proprietary assets.
Layout
Lead with one direct runtime promise, a two-action group, and an install proof block. Split explanation and tooling on desktop; stack them in reading order at 390px.
Concept
A complete visual language, ready to inspect.
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
Green Runtime Interface Elements
13 published components in collection order
Components
Built from the same system
Production-ready specimens from this AI Kit's approved collection.
More like this
Postman-inspired API Orbit
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
v0-inspired Prompt Workshop
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
Runway-inspired Real-World Studio
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.
Observable-inspired Signal Notebook
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.
Replit-inspired Build Canvas
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.