Introduction

What it is#

Astr is a stargazing app, and its interface is dark only. The colour system is built from 66 fixed colour stops: six palettes with eleven steps each (50 to 950). The stops are absolute hex values. They are never tinted, blended or recomputed.

Each tile is one palette, shown next to the night sky that inspired it. The strip on a tile runs from the lightest step (50) on the left to the darkest (950) on the right. See Colour stops for every value.

• Space GreyPexels
• Aurora PinkPexels
• Aurora GreenPixabay, dkphotography
• Sodium AirglowNASA Scientific Visualization Studio, ISS airglow and lightning
• Oxygen AirglowNASA Scientific Visualization Studio, ISS airglow over Bangkok and the Pacific

Three layers#

The system is deliberately small.

1. Colour stops. The fixed palette. Nothing else in the system defines a colour.
2. The opacity ladder. Eleven alpha steps, --mag-0 to --mag-10, spaced by the Pogson magnitude scale. See Opacity ladder.
3. Gradients. Two profiles taken from nature, atmospheric extinction and the Moffat point-spread function, built entirely from ladder steps. See Gradients.

The ladder and the gradients are natural-law layers applied on top of the stops. They change how much of a stop shows through, never the stop itself.

Any stop, any opacity#

Every stop may be used at every ladder step, and every gradient accepts any stop through --grad-color. There is no list of approved combinations.

1<!-- a stop at a ladder step -->2<div class="bg-deep-space-300/(--mag-3)"></div>34<!-- a gradient with any stop -->5<div class="gradient-extinction [--grad-color:var(--color-deep-space-300)]"></div>

1// a stop at a ladder step2final Color glow = AstrColors.deepSpace[300]!.withValues(alpha: Mag.m3);34// a gradient with any stop5final LinearGradient sky = AstrGradients.extinction(AstrColors.deepSpace[300]!);6final RadialGradient halo = AstrGradients.moffat(AstrColors.spaceGrey[200]!);

Proportion#

Colour is one part of the system. Proportion is another: spacing, type, radii and layout taken from the Fibonacci sequence and the golden ratio. Start with Spacing, then Typography and Layout and size. The third part is the science behind the app's verdict, from the zone scale to moonlight and offline behaviour, starting at the Sky science overview.

Source of truth#

Colour on these pages is read from one file, src/app/globals.css, at build time (spacing and type come from src/app/scale.css in the same way): the @theme block holds the stops, @theme static holds the ladder, and two @utility blocks hold the gradients. Palettes and ladder values are parsed from it. The gradient sample tables are recomputed from their formulas and compared with the CSS, and the build fails if the two disagree.