Gradients · Astr design system

Shared rules

Both gradients take their colour from --grad-color, which accepts any colour stop, and their direction from --grad-dir where it applies. Every alpha is one of the --mag-* steps, and interpolation happens in sRGB so a Flutter gradient renders identically.

A computed alpha is snapped to the nearest step:

$n^{*} = \operatorname{clamp}\bigl(\operatorname{round}(-5\log_{10}\alpha),\,0,\,10\bigr)$

Beyond the last step there is a floor: when $-5\log_{10}\alpha \ge 10.5$ the stop is fully transparent instead of --mag-10.

Atmospheric extinction

Light from a star loses brightness as it crosses more atmosphere. The loss in magnitudes is proportional to the relative airmass $X$ minus one, with an extinction coefficient $k$ :

$\alpha(z) = 10^{-0.4\,k\,(X(z)-1)},\qquad k = 0.2$

The airmass for a zenith angle $z$ in degrees comes from the Kasten and Young approximation:

$X(z) = \frac{1}{\cos z + 0.50572\,\left(96.07995^{\circ} - z\right)^{-1.6364}}$

Stops sit at z = 0, 60, 70, 78, 84, 88 and 90 degrees. Each stop's position along the gradient is $p = z / 90^{\circ}$ , so the zenith is at 0% and the horizon at 100%.

Colour stopDirection

gradient-extinction [--grad-color:var(--color-deep-space-300)]

With the default direction the top edge is the zenith and the bottom edge is the horizon.

Alpha snaps to the nearest --mag step; a stop below the 10.5 half-step floor becomes transparent. Every row is verified against globals.css at build time.
z (deg)	Airmass X	Position	Raw alpha	Snapped step	Snapped alpha	CSS stop	Match
0	1.000	0%	1.0000	`--mag-0`	100.00%	`--mag-0 @ 0%`	✓
60	1.994	66.7%	0.8326	`--mag-0`	100.00%	`--mag-0 @ 66.7%`	✓
70	2.903	77.8%	0.7043	`--mag-1`	63.10%	`--mag-1 @ 77.8%`	✓
78	4.709	86.7%	0.5050	`--mag-1`	63.10%	`--mag-1 @ 86.7%`	✓
84	8.841	93.3%	0.2359	`--mag-3`	25.12%	`--mag-3 @ 93.3%`	✓
88	19.433	97.8%	0.0335	`--mag-7`	3.98%	`--mag-7 @ 97.8%`	✓
90	37.920	100%	0.0011	`transparent`	0.00%	`transparent @ 100%`	✓

Moffat profile

A point source blurred by the atmosphere spreads into a glow described by the Moffat function of radius $r$ and width $a$ :

$I(r) = \left(1 + (r/a)^2\right)^{-\beta},\qquad \beta = 3$

The gradient reaches full transparency at a radius of four widths:

$R = 4a$

so a stop at position $p$ sits at $r = 4a\,p$ , where the position is measured as $p = r / (4a)$ .

Colour stop

gradient-moffat [--grad-color:var(--color-deep-space-300)]

The centre is the source; intensity falls off to transparent at 60% of the radius.

Alpha snaps to the nearest --mag step; a stop below the 10.5 half-step floor becomes transparent. Every row is verified against globals.css at build time.
Position p	r / a	I(r)	Snapped step	Snapped alpha	CSS stop	Match
0%	0.00	1.0000	`--mag-0`	100.00%	`--mag-0 @ 0%`	✓
10%	0.40	0.6407	`--mag-1`	63.10%	`--mag-1 @ 10%`	✓
20%	0.80	0.2267	`--mag-3`	25.12%	`--mag-3 @ 20%`	✓
30%	1.20	0.0688	`--mag-6`	6.31%	`--mag-6 @ 30%`	✓
40%	1.60	0.0222	`--mag-8`	2.51%	`--mag-8 @ 40%`	✓
50%	2.00	0.0080	`--mag-10`	1.00%	`--mag-10 @ 50%`	✓
60%	2.40	0.0032	`transparent`	0.00%	`transparent @ 60%`	✓
100%	4.00	0.0002	`transparent`	0.00%	`transparent @ 100%`	✓

Usage

html

1<div class="gradient-extinction [--grad-color:var(--color-deep-space-300)]"></div>23<div class="gradient-moffat [--grad-color:var(--color-space-grey-200)]"></div>

globals.css

