Design system

Astryx, themed for Bátastevnan

Components come from Astryx. This project owns one theme file and nothing else: src/theme/batastevnan-theme.ts. Run bun run theme after a change.

Colour

One warm ink scale, the logo's green as the accent, and red for occupied only. Both modes come from the same tokens.

Surfaces

  • body

    --color-background-body

  • card

    --color-background-card

  • surface

    --color-background-surface

  • muted

    --color-background-muted

Text

  • primary

    --color-text-primary

  • secondary

    --color-text-secondary

  • accent

    --color-accent

Status

  • success

    --color-success

  • warning

    --color-warning

  • error

    --color-error

Type

IBM Plex Sans and Archivo, self-hosted. Hierarchy comes from weight and size only.

Bátastevnan

Programme

Body text is 17px with a 1.55 line height.

Supporting text is 15px in the secondary colour.

Components

Every component below is Astryx. Accessibility, keyboard behaviour and contrast are maintained upstream, so this project does not audit them.

Buttons

Status badges

TøktUpptikiðÓkeypis

Fields

Skriva eina gilda teldupostadressu.

Quantity and switch

Browse the full component set at astryx.atmeta.com, or run npx astryx component <Name> for the exact props.