Design System
Cosmic Observatory
Components, tokens, and patterns for the DrashVR site. Light, cohesive palette with gold accents.
Color Palette
Design tokens defined via @theme in global.css. No tailwind.config.js.
Backgrounds
Accent (Gold)
Text
Typography
Outfit for headings (geometric, technical feel). Inter for body text (clarity, readability).
Heading Scale
H1 — Explore the Cosmos
H2 — Immersive Science Education
H3 — Trusted by Schools Worldwide
H4 — Classroom Integration
H5 — Technical Details
Body Text (Inter)
Titans of Space PLUS takes students on a guided tour of our solar system, with scientifically accurate scales and narrated educational content. Built for VR headsets and designed for classroom use, it brings the wonder of space directly into the learning environment.
Muted text for secondary information, captions, and metadata. Maintains readability while establishing visual hierarchy against primary content above.
Font Specimens
Outfit 700
ABCDEFGHIJKLM
nopqrstuvwxyz
0123456789
Inter 400
ABCDEFGHIJKLM
nopqrstuvwxyz
0123456789
Candidate Display Fonts
Three additional fonts under evaluation. Loaded via Google Fonts. Reference with font-family: var(--font-anta) (or --font-coda, --font-sansation).
Outfit
current display font (baseline)
Explore the Cosmos
Immersive Science Education
Titans of Space PLUS takes students on a guided tour of our solar system, with scientifically accurate scales and narrated educational content. ABCDEFGHIJKLM nopqrstuvwxyz 0123456789
Anta
geometric, futuristic — single weight
Explore the Cosmos
Immersive Science Education
Titans of Space PLUS takes students on a guided tour of our solar system, with scientifically accurate scales and narrated educational content. ABCDEFGHIJKLM nopqrstuvwxyz 0123456789
Coda
rounded, friendly, slightly playful
Explore the Cosmos
Immersive Science Education
Titans of Space PLUS takes students on a guided tour of our solar system, with scientifically accurate scales and narrated educational content. ABCDEFGHIJKLM nopqrstuvwxyz 0123456789
Sansation
humanist sans, soft and approachable
Explore the Cosmos
Immersive Science Education
Titans of Space PLUS takes students on a guided tour of our solar system, with scientifically accurate scales and narrated educational content. ABCDEFGHIJKLM nopqrstuvwxyz 0123456789
Form Fields
Themed via --color-field-bg,
--color-field-border,
--color-field-border-focus, and
--color-field-border-error.
Use class .form-field on inputs/selects/textareas and .form-label on labels.
Tab into the inputs to see the focus state. The last field has its error state pinned via aria-invalid="true" for visual reference.
GlassPanel
Elevated white cards with animated gradient border on hover.
Explore the Solar System
Scientifically accurate scales and distances between every planet, moon, and dwarf planet in our solar system.
Narrated Educational Tours
Professional voiceover guides students through each celestial body with curriculum-aligned content.
Classroom Ready
Designed for MDM deployment with volume licensing. Works seamlessly in school network environments.
Multi-Platform VR
Available on Meta Quest, SteamVR, and coming soon to iPad & iPhone for even broader classroom access.
CosmicRift
A geometric fissure in the page revealing parallax space imagery beneath. Glowing amber edges along the seam.
Uses CSS parallax (position: fixed on desktop, centered fallback on mobile). Diagonal clip via CSS clip-path: polygon(). Glow via SVG <feGaussianBlur> filter with pulsing animation.
Cards
Cards with hover tilt effect. Optional image slot.
Card with Image
Actual app screenshots bring authenticity to every card.
Jupiter's Moons
Explore Io, Europa, Ganymede, and Callisto up close.
Text-only Card
Cards work cleanly without images too. Subtle hover tilt on all cards.
ProductCard
Structured product cards for grids. Entire card is a clickable link. Composes Card internally.
Product card
Section Themes
Four section themes: white, warm, sand, and cool.
theme="white" Pure white background theme="ice" Ice blue-gray (#f0f2f8) theme="mist" Indigo mist (#e8ebf4) theme="slate" Light indigo slate (#dde1ef) Background Image — Subtle Texture
Any section theme can be combined with backgroundImage for subtle texture.
Additive, Not a Theme
Works alongside any existing theme. The image composites behind via mix-blend-mode.
Usage
<SectionContainer backgroundImage="..." backgroundOpacity=0.08 backgroundBlend="multiply">
Background Image — Sand + Subtle Texture
Light themes can use background images at very low opacity with backgroundBlend="multiply" for subtle texture.
Tunable
Adjust opacity and blend mode per-section to get the right balance.
Responsive
Uses background-size: cover — works at any viewport width.
Readable
Content sits on z-[1] above the image layer, so text remains crisp.
SectionHeading
Headings use Outfit font. Optional anchor IDs for jump-link navigation.
Heading without anchor
Headings with an id prop become clickable jump links. Without id, they render as plain text (like this one).
PricingTable
Rich cell content, featured column highlighting. Supports set:html cells for checkmarks, icons, and styled content.
Featured column with badge
| — | — | Most Popular | — |
|---|---|---|---|
| Feature | Education | Museum / Nonprofit | Commercial |
| Annual (per device) | $19.99/yr | $29.99/yr | $39.99/yr |
| Perpetual license | $49.99 | $69.99 | $89.99 |
| MDM / ManageXR support | |||
| Priority support | — | ||
| Volume Discounts (Annual) | |||
| 10–29 devices | 10% off | 10% off | 10% off |
| 30–99 devices | 20% off | 20% off | 20% off |
| 100+ devices | 30% off | 30% off | 30% off |
Plain strings
| Plan | Users | Price | Support |
|---|---|---|---|
| Starter | Up to 30 | $199/yr | |
| School | Up to 200 | $499/yr | Priority |
| District | Unlimited | Custom | Dedicated |
PdfDownloadLink
Button-style download links with document icon.
StatBar on light background:
LogoRow
Row of partner/platform logos with muted opacity. Logos with href become clickable links (opens in new tab).
