Co-Star — design system & UI screens

Consumer · 1 screen · 8 sections · costarastrology.com

A stark, editorial black-and-white landing for the Co-Star astrology app, anchored by a centered serif "Co—Star." wordmark over a near-blank off-white field, with paired DOWNLOAD IOS / DOWNLOAD ANDROID pill buttons. The signature element is the trio of iPhone mockups showing the actual app's blunt, monospace-styled horoscope cards, followed by an inverted full-bleed black explainer band and a precise line-drawn astrological birth-chart wheel. The whole page leans on extreme tonal contrast (pure white, pure black sections) and a science-meets-mysticism monospace voice rather than color or imagery.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/co-star.

Decoded design system

Co-Star's decoded design system: background #F7F7F7, text #575657, accent #141414, link #337AB7, primary #D0021B; type scale h1 40px / h2 24px / body 14px; 10px spacing base; 4px base radius. The single interactive/action color is #141414 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F7F7F7`
surface	`#EDEDED`
border	`#DFDEDF`
text	`#575657`
text_muted	`#939393`
primary	`#D0021B`
accent	`#141414`
link	`#337AB7`
secondary	`#F6D8D8`
button_bg	`#141414`
button_text	`#FBFBFB`

Using these colors

Action color #141414 — the single interactive color; only on things you click or must notice, never large fills.
accent, button_bg are all #141414 — one role, not several (the action color).
accent #141414 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #D0021B — a brand color — but the call-to-action uses #141414, not this.
link #337AB7 — inline text links and link-styled controls.
secondary #F6D8D8 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Romana Book
Body: Akkurat Mono
Mono: Akkurat-Mono
h1: 40px
h2: 24px
body: 14px

Spacing

base unit: 10px
scale: 10px, 15px, 16px, 20px, 23px, 30px, 40px, 50px, 54px, 60px

Radii

base: 4px
button: 0px

Native design tokens

Token	Value
`--PhoneInput-color--focus`	`#03b2cb`
`--PhoneInputCountrySelectArrow-color--focus`	`#03b2cb`
`--PhoneInputCountryFlag-borderColor`	`rgba(0,0,0,0.5)`
`--PhoneInputCountryFlag-borderColor--focus`	`#03b2cb`
`--PhoneInputCountryFlag-backgroundColor--loading`	`rgba(0,0,0,0.1)`
`--PhoneInputCountrySelect-marginRight`	`0.35em`
`--PhoneInputCountrySelectArrow-width`	`0.3em`
`--PhoneInputCountrySelectArrow-marginLeft`	`0.35em`
`--PhoneInputCountrySelectArrow-borderWidth`	`1px`
`--PhoneInputCountryFlag-height`	`1em`

…and 1 more measured on the page.

Button states (measured)

primary focus: outline 5px auto rgb(16, 16, 16)

Layout (measured)

nav: 40px fixed

Responsive (measured)

breakpoints: 353px · 480px · 656px · 768px · 980px · 992px
mobile (390px): hero 40px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Co-Star astrology app landing with stark black-and-white phone trio and natal chart wheel