Primitives
Raw values — the palette and numeric scale that every semantic token references.
Primitives are the raw materials of the system: the full color palette and the numeric scale. They have no meaning on their own — product code should never reference a primitive directly. Use semantic tokens instead, which point at these.
Source: Foundations 2.0 (Figma). Click any swatch to copy its hex.
Colors
Seven families plus transparent alpha ramps. Each step runs from 25/50 (lightest) to 950 (darkest).
Core
Use pure white and black as fixed anchors for the lightest and darkest points in the system.
Neutral
Use the gray ramp for neutral text, surfaces, and borders. It gives you the base tones when you want an interface to feel quiet and balanced.
Brand
Use Tellus purple for the primary identity color across core brand moments.
Indigo
A secondary purple accent for supporting moments in the interface. Use it when you need a purple that feels softer than the primary accent.
Green
Use green to signal success and positive outcomes — confirmations, gains, and completed states.
Amber
Use amber for warnings and cautionary states that need attention without signalling a hard error.
Red
Use this style for destructive actions or serious errors that need attention.
Alpha · Black
Transparent Black ramp — for scrims, overlays, and subtle tints without a solid fill.
Alpha · White
Transparent White ramp — for scrims, overlays, and subtle tints without a solid fill.
Alpha · Brand
Transparent Brand ramp — for scrims, overlays, and subtle tints without a solid fill.
Alpha · Green
Transparent Green ramp — for scrims, overlays, and subtle tints without a solid fill.
Alpha · Amber
Transparent Amber ramp — for scrims, overlays, and subtle tints without a solid fill.
Alpha · Red
Transparent Red ramp — for scrims, overlays, and subtle tints without a solid fill.
Scale
The numeric ramp (in px) that spacing, radius, stroke, and type sizes all reference.
Scale · Positive
A shared numeric ramp for spacing, radius, stroke, and type sizes. Shown in pt — the value is the same across platforms, only the unit changes.
Scale · Negative
Use negative values to create overlaps or tighten tracking when elements need to sit closer together.
Fonts
The source font families and the full weight set. The semantic typography layer references a subset of these.
Font family
Defines the source font families for each platform. Use SF Pro on iOS and Roboto on Android.
Font weight
Defines the complete font weight range; the semantic typography layer uses only the weights needed for product text. Values are the numeric weights used in code — in Figma these surface as named styles (Regular, Medium, …), so the representation may differ.