Appearance and tone

Descriptor-backed visual preset axes for Chirp UI components

Page actions AI-ready formats and sharing
Open LLM text
Share with AI
Ask Claude Ask ChatGPT Ask Gemini Ask Copilot

Chirp UI components that opt into the preset pilot acceptappearanceand toneas macro parameters. These values are descriptor-backed component contracts, not utility classes.

{{ btn("Delete", appearance="outlined", tone="danger") }}
{{ badge("At risk", appearance="tonal", tone="warning") }}
{% call card(title="Review", appearance="outlined", tone="danger") %}...{% end %}
{% call surface(appearance="outlined", tone="primary") %}...{% end %}
{{ text_field("project", label="Project", appearance="outlined", tone="primary") }}

Pilot components

The current pilot covers:

  • btn
  • badge
  • alert
  • card
  • surface
  • field / text_field

Usedangerfor shared destructive or high-risk intent. Do not use tone="error"; existing variant="error"values remain component-local compatibility where they already shipped.

Canonical reference

The repository guide has the full vocabulary, migration map, validation behavior, and compatibility policy: docs/components/appearance-tone.md.

The component showcase also includes a live/appearance-tonepage for copyable examples across the pilot components.