1@utility gradient-extinction {2  background-image: linear-gradient(3    in srgb var(--grad-dir, to bottom),4    color-mix(in srgb, var(--grad-color) var(--mag-0), transparent) 0%,5    color-mix(in srgb, var(--grad-color) var(--mag-0), transparent) 66.7%,6    color-mix(in srgb, var(--grad-color) var(--mag-1), transparent) 77.8%,7    color-mix(in srgb, var(--grad-color) var(--mag-1), transparent) 86.7%,8    color-mix(in srgb, var(--grad-color) var(--mag-3), transparent) 93.3%,9    color-mix(in srgb, var(--grad-color) var(--mag-7), transparent) 97.8%,10    transparent 100%11  );12}

globals.css

1@utility gradient-moffat {2  background-image: radial-gradient(3    in srgb circle closest-side,4    color-mix(in srgb, var(--grad-color) var(--mag-0), transparent) 0%,5    color-mix(in srgb, var(--grad-color) var(--mag-1), transparent) 10%,6    color-mix(in srgb, var(--grad-color) var(--mag-3), transparent) 20%,7    color-mix(in srgb, var(--grad-color) var(--mag-6), transparent) 30%,8    color-mix(in srgb, var(--grad-color) var(--mag-8), transparent) 40%,9    color-mix(in srgb, var(--grad-color) var(--mag-10), transparent) 50%,10    transparent 60%,11    transparent 100%12  );13}

astr_gradients.dart

1import 'dart:math' as math;23import 'package:flutter/painting.dart';45import 'astr_opacity.dart';67/// Astr gradients: natural-law alpha profiles snapped to the [Mag] ladder.8///9/// Both gradients take any colour stop as [base]. Fading to the same colour at10/// alpha 0 (not `Colors.transparent`, which is transparent black) keeps the11/// tail from greying, because Flutter interpolates gradient stops without12/// premultiplying alpha.13abstract final class AstrGradients {14  // --- Atmospheric extinction (zenith to horizon) ---------------------------1516  /// Extinction coefficient, magnitudes per airmass.17  static const double extinctionK = 0.2;1819  /// Zenith angles in degrees; stop position is `z / 90`.20  static const List<double> extinctionZs = <double>[0, 60, 70, 78, 84, 88, 90];2122  /// Kasten-Young relative airmass, `z` in degrees.23  static double airmass(double zDeg) {24    final double rad = zDeg * math.pi / 180;25    return 1 /26        (math.cos(rad) + 0.50572 * math.pow(96.07995 - zDeg, -1.6364));27  }2829  /// alpha = 10^(-0.4 * k * (X - 1))30  static double extinctionAlpha(double zDeg) => math31      .min(1.0, math.pow(10, -0.4 * extinctionK * (airmass(zDeg) - 1)))32      .toDouble();3334  // Positions and ladder steps precomputed from the model above and verified35  // against `gradient-extinction` in globals.css. A null step is transparent.36  static const List<double> _extinctionStops = <double>[37    0, 0.667, 0.778, 0.867, 0.933, 0.978, 1,38  ];39  static const List<int?> _extinctionSteps = <int?>[0, 0, 1, 1, 3, 7, null];4041  /// Zenith-to-horizon fade. Defaults to top (zenith) down to bottom (horizon).42  static LinearGradient extinction(43    Color base, {44    AlignmentGeometry begin = Alignment.topCenter,45    AlignmentGeometry end = Alignment.bottomCenter,46  }) {47    return LinearGradient(48      begin: begin,49      end: end,50      colors: _colors(base, _extinctionSteps),51      stops: _extinctionStops,52    );53  }5455  // --- Moffat profile (radial glow) -----------------------------------------5657  static const double moffatBeta = 3;5859  /// Gradient radius in units of the profile's scale length `a`.60  static const double moffatRadiusInA = 4;6162  /// I(r) = (1 + (r / a)^2)^-beta63  static double moffatIntensity(double rOverA) =>64      math.pow(1 + rOverA * rOverA, -moffatBeta).toDouble();6566  static const List<double> _moffatStops = <double>[67    0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 1,68  ];69  static const List<int?> _moffatSteps = <int?>[0, 1, 3, 6, 8, 10, null, null];7071  /// Bright core with a long soft tail. `radius: 0.5` is the closest side,72  /// matching CSS `radial-gradient(circle closest-side, ...)`.73  static RadialGradient moffat(74    Color base, {75    AlignmentGeometry center = Alignment.center,76  }) {77    return RadialGradient(78      center: center,79      radius: 0.5,80      colors: _colors(base, _moffatSteps),81      stops: _moffatStops,82    );83  }8485  static List<Color> _colors(Color base, List<int?> steps) => <Color>[86        for (final int? s in steps)87          base.withValues(alpha: s == null ? 0 : Mag.steps[s]),88      ];89}

Shared rules#

Atmospheric extinction#

Moffat profile#

Usage#

Shared rules

Atmospheric extinction

Moffat profile

Usage