Principles

Six rules every component keeps

These rules are why a screen built from Skribly UI looks calm, reads the same in every theme and works from the keyboard. Each one is checked in review, and several are checked by the tests.

1. One accentLink to the section 1. One accent

Amber is the only accent. It marks the main action of a view, the current item and the focus ring, and nothing else. Status colours are for status: green says done, red says failed. When everything is coloured, nothing stands out.

Do. Give a view one primary button and let the others step back.

Don’t. Make every button primary, or use the danger colour for an action that destroys nothing.

2. Colour never aloneLink to the section 2. Colour never alone

About one man in twelve does not see red and green apart, and Windows high contrast replaces every colour. So every state pairs its colour with a word, a glyph or a shape. Badges carry a word, alerts carry a tone word for screen readers and an icon of their own shape, and the current page has a bar as well as a tint.

PassedWaitingFailed

Do. Say the state in words, and add a glyph when the space allows.

Don’t. Let a dot of colour carry the meaning on its own.

3. Accessible by defaultLink to the section 3. Accessible by default

The accessible way is the only way a component offers. Behaviour comes from React Aria, so keyboard support, focus management and screen reader semantics follow the ARIA patterns. The focus ring is plain CSS in the page defaults, so a control that forgets its own still shows one. Targets are at least 24 by 24 pixels, messages that arrive later are read out, and motion stops when the reader asks for less.

The target is WCAG 2.2 AA. The accessibility page lists what the library does for each criterion and what the app still owns.

4. No built-in textLink to the section 4. No built-in text

The apps keep their own language files, so no component holds a word of its own. Every visible label and every accessible name, down to the close button of a toast, is a prop. A missing label is a type error, not a silent English default.

Labels come from the apptsx

<ToastViewport
  toneLabels={{ ok: t('tone.ok'), info: t('tone.info'), warn: t('tone.warn'), danger: t('tone.danger') }}
  closeLabel={t('toast.close')}
  regionLabel={t('toast.region')}
/>

5. Works with and without ReactLink to the section 5. Works with and without React

A marketing page in Astro and an app in React should look like one product. The plain CSS classes match the React components, so a page with no JavaScript gets the same button, field, card and message.

React

tsx

<Button variant="outline">Cancel</Button>

Plain CSS

html

<button class="sk-button sk-button--outline">Cancel</button>

6. Tokens firstLink to the section 6. Tokens first

Components use semantic utilities such as bg-surface and text-muted, never a hex colour, a gray-* class or the dark: variant. The tokens decide what a surface looks like in each theme, so a component is right in every theme without knowing which one is on.

Dotsx

<div className="border-border bg-surface text-fg" />

Don’ttsx

<div className="bg-white text-gray-900 dark:bg-gray-900" />