Colour stops · Astr design system

Palettes

Space Grey

--color-space-grey-{step}

Deep Space

--color-deep-space-{step}

Aurora Pink

--color-aurora-pink-{step}

Aurora Green

--color-aurora-green-{step}

Sodium Airglow

--color-sodium-airglow-{step}

Oxygen Airglow

--color-oxygen-airglow-{step}

Naming

Every stop is a theme variable named --color-{palette}-{step}. Steps run from 50 (lightest) to 950 (darkest) in eleven increments: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

Tailwind exposes each stop as a utility, for example bg-space-grey-100 or text-deep-space-300.

Usage

css

1.surface {2  background-color: var(--color-deep-space-950);3  color: var(--color-space-grey-100);4}

globals.css

1@theme {2  --color-deep-space-50: #d2d7fb;3  --color-deep-space-100: #b9c1fe;4  --color-deep-space-200: #6c95fc;5  --color-deep-space-300: #1458d6;6  --color-deep-space-400: #093b8c;7  --color-deep-space-500: #021f45;8  --color-deep-space-600: #021b3d;9  --color-deep-space-700: #011532;10  --color-deep-space-800: #010e2a;11  --color-deep-space-900: #020c1e;12  --color-deep-space-950: #000b17;13}

astr_colors.dart

1import 'package:flutter/painting.dart';23/// Astr colour stops, mirrored value-for-value from `globals.css`.4///5/// Each palette is a [ColorSwatch] keyed by stop number, so a stop reads as6/// `AstrColors.auroraGreen[400]`. The swatch primary is stop 500.7/// Stops are fixed: apply opacity with the magnitude ladder in8/// `astr_opacity.dart`, never by editing a stop.9abstract final class AstrColors {10  /// Space Grey11  static const ColorSwatch<int> spaceGrey = ColorSwatch<int>(0xFF848484, <int, Color>{12    50: Color(0xFFF3F3F3),13    100: Color(0xFFE5E4E4),14    200: Color(0xFFCCCCCC),15    300: Color(0xFFB3B3B3),16    400: Color(0xFF9B9B9B),17    500: Color(0xFF848484),18    600: Color(0xFF686868),19    700: Color(0xFF555555),20    800: Color(0xFF3B3B3B),21    900: Color(0xFF282828),22    950: Color(0xFF030303),23  });2425  /// Deep Space26  static const ColorSwatch<int> deepSpace = ColorSwatch<int>(0xFF021F45, <int, Color>{27    50: Color(0xFFD2D7FB),28    100: Color(0xFFB9C1FE),29    200: Color(0xFF6C95FC),30    300: Color(0xFF1458D6),31    400: Color(0xFF093B8C),32    500: Color(0xFF021F45),33    600: Color(0xFF021B3D),34    700: Color(0xFF011532),35    800: Color(0xFF010E2A),36    900: Color(0xFF020C1E),37    950: Color(0xFF000B17),38  });3940  /// Aurora Pink41  static const ColorSwatch<int> auroraPink = ColorSwatch<int>(0xFFD64289, <int, Color>{42    50: Color(0xFFFBEDF2),43    100: Color(0xFFF8DBE4),44    200: Color(0xFFF2BACD),45    300: Color(0xFFED93C3),46    400: Color(0xFFE867B0),47    500: Color(0xFFD64289),48    600: Color(0xFFAA3282),49    700: Color(0xFF822566),50    800: Color(0xFF5D1847),51    900: Color(0xFF370A1F),52    950: Color(0xFF250513),53  });5455  /// Aurora Green56  static const ColorSwatch<int> auroraGreen = ColorSwatch<int>(0xFF88E491, <int, Color>{57    50: Color(0xFFFEFFF8),58    100: Color(0xFFF2FBE8),59    200: Color(0xFFDDF7C4),60    300: Color(0xFFBEF4A3),61    400: Color(0xFFA6EE8E),62    500: Color(0xFF88E491),63    600: Color(0xFF69B276),64    700: Color(0xFF4C834E),65    800: Color(0xFF305640),66    900: Color(0xFF182F28),67    950: Color(0xFF0B1A1B),68  });6970  /// Sodium Airglow71  static const ColorSwatch<int> sodiumAirglow = ColorSwatch<int>(0xFFF6A833, <int, Color>{72    50: Color(0xFFFEFBF0),73    100: Color(0xFFFEF1E0),74    200: Color(0xFFFDE3C3),75    300: Color(0xFFFBD49D),76    400: Color(0xFFFBBD6C),77    500: Color(0xFFF6A833),78    600: Color(0xFFC17E26),79    700: Color(0xFF90591A),80    800: Color(0xFF633B0E),81    900: Color(0xFF361E04),82    950: Color(0xFF231202),83  });8485  /// Oxygen Airglow86  static const ColorSwatch<int> oxygenAirglow = ColorSwatch<int>(0xFFC10C0C, <int, Color>{87    50: Color(0xFFFEE9F0),88    100: Color(0xFFFED2E5),89    200: Color(0xFFFDA3AE),90    300: Color(0xFFFC6D6F),91    400: Color(0xFFF93E41),92    500: Color(0xFFC10C0C),93    600: Color(0xFF9A0707),94    700: Color(0xFF780404),95    800: Color(0xFF570202),96    900: Color(0xFF390101),97    950: Color(0xFF270000),98  });99}