Asteriks.ai

Designed to take your colors.

Pick any of 256 editor themes and the whole site takes its colors, Asteriks included. Type, spacing and parts stay put. Below is the living reference this site is built from.

How it’s put together.

  • Your theme, everywhere

    256 themes from the editors people already love. Choose one and every page follows.

  • Only color changes

    Type, spacing and shapes are fixed, so every theme reads the same way.

  • A character, not a chatbot

    Asteriks wears the theme’s own colors and lives on every page, ready to be dragged anywhere.

  • Plain CSS, no framework

    A small set of tokens and a few components. Easy to read, easy to change.

Color · tokens.css

Color is the only themeable layer. A theme sets background, ink and action, plus a signature color picked from its own swatches as the one least like everything else on screen; a palette sets the accent trio. Every role below is derived from those, so components only ever use --color-*.

Inputs

  • --theme-bg
  • --theme-ink
  • --theme-action
  • --theme-signature
  • --accent-start
  • --accent
  • --accent-end

Roles

  • --color-surface
  • --color-page
  • --color-ink
  • --color-muted
  • --color-line
  • --color-border
  • --color-action
  • --color-signature
  • --color-accent
  • --color-pass
  • --color-warn
  • --color-tag-1
  • --color-tag-2

Type · fixed

UI text uses --font-ui; nav and brand use --font-system; code uses --font-mono.

  • --text-3xsSlow coffee rewards patience
  • --text-2xsSlow coffee rewards patience
  • --text-xsSlow coffee rewards patience
  • --text-smSlow coffee rewards patience
  • --text-mdSlow coffee rewards patience
  • --text-baseSlow coffee rewards patience
  • --text-lgSlow coffee rewards patience
  • --text-xlSlow coffee rewards patience
  • --text-2xlSlow coffee rewards patience
  • --text-3xlSlow coffee rewards patience
  • --text-4xlSlow coffee rewards patience
  • --text-5xlSlow coffee rewards patience

Space, radius, elevation · fixed

  • --space-2
  • --space-4
  • --space-6
  • --space-8
  • --space-10
  • --space-12
  • --space-14
  • --space-16
  • --space-20
  • --space-24
  • --space-28
  • --space-32
  • --space-36
  • --space-40
  • --space-64
  • --space-96
  • --space-128
  • --radius-4
  • --radius-6
  • --radius-8
  • --radius-10
  • --radius-12
  • --radius-18
  • --radius-24
  • --radius-40
  • --shadow-popover
  • --shadow-header
  • --shadow-media
  • --shadow-sheet
  • --shadow-pinned

Components · src/components

ShimmerHeading

StatusBadge

pass warn info

StatGrid

Passed checks
17
To review
5
Observations
21

IssueList

Also: Asteriks (draggable character + composer), SiteHeader, MediaHero, PageHeader, Section, FeatureGrid, Steps, FaqList, Cta, Button, ThemePicker, SiteFooter, Icon. Layouts: BaseLayout (theme runtime), SheetLayout (document pages).