Asteria should feel like the night sky seen through a good instrument: deep, quiet, exact — and then, suddenly, luminous. This kit collects the pieces that make that feeling repeatable: the mark, the palette, the type, the voice and the way things move. Use it when writing about Asteria, designing for it, or building anything that sits beside it.
The mark#
The Asteria mark is drawn on a 32-unit grid and has three parts, each with a meaning:
- The faceted body — an irregular, many-sided rock with a warm ember gradient (
ember-softtoembertoaurum) and faint facet lines. Asteroids are not spheres; neither is the mark. - The tilted orbit — a thin, pale ellipse crossing the body at an angle, a reminder that every entry is defined as much by its path as by its substance.
- The moon dot — a small
ionpoint riding on the ring: the single named world among countless others.
The wordmark sets ASTERIA in Geist Mono, semibold, uppercase, with wide letter-spacing (0.32em). The mark sits to the left of the wordmark, vertically centred.
Clear space#
Keep a margin around the mark of at least one quarter of its width on every side — 8 units on the 32-unit grid. Around the full lockup, use the height of the mark as the minimum clear space. Nothing — text, edges, other logos — enters that zone.
Minimum size#
Use the mark at 20 px or larger on screen. Below that, the facet lines and moon dot lose definition. Use the lockup with the wordmark at 96 px wide or larger.
Don'ts#
- Don't recolour the body, the orbit or the moon dot, or swap the gradient direction.
- Don't straighten, flip or re-angle the orbit. Its tilt is part of the mark.
- Don't remove the moon dot or move it off the ring.
- Don't stretch, skew or add outlines, shadows, bevels or glows to the mark.
- Don't place the mark on light or busy backgrounds; it is designed for deep, dark surfaces.
- Don't pair the mark with words that imply officialdom — "registry of record", "certified by", agency-style seals.
Colour#
Asteria is dark-only by design. Colour is used sparingly, like light in space: a near-black field, quiet greys, and a few vivid accents that mean something. Every colour is a design token defined in the site's stylesheet; use the token, not the hex, in product code.
Surfaces and text#
| Token | Value | Use |
|---|---|---|
void | #04050a | Page background — deep space |
ink | #080a12 | Recessed areas, code blocks |
panel | #0d1019 | Cards and glass panels |
panel-2 | #131722 | Raised panels, hover states |
line | rgb(255 255 255 / 0.08) | Hairline borders |
line-strong | rgb(255 255 255 / 0.16) | Emphasised borders, dividers |
fg | #eceef4 | Primary text |
dim | #9aa0b2 | Body text, secondary copy |
faint | #5f6579 | Captions and metadata only — never body text |
Accents#
| Token | Value | Use |
|---|---|---|
ember | #ff7a3d | Primary accent — solar ember. Calls to action, key highlights |
ember-soft | #ffb08a | Gradients and soft highlights |
ion | #7fe3ff | Secondary accent — ion blue. Focus rings, links, data |
aurum | #f2c46b | Metallic gold — certificates and premium details |
nebula | #a68bff | Violet — illustration and gradients |
ok | #6ff0b0 | Success and confirmed states |
warn | #ffd166 | Cautions, "planned" and draft states |
danger | #ff5c7a | Errors and risk warnings |
Use ember sparingly: one ember moment per view is usually enough. Status colours (ok, warn, danger) carry meaning and should never be used for decoration.
The spectral colour system#
Each asteroid's spectral class has its own colour, used consistently in badges, glyphs, illustrations, orbit diagrams and certificates. The colours are inspired by each class's character — dark slate for carbonaceous bodies, nickel silver for metallic ones — but they are a visual code, not a literal rendering of what an asteroid would look like to the eye.
| Class | Token | Value | Character |
|---|---|---|---|
| C — Carbonaceous | spec-c | #8e96ad | Dark slate |
| S — Silicaceous | spec-s | #d9a066 | Stony tan |
| M — Metallic | spec-m | #c9d3e6 | Nickel-iron silver |
| V — Basaltic | spec-v | #c58bff | Vesta violet |
| X — X-complex | spec-x | #7fe3ff | Ion |
| D — Primitive red | spec-d | #c0806f | Primitive red |
- C-type
Carbonaceous
Clay and silicate rock rich in carbon compounds; hydrated minerals.
Albedo0.03–0.10 - S-type
Silicaceous
Stony silicates (olivine, pyroxene) mixed with nickel-iron metal.
Albedo0.10–0.30 - M-type
Metallic
Spectra consistent with nickel-iron metal; some show hydrated or silicate features.
Albedo0.10–0.20 - V-type
Basaltic
Basaltic crust rich in pyroxene, like the surface of 4 Vesta.
Albedo0.20–0.45 - X-complex
Mixed / enstatite
A spectral grouping that includes E (enstatite), M and P types; composition varies.
Albedo0.04–0.60 - D-type
Primitive red
Very dark, reddish material thought to be rich in organics and ices.
Albedo0.02–0.08
Typography#
Three typefaces, each with one job.
- Geist — the voice of the interface. Headlines, body text and UI. Headlines are large and tightly tracked (about −0.035em) with leading close to 1.0.
- Geist Mono — the voice of data. Eyebrows, registry IDs like ASR-0001, coordinates, orbital elements and labels. Eyebrows are uppercase with wide tracking (0.2em).
- Instrument Serif, italic — the voice of feeling. Reserved for one or two accent words in a headline: "Name a world". Never use it for body text, and never for more than a short phrase.
Voice and tone#
Asteria writes the way a good observatory guide speaks: precise, poetic, honest.
- Precise. Use real astronomy and real numbers. Say "a 3.8 km S-type on a 4.3-year orbit", not "a huge space rock".
- Poetic. Short sentences. Concrete images. Let one beautiful line do the work of three adjectives.
- Honest. Say "planned" when something is planned, "preview" when data is demo, and "registry name" when we mean a registry name. Admit what a token is not.
Words to avoid#
| Avoid | Why | Say instead |
|---|---|---|
| "Own an asteroid" | No one can own a celestial body | "Hold a registry entry" |
| "Official name" | Only the IAU assigns official names | "Asteria name", "registry name" |
| "Investment", "returns", "profit" | Tokens are collectibles, not financial products | "Collectible", "keepsake" |
| "To the moon", crypto slang | Hype undermines trust | Plain, specific language |
| "Limited-time", "only N left!" | Manufactured urgency | State availability factually |
Motion#
Movement in Asteria is borrowed from orbital mechanics: smooth, inevitable, never frantic.
- Ease-out-expo. The house curve,
cubic-bezier(0.16, 1, 0.3, 1), starts decisively and settles slowly, like a body coming to rest. Use it for entrances and reveals. - Masked reveals. Headlines rise into view from behind a mask, line by line or word by word, rather than fading in as a block.
- Slow orbital loops. Ambient motion — orbits, rotating bodies, starfields — runs on long, continuous cycles measured in tens of seconds. Nothing in the background should compete with the content.
- Purposeful micro-interactions. Hover and focus states respond quickly and subtly: a magnetic pull, a spotlight, a hairline brightening.
- Respect reduced motion. When a visitor prefers reduced motion, animations stop or shorten to instant transitions. Content must never depend on animation to be understood.
Press and partnerships#
For press enquiries, logo files or brand questions, write to hello@asteria.example. This is a placeholder address for the preview site and will be replaced before launch.
Please do not describe Asteria as selling asteroids or official names. "A curated registry of named asteroids, each represented by a unique on-chain token and a digital certificate" is the accurate one-line description.