---
name: Fiesta
description: A quiet, correct interface baseline built to be taken over.
colors:
  bg: "#fbfbfc"
  surface: "#ffffff"
  surface-2: "#f3f3f5"
  line: "#e6e6ea"
  line-strong: "#868691"
  text: "#18181b"
  text-muted: "#52525c"
  text-faint: "#6b6b75"
  accent: "#1f56d6"
  accent-strong: "#1844ac"
  accent-soft: "#ecf1ff"
  on-accent: "#ffffff"
  accent-fill: "#2257df"
  on-accent-fill: "#ffffff"
  danger-fill: "#c62f2f"
  control-border: "#d0d4dc"
  tone-neutral-fg: "#374151"
  tone-neutral-bg: "#eef0f2"
  tone-positive-fg: "#166534"
  tone-positive-bg: "#dcfce7"
  tone-warning-fg: "#854d0e"
  tone-warning-bg: "#fef3c7"
  tone-negative-fg: "#b91c1c"
  tone-negative-bg: "#fee2e2"
typography:
  display:
    fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: "2.1rem"
    fontWeight: 650
    lineHeight: 1.1
  headline:
    fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: "1.25rem"
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: "-0.012em"
  title:
    fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 600
    lineHeight: 1.4
  body:
    fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: "0.71875rem"
    fontWeight: 650
    letterSpacing: "0"
    textTransform: "none"
  field:
    fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: "1.0625rem"
    fontWeight: 550
  stat:
    fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 650
    lineHeight: 1.1
  mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
    fontSize: "0.78125rem"
rounded:
  bar: "2px"
  sm: "4px"
  md: "6px"
  pill: "999px"
spacing:
  "1": "0.25rem"
  "2": "0.5rem"
  "3": "0.75rem"
  "4": "1rem"
  "5": "1.5rem"
  "6": "2.5rem"
components:
  button:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    typography: "{typography.title}"
    rounded: "{rounded.sm}"
    padding: "0.45rem 0.75rem"
  button-primary:
    backgroundColor: "{colors.accent-fill}"
    textColor: "{colors.on-accent-fill}"
    typography: "{typography.title}"
    rounded: "{rounded.sm}"
    padding: "0.45rem 0.75rem"
  button-primary-hover:
    backgroundColor: "#1d4dc8"
    textColor: "{colors.on-accent-fill}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.sm}"
    padding: "0.45rem 0.6rem"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "1.1rem 1.25rem"
  status-pill:
    backgroundColor: "{colors.tone-neutral-bg}"
    textColor: "{colors.tone-neutral-fg}"
    rounded: "{rounded.pill}"
    padding: "0.15rem 0.5rem"
---

# Design System: Fiesta

