Design system
Colours
--brand-primary — 4 shades
--brand-ink — 6 shades
--brand-soft — 4 shades
Standalone colours
Feedback — added 17 August 2026, because all three Bricks defaults fail AA: danger 2.94:1, success 2.34:1, info 2.18:1
Typography
400Crișan și Sfântu Gheorghe, Țărmul Mării700Crișan și Sfântu Gheorghe, Țărmul Mării400Crișan și Sfântu Gheorghe, Țărmul Mării500Crișan și Sfântu Gheorghe, Țărmul Mării600Crișan și Sfântu Gheorghe, Țărmul Mării700Crișan și Sfântu Gheorghe, Țărmul Mării400 itCrișan și Sfântu Gheorghe, Țărmul MăriiScale
Specimen is Romanian on purpose — it exercises ă â î ș ț, so the comma-below forms stay verifiable at every step.
--text-5xl--text-4xl--text-3xl--text-2xl--text-xl--text-l--text-m--text-s--text-xsSpacing
Radius
Buttons, photos and form fields use --radius-s. Logos stay square; avatars use --radius-full. Every step tightens as the screen grows — the small number is the desktop value.
xs4px fixs8 → 6pxm12 → 10pxl20 → 16pxxl32 → 24pxfull1e5pxShadows
xssmlxlText widths
--text-width-s · 20chThe Danube Delta is the largest wetland in Europe. Sfântu Gheorghe, Crișan and Mila 23 are reachable only by boat, and the trip from Tulcea takes two to three hours.
--text-width-m · 45chThe Danube Delta is the largest wetland in Europe. Sfântu Gheorghe, Crișan and Mila 23 are reachable only by boat, and the trip from Tulcea takes two to three hours.
--text-width-l · 65chThe Danube Delta is the largest wetland in Europe. Sfântu Gheorghe, Crișan and Mila 23 are reachable only by boat, and the trip from Tulcea takes two to three hours.
Controls
Buttons — three variants, all from Theme Style toural
Form field — real markup, so what you see is the Theme Style, not a mock-up
Link in running text
The Danube Delta has over 300 bird species and one road to Mila 23. The link is underlined because colour alone may not be the only marker of a link — WCAG 1.4.1.
Focus — press Tab through the examples above. Inelul e 3px --brand-primary, offset 2px.
Icons and illustrations
Interface icons — 19 files, all 0 0 24 24, filled path. Shown at 2.4rem in --brand-primary, then the same files at --brand-neutral-400. One file, two roles.
Illustrations — 5 files, canvas ~100 units, line of 2.81 units (2.8% of the canvas), corners at half the stroke. Shown at 4.3rem, the size they are used at.
The limit, measured
Line art at 24px renders 0.67px — it disappears next to a filled icon.
This is where illustrations belong. The two sets never share a row.
Conformance — 24 of 27 files carry fill="currentColor". The three that do not: toural-logo.svg (a 178 KB raster in an SVG wrapper), toural-dots.svg (a decorative pattern, correct as-is) and bathtub.svg — the last is a defect and the last vendor name in the library.
Motion
Three durations. Entrances and exits are 200–300ms. No bounce, no elastic easing — ever.
--transition-s200ms — colour, hover
--transition-m350ms — buttons
--transition-l500ms — larger reveals
Two rules that are not negotiable
transform and opacity, plus a small Y or scale.Reduced motion
A global @media (prefers-reduced-motion: reduce) block drops every duration to 0.01ms. For some people motion is not a preference, it is nausea.
Grid and ratio
Grid templates — use these instead of typing repeat(...)
--grid-1 · --grid-2 · --grid-3 · --grid-4all built on
minmax(0, 1fr), so a long word cannot blow out a column--grid-2-1 · --grid-2-3the two asymmetric splits
Media ratios — applied natively, never with padding tricks
square1landscape4/3portrait3/4widescreen16/9ultrawide18/5Container --container-width 140rem · breakpoints 991 / 767 / 478
Accessibility
The floor. Each item is in place — do not regress it.
| What | How | Measured |
|---|---|---|
| Focus | :focus-visible → 3px --brand-primary, offset 2px. Never outline:none | WCAG 2.4.7 |
| Reduced motion | global block, every duration to 0.01ms | WCAG 2.3.3 |
| Touch targets | 44px minimum below 991px — buttons, menu links, mobile toggle | WCAG 2.5.5 |
| Text contrast | AA on every pair, checked at the value not by eye | 4.5:1 · 3:1 large |
| Non-text contrast | the form field border is --brand-neutral-400 | 5.08:1 — neutral-200 gives 1.51, neutral-300 gives 2.20 |
| Colour is never alone | links carry an underline as well as a colour | WCAG 1.4.1 |
| Errors | named in text beside the field, never by colour alone | WCAG 3.3.1 |
| Body size | 18px. Never below 16px for reading text | — |
| Semantics | one h1 per page, headings descend without skipping, images carry alt | — |
Try it: press Tab through this page. Every link and button shows the ring.