Badges, alerts and cards — Starshot Brand Guide

Badge

Short label for states and categories. Tones Neutral, Info, Success, Warning and Error; Subtle style (soft background) or Solid (full background); sizes sm and md; optional dot or icon. Radius radius-full.

NeutralInfoSuccessWarningError

NeutralInfoSuccessWarningError

sm · dotmd · iconSolid · icon

Badge

Alert

In-page notice. Tones Info, Success, Warning and Error with an icon on the left, -subtle background and a border in the status color. Width 480 by default; supports Fill. Optional action as a text link (color-action-strong, underlined) and a close button.

Info alert

Short description: what happened and what the person can do.

Success alert

Short description: what happened and what the person can do.

Warning alert

Short description: what happened and what the person can do.

Error alert

Short description: what happened and what the person can do.

Alert title

Short description: what happened and what the person can do.

Card

Groups related content. Default (border and shadow-sm), Elevated (shadow-md) and Feature (surface-ink background). Radius radius-card 12, padding space-6. Optional parts: image, label, title, text and footer with Button. Hover state.

Image

LABEL

Card title

Short text that explains the card content in one or two lines.

Image

LABEL

Card title

Short text that explains the card content in one or two lines.

Image

LABEL

Card title

Short text that explains the card content in one or two lines.

Image

LABEL

Hover

Short text that explains the card content in one or two lines.

LABEL

No image

Short text that explains the card content in one or two lines.

Image

LABEL

No footer

Short text that explains the card content in one or two lines.

Image

LABEL

Card title

Short text that explains the card content in one or two lines.

Tokens

Values linked in Badge, Alert and Card.

Name (token)

Value

When to use it

color-status-*-subtle / -text

background / text

Badge Subtle and Alert (background); Badge Subtle text.

color-status-*

base color

Alert border.

color-action-strong / -pressed

6.86–7.53:1

Alert action link and Link component; Hover in -pressed.

color-brand-blue

#2164EE

Card Feature image.

color-surface-ink

18.31:1 with white

Badge Neutral Solid; Card Feature background.

radius-full · radius-md · radius-card

9999 · 8 · 12

Badge · Alert · Card.

space-0-5 · 1 · 2 · 3 · 4 · 6

2 · 4 · 8 · 12 · 16 · 24

Padding and gaps.

shadow-sm · shadow-md

Effects

Card Default · Elevated and Hover.

label-badge-sm · label-badge-md

SemiBold 12/16 · 14/20

Badge text (new styles).

Contrast

Text: minimum 4.5:1 (WCAG AA).

Aa

Sample text

Badge Neutral Subtle

7.32

Excellent

Aa

Sample text

Alert · link action-strong on info-subtle

6.86

Excellent

Aa

Sample text

Alert · link action-strong on warning-subtle

7.53

Excellent

Aa

Sample text

Badge Success Subtle

4.97

Pass

Aa

Sample text

Badge Warning Subtle

4.99

Pass

Aa

Sample text

Badge Error Subtle

4.73

Pass

Aa

Sample text

Badge Info Solid

6.04

Pass

Aa

Sample text

Alert · description text-secondary on info-subtle

6.90

Pass

Aa

Sample text

Card · text-muted on white

5.07

Pass

Aa

Sample text

Card Feature · inverse-muted on ink

7.08

Excellent

What to do and what to avoid

Paid

!!

Saved

Short description: what happened and what the person can do.

Feature × 6

Related pages