<!--
  Scope note, because this system has three themes and two colour schemes.
  The frontmatter carries the `day` theme's LIGHT values, because
  fiesta.ThemeNames()[0] is `day` and it is the theme fiesta.css carries.
  The normative source in the repository is one custom property per colour
  holding a light-dark() pair, so a single-value frontmatter slot cannot
  hold it; .impeccable/design.json carries both halves per token under
  extensions.colorMeta. Do not treat a hex here as the only value.
  Source of truth: css/tokens.css (structure) and css/themes/*.css (colour,
  type family, shape).
-->

## Overview

**Creative North Star: "A Default With a Point of View"**

This is the interface an application has before anyone has styled it,
and it should look like someone chose it. `day` is near-greyscale with
hairline borders, one cobalt for anything that acts, crisp corners, and
natural depth: light comes from above, cards rest on the page, controls
press in and slowly lift. It aims to read as professional, in the family
of the tools people already trust, and to be recognisably this system's.

Remixability is still the thesis. Every colour, radius, shadow,
highlight and strength resolves through a custom property, and the three
shipped themes prove the axes work rather than offering a menu of three
answers: `day` turns depth on, `plain` and `signal` turn it off and
render as they always did. An app that wants a fourth writes one `:root`
block. Files are delivered once and app-owned from that moment: edit
them, or delete what you do not use.

The system is deliberately under-designed at the component level so an
app's own character can land on top without a fight. It is explicitly
not the SaaS gradient template — no purple-to-blue washes, glassmorphism,
oversized rounded cards or decorative blobs — and explicitly not a
vendor-branded admin kit that stamps someone else's identity on an app
and resists removal. Both hand you an identity you did not choose, which
is the one thing this system exists not to do.

**Key Characteristics:**

- Small, dense type: a 14px base with 12.5px and 11.5px steps below it.
- Near-flat surfaces separated by 1px hairlines; depth is a theme axis.
- One accent, carrying action and position; status carries its own
  four-tone palette.
- Every colour is a `light-dark()` pair, so light and dark are one
  declaration rather than two stylesheets.
- The CSS floor is Chrome 123, Safari 17.5, Firefox 121, set by `light-dark()`; anything at or below it is used with no fallback.
- Works with JavaScript off. Scripts are enhancement and each is
  deletable on its own.

## Colors

A restrained near-neutral palette with a single working blue, held to
WCAG 2.2 AA by a contrast gate over documented pairs in every theme and
both schemes.

### Primary

- **Interface Blue** (`#1f56d6` light, `#7aa2ff` dark): the accent, a
  cobalt. It marks what you can act on and where you are: focus rings,
  links, an active tab, the current menu item. It belongs to the chrome,
  not to the content.
- **Accent Fill** (`#2257df` light, `#2f61e8` dark): the primary
  button's fill, with a hover fill of its own (`#1d4dc8` light,
  `#2956d0` dark) and a white label (`on-accent-fill`). A filled control
  never darkens by filter: every state is a colour, gated.
- **Danger Fill** (`#c62f2f` light, `#c43232` dark): the danger button's
  fill, the same way, with a white label.
- **Interface Blue Deep** (`#1844ac` light, `#a3c0ff` dark): kept for a
  theme written before the fills; `tokens.css` reads it only as the
  primary hover's fallback.
- **Interface Blue Wash** (`#ecf1ff` light, `#16234a` dark): the tint
  behind a current menu item, and the fallback for the hover and press
  tints in a theme that declares none. Carries no text of its own beyond
  the accent and the muted greys, both gated against it.

### Neutral

- **Page** (`#fbfbfc` light, `#0c0d0f` dark): the page ground, one step
  below the surface, so a card reads as resting on it.
- **Surface** (`#ffffff` light, `#141518` dark): cards, panels, inputs
  and menus.
- **Surface Sunken** (`#f3f3f5` light, `#18191d` dark): the recessed
  step, for table header rows, the second tone in a stack and a hovered
  ghost button.
- **Hairline** (`#e6e6ea` light, `#26282e` dark): every divider, card
  edge and table rule.
- **Control Edge** (`#868691` light, `#71737c` dark): the border of a
  field and a select. Deliberately much darker
  than the hairline, and held at 3:1 against its backgrounds because it
  is a control boundary (WCAG 1.4.11), not decoration.
- **Control Border** (`#d0d4dc` light, `#343843` dark): a plain button's
  edge, softer than the field border on purpose. The label identifies
  the button, so the edge is decoration under 1.4.11 and carries no 3:1
  floor.
- **Ink** (`#18181b` light, `#ededf0` dark): body text.
- **Ink Muted** (`#52525c` light, `#a1a1aa` dark): secondary text,
  subheads, cell values that are not the row's name.
- **Ink Faint** (`#6b6b75` light, `#8c8c96` dark): hints, captions,
  counts. Still gated at 4.5:1; "faint" is a role, not a licence to
  drop below the floor.

### Tertiary

The four status tones, each a foreground/background pair used together:
**Neutral** (`#374151` on `#eef0f2`), **Positive** (`#166534` on
`#dcfce7`), **Warning** (`#854d0e` on `#fef3c7`), **Negative**
(`#b91c1c` on `#fee2e2`). They exist so status never borrows the accent.

### Named Rules

**The Gated Pair Rule.** A colour that carries text owes 4.5:1 against
the surface it actually sits on, and a control boundary owes 3:1 — and
owes it in every theme and both schemes, in the contrast gate, before it
ships. Adding a colour means adding its pair to that gate. A tone chosen
against a tinted ground says nothing about the same tone on a plain card.

**The Two-Signal Rule.** State is never colour alone. A status pill
renders its label, a meter prints its fraction as text beside the bar,
and a stat's change carries its own `+` or `−` sign. Colour is the
second signal, never the first.

**The Light-Dark Rule.** Every colour is declared once as
`light-dark(<light>, <dark>)` under `color-scheme: light dark`. There is
no dark stylesheet and no second palette to keep in step; an explicit
theme choice re-resolves the same declarations by setting
`color-scheme`.

## Typography

**Display / Body Font:** the platform UI stack — `system-ui`,
`-apple-system`, `"Segoe UI"`, `Roboto`, `"Helvetica Neue"`, `Arial`,
`sans-serif`. `signal` leads the same stack with `"Helvetica Neue"`.
**Mono Font:** `ui-monospace, SFMono-Regular, Menlo, Consolas,
monospace`, on the `rst-mono` utility. It is a real second family and
not a weight of the first — reference codes, identifiers and machine
values are set in it so they read as things to be copied rather than
read.

**Character:** the type has no personality of its own on purpose. The
family is a theme axis, and the shipped default is whatever the reader's
OS considers correct — which is the right answer for an application
frame and the wrong answer for a brand, so an app that wants a voice
sets one property.

### Hierarchy

- **Display** (650, 2.1rem, 1.1): the lead reading in a stat band, and
  nothing else. The only genuinely large type in the system.
- **Headline** (600, 1.25rem, 1.25, −0.012em in `day`; 1.375rem and
  −0.015em in `plain` and `signal`): a screen's `<h1>` in the page
  header. Capped at 1.25rem under 34rem.
- **Field** (550, 1.0625rem = 17px, inherited 1.5): the form's headline
  input — a title, a name — and the only control that leaves the body
  step. Its label stays at Label size, so the emphasis is carried by
  the reader's own words rather than by the form's furniture.
- **Title** (600, 0.875rem, 1.4): section headings inside a card head,
  button labels, a row's name. A section `<h2>` separates by weight, not
  size: body-sized in `plain` and `signal`, a step below it (0.8125rem)
  in `day`.
- **Body** (400, 0.875rem = 14px, 1.6): everything else. Subheads cap at
  44rem.
- **Label** (650, 0.71875rem = 11.5px): the eyebrow over a value, such
  as stat labels, table column heads and the nav rail's section names.
  Sentence case with no tracking in `day`; uppercase at +0.06em in
  `plain` and `signal`.

### Steps outside the roles

Four literal sizes appear in `tokens.css` outside the roles above, and
they are recorded rather than tidied away — two have since become roles,
which is what recording them was for:

- **1.5rem** — a stat's number when it is not the lead. A role now
  (`stat`), because a dashboard uses it as one.
- **1.25rem**: the headline's cap under 34rem, and `day`'s headline at
  every width. A step of `headline` rather than a size of its own.
- **1.0625rem** — a role now (`field`, and `--rst-fs-lg`), because a
  form's headline input reads as one. The large person avatar's initials
  and the shell's brand land on the same value and stay literals: they
  are sized to fit a circle, so the match is a coincidence rather than a
  shared step, and tying them to the type scale would move them the next
  time the scale moves.
- **0.6875rem** — the ordinary person avatar's initials.

That last one is decoration sized to fit a circle, not type a reader
parses, which is why it is not a role.

### Named Rules

**The Small-Base Rule.** The base is 14px, not 16px, and every step is
declared in `rem` so the whole scale tracks a reader who has raised
their browser default. Do not convert any of it to `px`.

**The Weight-Not-Size Rule.** Hierarchy inside a screen is carried by
weight and colour before size. A card's `<h2>` is body-sized at 600;
reaching for a larger size to make a section feel important is how this
system loses its density.

The one exception is a form's headline field (the Field role above),
and it is an exception because of what is being sized. Everywhere else
the rule governs *chrome* — a heading the system wrote, labelling
content underneath it — and chrome has no business growing. A title
input is the opposite case: the large thing is what the reader typed,
which is the only content on a form that is not furniture. The
exception is deliberately narrow, one control on one form; a second
large field on the same screen is the density loss this rule is about.

**The Grouped Number Rule.** Every number a person reads as a quantity is
grouped for their locale — `54,173` in English, `54.173` in German,
`٥٤٬١٧٣` in Arabic. Never a bare run of digits. Grouping is not "add a
comma": the separator, the group size and the digits themselves all
change with the locale, and a number's readability is the whole reason
the rule exists — `54173` is counted, `54,173` is read.

The exception is exact and small: **an identifier is not a quantity.**
Reference codes, order numbers, years, versions and port numbers are
labels that happen to be made of digits, and grouping one changes what it
appears to be. Order 4471 is not order 4,471.

The rule is met. `{{number $L .Count}}` groups a quantity and `{{money $L .Amount .Currency}}` writes money, both on the server, in the reader's language, from CLDR data. In the browser, `Intl` is at most an enhancement.

Money has two rules of its own. The currency always comes from the data, never from the reader: an amount is stored as a whole number of its currency's smallest unit, with its ISO 4217 code beside it, so a price in euros is in euros on every page. And every digit of that smallest unit is shown: 1.5 dinars is `KWD 1.500`, never `KWD 1.5`.

Each language's formatting data is a pack an app links only when it offers that language, so a language costs nothing until then. Templates are built once, and the localizer in each page's data chooses the language, so one request's language never reaches another's page.

## Layout

A single centred content column, capped at **64rem** with `1.5rem 1rem
2.5rem` of padding, holding every screen. The column is markup an app
emits (`rst-page`); no partial brings its own.

The column ends with a footer row (`rst-page-foot`) for the language and colour-scheme menus: muted, under a hairline, with the menus at the inline end. The page header stays the first thing on screen.

**Spacing** is a six-step rem scale — 0.25 / 0.5 / 0.75 / 1 / 1.5 /
2.5rem — and screens stack vertically in reading order: page header,
then section head plus card, then the next. Horizontal arrangement is
reserved for the idioms that ship it (card heads, field rows, toolbars,
list-row cells, segmented tabs, stat bands).

**Breakpoints.** 800px is the system's real line: `rst-m-hide` columns
fold away, the sidebar rail collapses into a disclosure, and the topbar
takes its narrow layout. 34rem (544px) stacks the page header's title
and action. **320px is a written commitment** — the layout reflows to it
without a horizontal scrollbar.

**Density** is high by intent: 14px base, 0.45rem control padding, rows
that fit a working screenful. The floor on that density is WCAG 2.2's
Target Size (2.5.8) — pagination chips measure about 30px, row-action
pills about 27px and buttons about 34px on their smaller axis, all clear
of the 24px minimum. Do not shrink them without re-measuring.

The scrollbar gutter is reserved whether or not there is a scrollbar in
it (`--rst-scrollbar-gutter`), so a short page and a long one are the
same width and moving between them does not slide the layout sideways.

## Elevation & Depth

Depth is a theme axis, and `day` turns it on. The light comes from
above: a 1px highlight along a raised edge (`--rst-depth-hl`), a short
contact shadow where an object meets the page (`--rst-depth-contact`),
soft ambient light around it (`--rst-depth-ambient`), a face shade for
filled controls (`--rst-depth-face`, 0.04 in `day`), and a 1px drop for
a pressed button (`--rst-press-drop`). Buttons are a touch proud of the
page and press in; cards rest on it; menus float, with tight elevation;
fields sit slightly into it. `plain` and `signal` set every one flat,
and a theme written before the axis is read through fallbacks that are
today's values.

### Shadow Vocabulary (the `day` theme)

- **Pop** (`0 2px 4px light-dark(rgba(16,24,40,0.06), rgba(0,0,0,0.35)),
  0 8px 16px -4px light-dark(rgba(16,24,40,0.1), rgba(0,0,0,0.5))`): an
  open menu, a dropdown panel, a modal: surfaces that float over the
  page. Real elevation, kept tight.
- **Knob** (`0 1px 2px light-dark(rgba(16,24,40,0.18), rgba(0,0,0,0.4))`):
  the moving part of a control, such as a switch's knob.
- **Lift** (`0 1px 2px light-dark(rgba(16,24,40,0.08), rgba(0,0,0,0.3))`):
  the barely-there separation on a raised strip.
- **Overlay** (`light-dark(rgba(0,0,0,0.45), rgba(0,0,0,0.6))`): the
  modal scrim. Deeper in dark on purpose: black reads lighter against a
  dark backdrop and needs more alpha to still dim.

## The light

`light.js` moves the light. The shadows' light comes from the hour: the
left in the morning, overhead at noon, the right in the evening, so
shadows lean away from it by up to 1.5px and the top highlight leans
toward it. With a mouse, a button catches a sheen where the pointer is
(white on a filled button, a faint accent tint on a plain one in light
mode), and a card's rim brightens near the pointer over about a second
and fades when it leaves. On a phone a pressed button shows the press,
not the sheen, and a tapped card catches the light briefly. The whole
page's light can follow the pointer instead: set `FOLLOW` to `true` at
the top of the file. It is off because every write of it restyles the
page.

It does not run under reduced motion, does nothing under forced colours,
reads no sensor, and never captures the pointer. For the still design,
leave `light.js` out; nothing else asks for it.

## Shapes

Soft rectangles, and the exact softness is a theme axis: `day` uses 6px
on cards and 4px on controls, `plain` 4px and 3px, `signal` 4px and 2px.
A pill radius (999px) is reserved for status pills and count chips —
things that are read as tokens rather than operated.

A 2px radius is the thin-bar step, and it is not on the theme axis: the
capacity meter and a running job's progress bar both use it, at a height
of 4px where a themed 8px corner would swallow the bar whole.

Borders do most of the structural work: 1px hairlines between and around
surfaces, and a distinctly darker 1px edge on anything operable. Focus
is a 2px accent outline offset 2px, never a border swap, so focus never
changes an element's size.

**Known gap, recorded rather than smoothed over.** `tokens.css` also
hard-codes 9px, 7px, 4px, 10px and 14px radii in a handful of places —
the combobox and date-picker lists, and a few small chrome pieces — that
do not resolve through `var(--rst-radius*)`. A theme that changes its
corner language does not change those. It is a real limit on the
remixability this system claims, it predates this record, and it is not
something to fix by editing one component in passing.

**The Derived Rule Rule.** The page header's underline is not authored
per theme: it is `color-mix(in oklab, var(--rst-accent) N%, var(--rst-line))`,
mixed at 45% in `signal`, and left as the plain hairline in `plain` and
in `day`, which keeps its cobalt for things that act. A theme that
changes its accent gets a matching rule with no second value to keep in
step. It is decorative and carries no contrast floor.

## Components

### Hover and press

Hover is quiet and press is clear. A plain button's hover is a light
grey face and a darker border; a filled button's is a deeper fill; a
ghost's is a surface tint. Rows, menu items and sidebar items lift: a 5%
accent tint (9% in dark), a highlight along the top edge, no sheen. The
current sidebar item is a selected thumb, and hovering another is a
half-raised preview of it. These tints and lifts apply only on a
device that can hover, so a tap leaves no tint behind; the phone index
rows keep their tap tint on purpose.

A press is instant and slow to leave. The button drops 1px, loses its
highlight and outer shadow for an inset one, switches its sheen off and
darkens, most under the pointer; on release the darkness lifts over
about 0.7s, the spot under the finger last. A row pressed, or its link
tapped, takes a stronger tint and sinks. Under reduced motion nothing
moves and nothing fades.

### Buttons

- **Shape:** crisp (`{rounded.sm}`, 4px in `day`).
- **Default:** control face, control-border edge (softer than the field
  border on purpose), Ink label at 600 and 12.5px, `0.45rem 0.75rem`
  padding. Hover: a light grey face and a darker border.
- **Primary:** the accent fill with a 4% top-to-bottom shade and a white
  label; hover deepens the fill.
- **Danger:** the danger fill, the same way.
- **Ghost:** no fill, muted label; hover a surface tint, with the label
  darkening to Ink rather than picking up the accent. The accent means
  "this goes somewhere new", and a ghost Cancel does not.
- **Press:** every variant sinks and darkens; see Hover and press.
- **Focus:** 2px accent outline, 2px offset.

### Cards / Containers

- **Corner Style:** `{rounded.md}` (6px in `day`).
- **Background:** Surface, on a Page ground one step below it, with the
  hairline painted as the outer stop of the rim gradient. To recolour a
  card, set `--rst-surface` on it, which also recolours the surfaces
  inside it; a `background` of your own paints over the hairline and a
  `background-color` sits under the face.
- **Shadow Strategy:** at rest, a hairline and two ambient layers lit
  from above; the rim catches the light near the pointer. Menus float
  with real but tight elevation.
- **Internal Padding:** `1.1rem 1.25rem`. A card head (`rst-box-head`)
  sits *outside* the card, holding an `<h2>` and one compact button.
- **Note:** list cards and data grids hold rows only and are unpadded by
  design; prose, forms and links go in a padded box.

### Inputs / Fields

- **Style:** Surface fill, 1px Control Edge (`--rst-line-strong`)
  border, a 1px inset shadow so the field sits into the page,
  `{rounded.sm}`, `0.45rem 0.6rem` padding, full width by default.
- **Focus:** the accent border, a 3px accent halo, and the 2px outline
  offset 2px.
- **Error:** the message is text, and the field is described by it via
  `aria-describedby`; the required marker uses the negative tone.

### Navigation

The rail sits on the page background. The current item is a surface
thumb with a top highlight, a hairline ring and a contact shadow, marked
by `aria-current` in the markup; a hovered item is the thumb's
half-raised preview. Below 800px the rail collapses into a
`<details>` disclosure with a menu icon. Menus are
`<details name="rst-menus">`, so opening one closes the rest with no
script; `fiesta.js` adds outside-click and Escape as enhancement.

**The Row Rule.** A dropdown never sits on a line of its own. Put it in a row, beside what it acts on: a page header, a section head, a list's toolbar, a bar, or the footer row. A menu above a page's title pushes the title down and reads as the page's first action.

### Status Pill

A pill-radius tinted chip carrying a foreground/background tone pair and
**always its label**. The leading dot is decoration on top of the word,
never a substitute for it.

### Stat Band (signature)

The instrument strip a dashboard opens with: a row of stat cells in one
card, divided by inline-start hairlines, wrapping rather than squeezing
so any number of cells works. One cell may be marked `lead`, which is
the same component at 2.1rem instead of 1.5rem — there is no separate
headline component. Numbers are `tabular-nums` so a polled figure does
not jitter its neighbours. A change carries its own sign in the text and
a tone the caller supplies; the tone is never derived from the sign,
because a falling number is good about as often as it is bad.

## Do's and Don'ts

### Do:

- **Do** change the system by setting custom properties. Every colour,
  radius, shadow and type family resolves through one; a fourth theme is
  a single `:root` block.
- **Do** declare colours as `light-dark(<light>, <dark>)` pairs under
  `color-scheme: light dark`, so light and dark stay one declaration.
- **Do** add any new colour that carries text to the contrast gate, at
  4.5:1 against the surface it actually sits on, in all three themes and
  both schemes.
- **Do** give state a second signal besides colour — a label, a sign, a
  number as text.
- **Do** group the digits of any number a person reads as a quantity, for
  their locale — and never group an identifier, a year or a version.
- **Do** keep type in `rem` and the base at 14px, so the scale tracks a
  reader's own browser setting.
- **Do** use logical properties (`border-inline-start`,
  `margin-block-end`) so borders and dividers land correctly in Arabic.
- **Do** let the scriptless rendering be the real one; add script only as
  enhancement that can be deleted.

### Don't:

- **Don't** reach for the SaaS gradient template — purple-to-blue
  washes, glassmorphism, oversized rounded cards, decorative blobs.
- **Don't** stamp a vendor kit's identity onto an app. This system is
  under-designed on purpose so the app's own character can land on top.
- **Don't** use the accent as decoration or mood. It marks what you can
  act on and where you are; status has its own four tones.
- **Don't** float a resting surface. A card rests on the page with the
  theme's ambient light; a pop shadow means something has left the page
  plane.
- **Don't** make a section feel important by making it bigger. Weight and
  colour carry hierarchy before size; a card's `<h2>` is body-sized.
- **Don't** shrink control padding without re-measuring against WCAG
  2.2's 24px target-size minimum.
- **Don't** compose a heading, a paragraph and a button side by side in a
  flex row. Screens stack vertically; horizontal arrangement is reserved
  for the idioms that ship it.
- **Don't** put a dropdown on a line of its own, or above a page's title. Put it in a row beside what it acts on.