AstroSense · design system

Patterns, not predictions.

The design record, as exported: every card the system is described by, grouped as the record groups them, and the core-loop kit built from the same tokens. Night-sky indigo with one violet accent and one strictly functional sky-blue, Newsreader for headlines, Geist for body, IBM Plex Mono for every piece of chart data. A parchment light theme is a real second one. Sample data is fictional.

Brand

WordmarkPlain type mark
Zodiac imageryProvided sign illustrations (assets/zodiac/)

Colors

Dark surfaces — night skyDefault theme
Light surfaces — parchment[data-theme=light]
Primary — brand violet & skyAccent (CTAs) and functional (data) accents

Components

Commerce — Pricing CardSnapshot / Compatibility / Pro tiers
Core — Button, Badge, Input, CardPrimitives every screen composes
Data — Ephemeris Table, Natal WheelShow-your-work chart data
Navigation — NavBar, FooterThe shared shell on every screen

Spacing

Corner radii6 → pill
Spacing scale4px base rhythm

Type

Display / body / dataNewsreader · Geist · IBM Plex Mono
Type scale in useRole → font/weight/size → specimen

AstroSense

AstroSense — core loopLanding → Dashboard → CheckoutOpen full screen →