Design system · The Observatory

A night sky where gold light behaves like thought.

The one system every room is built from. Colour is measured, not estimated. Form is a set of tokens, not a habit. Nothing here is decoration: the light is the only thing that moves.

Brand

In-brand, intensified.

Their black, their gold, their Cormorant italic, their tree-of-life mark. We remove the cream cards and the Inter body and make the whole surface one night, so that gold is always the brightest thing on screen and always means attention here.

Anti-reflex. The category reflexes were sage-and-cream wellness, or cosmic-purple nebula dark mode, or a neon-cyan lab. All three were rejected at both altitudes. The sky here is warm-black tinted toward gold, the light is one hue, and the intention only changes the temperature of that light.

Scene. A seeker opens the site at 11pm with the room dark and one lamp on. The screen should be the quietest, brightest thing in the room.

${mark}
Divine Science Society
Where science meets the sacred
The light of each intention

Click one. The accent, the sky and the bell retune. This is the only thing personalisation is allowed to do to the palette.

Colour · measured contrast

Committed strategy: the night carries 60% of every page. Gold stays under 10%.

Night--bg · oklch(0.13 0.012 80)
Surface--surface · oklch(0.16 0.014 80)
Surface 2--surface-2 · oklch(0.19 0.016 80)
Surface 3--surface-3 · oklch(0.23 0.018 80)
Muted--muted · oklch(0.74 0.02 85)
Muted 2 on surface 3--muted-2 · oklch(0.62 0.02 85)
Gold--primary · oklch(0.80 0.12 85)
Gold, deep--accent-strong · oklch(0.66 0.13 80)
Gold as text--gold-text on night
Plate--drench · oklch(0.96 0.012 85)
Plate, muted--on-drench-muted
Success--success-ink on --success-soft
Warning--warning-ink on --warning-soft
Danger--danger-ink on --danger-soft
Info--info-ink on --info-soft

Ratios are computed live from the rendered colours. AA means 4.5:1 or better for body text.

Status vocabulary

Semantic colour is for states, never decoration.

Not startedTonightSeat keptWaitlistFullOnlineWonderDiscoveredHidden
Type

Cormorant Garamond speaks. Cinzel whispers. Figtree carries.

Display · Cormorant Garamond italic · --fs-display
Awaken minds. Heal hearts.
H1 · --fs-h1
Intention opens the door. Medicine can reveal. Integration transforms.
H2 · --fs-h2 · with an emphasised phrase

Quiet the noise. The signal was always there.

Kicker · Cinzel · --font-kicker
Where science meets the sacred
Lead · Cormorant italic · --fs-lead

A seeker opens the site at 11pm with the room dark and one lamp on. The screen should be the quietest, brightest thing in the room.

Body · Figtree · 17px / 1.6 · measure 62ch

When we pause and look beneath everyday conditioning, we remember we are naturally connected to something much greater. Our four foundational pillars create a path for exploration, healing, and integration.

Product scale · Figtree 15 / 14 / 13 / 12 · tabular figures

First Sunday Circle · Oct 4, 2026 · 7:00 AM PT · 31 of 40 seats · $22 / month

1278 Glenneyre St, Laguna Beach, CA 92651

Space, shape, elevation

Editorial-cinematic.

Whitespace divides. One hairline where a rule is needed. Depth is tone, never shadow, except for what genuinely floats. Radii are nearly square: 2, 4, 8.

--r-ctl 2
--r-card 4
--r-lg 8
full
--bw1px, tinted toward gold
--elev-cardnone · tone instead
--elev-poponly what floats
--h-ctl48px controls
--h-row56px rows
--pad-card32px
--row-rulehairline between rows
--case-headnone · italic instead
Spacing scale · 4px base
Surfaces by tone
A panel: raised night, no border, no shadow.
A second step of tone. Never nested in practice; shown once here.
A lined panel, for the rare object that is genuinely a card.
Plate

The one warm-white plate per page. Used at most once, for the thing that must land.

Controls

Every variant, every state.

Buttons · primary, outline, quiet, ghost · default, hover, focus, disabled, loading
Link with arrow ${arrow}
Fields · text, error, select, textarea, search
Say it in your own words. One sentence is enough.
Kept only in this browser.
Choice · checkbox, radio, toggle, segmented, range
Surfaces and data

Rows, tables, tabs, accordions, layers.

Rows · the default list
    What does a gathering cost?
    In-person gatherings are included for Initiates and $22 for Explorers. Online gatherings are free for every member.
    Can I change my intention?
    Any time. Tap your intention in the top bar. The rooms rearrange, the sound retunes, your constellation keeps every star.
    Table · sortable, selectable, bulk bar
    2 selected
    Hover for a tooltip
    Domain components

    The parts made only for this Society.

    The intention ring · the threshold's whole first fold
    The intention row · compact chooser for settings and the member page
    Frequency dial and wave
    528Transformation
    528Hz
    Transformation
    The "love frequency". Purpose's tone.
    963Hz
    Oneness
    The tone of the whole. Wonder's tone.
    Breath pacer · five and a half breaths a minute
    breathe in
    Chapter marker
    Chapter two · Medicine can reveal
    Constellation stars · one per discovery
    Discovery toast
    ${star}The still oneA discovery. Your constellation has a new star.
    Sound control
    off · on (the bars move with the drone)
    Feedback and states

    The unhappy paths, built.

    Loading
    Iconography

    One family, 1.5px stroke, never emoji.

    Motion

    Slow, orbital, eased out.

    Text brightens into view instead of sliding in. Stars drift and thread toward the cursor. Controls change colour, never size. Micro-interactions take 160 to 280 milliseconds; reveals take 520; the sky takes as long as it likes. Under reduced motion the sky is a still photograph and every reveal is instant.

    Sound

    Opt in. Always one tap to silence.

    Synthesised in the browser, no audio files. A drone tuned to the intention beneath the whole visit, a bell partial for every choice, a chime for a discovery, a wash of air for each breath.

    Bans · enforced

    What this system refuses.

    • No purple. No nebula gradients, no cosmic violet. Wonder's light is a cool gold, not a galaxy.
    • No cream cards on the night. The plate is one warm-white band per page at most.
    • No glow on anything that is not a light source. Gold glows; borders and text do not.
    • No gradient text, no glass, no side-stripe borders, no three-equal-card rows, no numbered scaffolding.
    • No eyebrow on every section. The kicker is the Society's voice and it is used once per section at most, never as decoration.
    • No sound without a gesture, no motion without an alternative.
    • No product names, doses or purchase language in the medicine pathway.
    • No lorem, no placeholder copy, no dead link. An unbuilt room lands on the hub, which says so.