Data

Components for labelling, categorising, and presenting structured information. Badges communicate status at a glance; tables and code blocks are planned for a future release.

Badges stable

Informational labels — never interactive. Seven semantic variants use opaque palette fills so they read clearly on any surface without dark-mode overrides.

General Published Draft Archived Beta Research Category

Full reference — Badges

Variants

All seven variants share the same base dimensions. Mix freely within a layout — the distinct fills create their own visual hierarchy.

Label	Class	Background	Use
General	`.badge-general`	`--bm0-sand`	Neutral, uncategorised content
Published	`.badge-published`	`--bl3-moss`	Active, live, stable, success state
Draft	`.badge-draft`	`--bl2-grain`	In-progress, pending, warning state
Archived	`.badge-archived`	`--bl0-ember`	Deprecated, removed, error state
Beta	`.badge-beta`	`--bl4-heather`	Experimental feature, preview release
Research	`.badge-research`	`--bl1-ochre`	Discovery phase, annotation, exploration
Category	`.badge-category`	`--fo2-forest`	Primary content category label

Usage guidance

Choose variants by semantic meaning, not by colour preference.

Situation	Variant
Content is live and visible to end users	Published
Content is being worked on and not yet live	Draft
Content is no longer active, or an action has failed	Archived
A feature is released but not yet stable	Beta
Item is in a discovery or annotation phase	Research
Label indicates content type or taxonomy	Category
No meaningful status or category applies	General

One badge per item. Stacking multiple badges signals ambiguity in the data model — resolve it at the data level.

Never make badges interactive. For clickable filters or dismissible tags, use a different component. A badge communicates state; it does not change it.

Anatomy

Apply the base .badge class first, then exactly one variant modifier.

<span class="badge badge-published">Published</span>
<span class="badge badge-beta">Beta</span>

CSS reference

Shipped in dist/farn-components.css. Load alongside farn.css or farn-tokens.css.

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.badge-general   { background: var(--bm0-sand);    color: var(--in0-void); }
.badge-published { background: var(--bl3-moss);    color: var(--color-accent-text); }
.badge-draft     { background: var(--bl2-grain);   color: var(--color-accent-text); }
.badge-archived  { background: var(--bl0-ember);   color: var(--color-accent-text); }
.badge-beta      { background: var(--bl4-heather); color: var(--color-accent-text); }
.badge-research  { background: var(--bl1-ochre);   color: var(--color-accent-text); }
.badge-category  { background: var(--fo2-forest);  color: var(--color-accent-text); }

Table coming soon

.table base class with border, cell padding, and header styles consuming semantic tokens. .table-striped variant for alternating-row contrast. Includes guidance on the overflow-x: auto scroll wrapper for narrow viewports.

Code block coming soon

.code-block (block-level, scrollable) and .inline-code classes consuming --color-bg-code, --font-mono, and --radius-* tokens. --code-* Tier-3 tokens for independent retheme without touching the semantic layer.