SEED brand reference

Backdrop:

Neutrals

The grounding palette — surfaces, text, dark UI

Highlights

Brand accent colors — used sparingly for emphasis

System feedback

Status / state colors

Alpha scales

Transparency stops (10–100). Click any cell to copy its rgba().

primary (black alpha)

shown on light backdrop

negative (red alpha)

shown on light backdrop

blackAlpha

shown on light backdrop

whiteAlpha

shown on dark backdrop

Typography

Theme textStyles — actual rendering at responsive scale

textStyle="displayLarge"

The quick brown fox

textStyle="displayMedium"

The quick brown fox

textStyle="displaySmall"

The quick brown fox

textStyle="headingH1"

The quick brown fox

textStyle="headingH2"

The quick brown fox

textStyle="headingH3"

The quick brown fox

textStyle="headingH4"

The quick brown fox

textStyle="headingH5"

The quick brown fox

textStyle="bodyLarge"

The quick brown fox

textStyle="bodyMedium"

The quick brown fox

textStyle="bodyNormal"

The quick brown fox

textStyle="bodySmall"

The quick brown fox

textStyle="labelLarge"

The quick brown fox

textStyle="labelMedium"

The quick brown fox

textStyle="labelNormal"

The quick brown fox

textStyle="labelSmall"

The quick brown fox

Button variants

All registered Chakra Button variants

variant="brandSolidBlack"

variant="brandSolidWhite"

variant="brandSolidLilac"

variant="whiteOutline"

variant="labelBlue"

variant="labelBlack"

variant="labelWhite"

variant="labelGhost"

Click any swatch, value, or text style to copy. Source: src/theme/foundations/