Foundations Colour Roles, not hues: each name says what the colour is for. Every pair the system relies on is measured at build time.
--al-color-bgThe page
--al-color-surfaceCards, panels, inputs
--al-color-surface-sunkWells, hover, info
--al-color-textBody text
--al-color-text-mutedSecondary text
--al-color-lineHairlines
--al-color-controlControl borders
--al-color-accentActions, focus, success
--al-color-on-accentText on accent
--al-color-dangerErrors, destroying
--al-color-warningNeeds attention
--al-color-infoInformation
--al-color-inverseToasts, tooltips
--al-color-chart-1Chart, first series
--al-color-chart-2Chart, second series
--al-color-chart-3Chart, third series
--al-color-chart-4Chart, fourth series
Read the spec · On its own page
Tints Eight bright tints for identity and emphasis: tags, highlights, avatars. Each ink is readable on its ground.
Aa data-tint="teal"
Aa data-tint="green"
Aa data-tint="yellow"
Aa data-tint="orange"
Aa data-tint="pink"
Aa data-tint="purple"
Aa data-tint="blue"
Aa data-tint="cyan"
Read the spec · On its own page
Type Jost for the interface and headings, Newsreader for reading. Arabic falls through to IBM Plex Sans Arabic, Kufam and Amiri: a little larger, more line height, no letter-spacing.
displayWhereas disregard and contempt for human rights have resulted
3xlWhereas disregard and contempt for human rights have resulted
2xlWhereas disregard and contempt for human rights have resulted
xlWhereas disregard and contempt for human rights have resulted
lgWhereas disregard and contempt for human rights have resulted
mdWhereas disregard and contempt for human rights have resulted
baseWhereas disregard and contempt for human rights have resulted
smWhereas disregard and contempt for human rights have resulted
xsWhereas disregard and contempt for human rights have resulted
Reading text
Islamic geometric patterns are intricate structures built from simple, repeated rules. We build software the same way: small, well-made modules, clear interfaces, a coherent system.
Numbers inside a sentence
It costs £12 a month for each person, or $1,440 a year for 10 people.
Read the spec · On its own page
Space and shape A 4px step for everything spatial. Corners are crisp (2px); depth comes from borders and surface steps, never shadows.
--al-space-1
--al-space-2
--al-space-3
--al-space-4
--al-space-5
--al-space-6
--al-space-8
--al-space-12
--al-space-16
Read the spec · On its own page
Motion Quick, and only in answer to something done: 150ms for feedback, 250ms for disclosure and themes. With reduced motion, things change at once.
Read the spec · On its own page
Icons Line icons on a 24-unit grid. Those that point along the reading direction mirror in right-to-left.
arrow arrow-up board calendar check chevron chevron-down close copy danger edit external file info language mail menu minus more plus retry search settings sidebar success theme trash undo warning Read the spec · On its own page
Running text Paragraphs, lists, a quotation, code, keys and a highlight, inside .al-prose: the reading face, the measure, and space between.
Running text in bold , italic , with a link , inline code, a key, Ctrl + S , and a highlight . And small print.
A list of things in no order Steps, in order one after another A quotation inside running text, with its source after it.
Read the spec · On its own page
Content Disclosure What's secondary, folded away, with the value inside shown beside its name.
Advanced settings 3 changed Settings most people never need.
Keep deleted items for 90 days Read the spec · On its own page
Card, panel and stat A card holds one thing people act on, with its actions at its foot; a panel is a rule above a group; a stat is a figure with its label.
A card groups one thing: its summary, and what you can do with it.
Open Edit
Recommended
A ribbon pins one word to one card; the footer holds its actions.
Figure, this month 12,480 last month: 11,902
Panel title A rule above a group: most groupings need no box.
Components 42
Tokens 164
Contrast pairs measured 112 none failing
Read the spec · On its own page
Code and command Code to read or copy, left to right in either language, with the lines that matter marked. A command is one line to paste.
<link rel ="stylesheet" href ="dist/arabesque.css" >
<header class ="al-site-header" >…</header >
<script type ="module" >
import { initSiteHeaders } from "./js/site-header.js" ;
initSiteHeaders ();
</script > import { ArabesqueProvider , SiteHeader } from "@arabesquelabs/design-system/react" ;export const Top = () => ( <ArabesqueProvider lang ="ar" sprite ="/dist/icons.svg" >
<SiteHeader links ={links} />
</ArabesqueProvider >
); css/components/code.css Copy
.al-code__pre { direction : ltr;
text-align : start;
} Read the spec · On its own page
Feature tabs A column of tabs, each a name and a line about it, beside what the chosen one shows.
Right to left Logical properties mirror with the page. Contrast, measured Every pair, in both themes, at every build. The keyboard Everything works without a mouse.
Copy
.al-toc a { padding-inline-start : var (--al-space-3 );
border-inline-start : 2px solid var (--al-color-line );
} Contrast pairs measured 154 none failing
Themes 2
Tab reaches every control; arrow keys move within tabs, menus and dates; Escape closes what opened.
Read the spec · On its own page
Logo wall Who uses it, as their marks in one colour, as many to a row as fit. Never a scrolling marquee.
Read the spec · On its own page
Quote What someone said, in their words, then who they are.
What it's about
What they said, in their own words: trimmed, never reworded, and shown with their permission.
Their name Their role, at their organisation A second person's words, beside the first.
Another name Their role Read the spec · On its own page
Call to action The page's last word: one line, then what to do.
Your next page, built from the same tile. Start from the template, or take only the parts you need.
Read the spec · On its own page
Summary list Facts about one thing, each with its own action: for checking answers, and for any record.
Member since 4 January 2024 Read the spec · On its own page
Table For comparing values: numbers line up, the total stands out, asides recede. Wide tables scroll in their own region.
Item Quantity Price Total Item one 2 £12.00 £24.00 Item two 1 £120.00 £120.00 Item three 4 £2.50 £10.00 Total £154.00 Of which VAT, at 20% £25.67
Read the spec · On its own page
Badge A short status beside something, in words. Sentence case, never capitals.
Draft Active Done Beta Overdue New 3 unread
Read the spec · On its own page
Tag, highlight and avatar Colour for identity and emphasis, in eight bright tints; never for status.
Design Urgent Research Plain tag
Highlights draw the eye to key words , names and ideas , in any of eight tints .
LH SO YA ST AL
LH SO YA +3 Shared with Lina, Sam, Yusuf and 3 others Read the spec · On its own page
Timeline What happened, each event at its time, along a line: a record's history or an activity feed.
Today, 09:40 Request approved
By Lina Haddad. The team can start.
Yesterday, 16:05 Budget changed to £1,200 a month
Yesterday, 11:20 Sam Okafor commented
Can we start a week earlier?
Read the spec · On its own page
List Things of one kind, one to a row: notifications, results, files. A row that opens something is a link from edge to edge.
Read the spec · On its own page
Section A band of the page: a hairline from the one before, its heading and lede.
01 Who we are
The name is the method Four stages, repeated as many times as it takes to get something right.
Settings most people never need.
How we build. Small parts, one rule, repeated with care. Read the spec · On its own page
Steps A numbered sequence: the stages of how something is done. Only for real sequences.
1
Discover Start with the real problem, not the assumed solution. We take time to understand the constraints before writing a line of code.
2
Design Structure comes before pixels. We sketch the system's shape, its data, flows and edge cases, so the build has a foundation.
3
Build Small, deliberate increments instead of big-bang releases. Working software, reviewed and tested at every step.
4
Refine The first version is rarely the right one. We revisit, simplify and polish until the details hold up.
Read the spec · On its own page
Navigation Page head and tabs The page's title, what applies to the whole page, then its views.
Page title Beta Period Last 30 days Last 7 days
Overview Activity 12 Settings
Read the spec · On its own page
On this page A page's sections beside it, with the one being read marked as it scrolls.
On this page
The idea Scroll the page: the link to the part you're reading is marked.
Approach Scroll the page: the link to the part you're reading is marked.
Contact Scroll the page: the link to the part you're reading is marked.
Read the spec · On its own page
Back to top On a long page, a link back up, in the corner once the page has scrolled two screens. Followed, it moves focus to the top too.
Scroll this page two screens down: this link appears in the corner, at the end of the line.
Read the spec · On its own page
Feedback Notice and side-effect note A message in the page, in four kinds, each with an icon and a title. A side-effect note says what else will change, before it does.
Done
Your changes are saved.
Planned maintenance
On Sunday, from 2am to 4am, saving may be slow.
Changes saved
Everyone with access can see them now.
Check your details
Some of your details may be out of date.
Review details
Couldn't load this page
The connection dropped. Check you're online, then try again.
Try again
Changing this also updates 2 related items .
Read the spec · On its own page
Phase banner Under the header: the product, or part of it, is new or changing, and feedback is welcome.
Show the announcement again
Read the spec · On its own page
Dialog A decision that needs attention now. It never loses what was typed, and confirms only what can't be undone. A sheet on small screens.
Rename item… Delete account…
Read the spec · On its own page
Status A state in a word, with a dot in its colour. The word is the meaning; the dot repeats it.
Online Degraded Down Deploying Paused
Server one Online
Read the spec · On its own page
Popover More about something, when it's asked for: a button opens it beside itself. Escape or a click outside closes it.
What's a tax code? Tax code
It tells your employer how much tax to take from your pay. It's on your payslip.
Find your tax code
Contact angle Contact angle
The angle at which the pattern's lines meet the tile's edge: 67.5°.
Read the spec · On its own page
Empty state Why there's nothing here, and the next action. Never a dead end.
No items yet
Add one to get started. You can import several at once, too.
Add item Read the spec · On its own page
Loading and progress Progress where the work happens: a skeleton, a spinner, or a bar when it can be measured.
Loading items
Loading
Uploading, 60% Read the spec · On its own page
Confirmation The end of a flow that sends something: it's done, the reference, then what happens next.
Request sent Your reference AL-4K7Q-92
Read the spec · On its own page