Overview
Build a dark system that feels technical, open-source-adjacent, and community alive. A cosmic publishing system built from dark violet-blue atmosphere, bright full-pill actions, and framed technical proof.
2
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Astro Home design analysis
Build a dark system that feels technical, open-source-adjacent, and community alive. A cosmic publishing system built from dark violet-blue atmosphere, bright full-pill actions, and framed technical proof.
Image Direction
Use dark product or ecosystem cards, soft nebula gradients, and precise technical proof. Visuals should amplify the builder mood without becoming space-opera art.
Colors
The strongest action fill is white. Purple and cyan support the atmosphere, while the page itself lives in layered dark blues and charcoal panels.
Typography
Use a crisp contemporary sans with restrained mono support. The brand voice should feel like an opinionated builder tool, not a luxury magazine.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Cosmic Builder Rail
A cosmic publishing system built from dark violet-blue atmosphere, bright full-pill actions, and framed technical proof.
cosmic, technical, and community-driven
Primary mode: darkweb framework marketingtechnical-marketing
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
cosmic, technical, and community-driven
Density
4
Variance
3
Motion
2
Signals
dark nebula backdrop · white pill CTAs · soft violet gradients · technical rail links
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Nebula White
#FFFFFF
Cosmic Night
#0B0F19
Gradient Violet
#7C5CFF
Plasma Cyan
#7EE7FF
Panel Night
#141B2B
Muted Space Gray
#BEC4D1
Orbit Border
#2B3346
Usage rules
White should own the call-to-action moments, making them pop out of the cosmic field.
Use violet and cyan as atmospheric and data accents rather than broad text colors.
Keep the dark surfaces layered enough to read but never muddy.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
88px
Token Radii
Corner radii tokens with a live surface sample.
sm
8px
md
14px
lg
24px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter
sharp builder headline voice
Body
Inter
technical but approachable support voice
Mono
IBM Plex Mono
documentation and utility label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.5rem/—
Display
H2
2.35rem/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use a contemporary sans with enough weight to feel like a framework brand, not a gaming brand. · Let mono labels show up in release, docs, or utility contexts only. · Favor concise copy blocks and structured supporting links.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
150ms-220ms
Easing
cubic-bezier(.22,.82,.2,1)
Spring
stiffness 105, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 150ms-220ms |
easing | cubic-bezier(.22,.82,.2,1) |
spring | stiffness 105, damping 18 |
Layout Principles
Lead with a cosmic hero and supportive announcement rail, then move into framed proof panels and docs/community pathways.
Keep sections modular and link-rich so the ecosystem feels active.
Use gradients as backlight and atmosphere, not as the primary content surface.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid transparent
Radius
999px
Padding
10px 18px
Min height
42px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
rgba(20,27,43,0.85)
Text
#FFFFFF
Border
1px solid #2B3346
Radius
999px
Padding
10px 18px
Min height
42px
Shadow
none
Typography
body
Cards feature
Feature Card
Component preview content
Base Attributes
Background
#141B2B
Text
#FFFFFF
Border
1px solid #2B3346
Radius
24px
Padding
24px
Shadow
0 18px 40px rgba(0,0,0,0.28)
Cards strip
Feature Card
Component preview content
Base Attributes
Background
rgba(20,27,43,0.72)
Text
#FFFFFF
Border
1px solid #2B3346
Radius
999px
Padding
8px 16px
Shadow
none
Navigation item
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#BEC4D1
Active text
#FFFFFF
Item padding
10px 12px
Item radius
8px
Badges release
Base Attributes
Background
rgba(20,27,43,0.9)
Text
#FFFFFF
Border
1px solid #2B3346
Radius
999px
Padding
8px 16px
Shadow
none
Inputs field
Base Attributes
Background
#141B2B
Text
#FFFFFF
Border
1px solid #2B3346
Radius
14px
Padding
12px 16px
Min height
42px
Placeholder
rgba(255,255,255,0.45)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -product ui
- -community proof
- -technical chart
Subject patterns
- -dark surfaces, bright charts, link rails, and ecosystem scenes
Composition logic
- -Let one dominant card or capture anchor each chapter.
- -Keep cosmic gradients behind the content, not on it.
Treatment rules
- -Preserve sharp panel edges and bright type.
- -Use cyan only as a small data signal.
Generation cues
- -dark framework marketing, white pill button, soft violet nebula, technical card grid
Avoid
- -No fantasy illustration overload.
- -No blurred low-contrast cards.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not swap the white primary pill for a purple pill.
- -Do not flood cards with overpowered gradients.
- -Do not lower dark-mode contrast until links and copy disappear.