Card title
Supporting text · updated today
A card groups one thing: its summary, and what you can do with it.
One tile, a whole system.
The tokens, components and patterns every Arabesque Labs product is built from: accessible to WCAG 2.2 AA, written for left-to-right and right-to-left alike, and designed so people get things done in the fewest steps, seeing every consequence.
Foundations
Colour
Roles, not hues: each name says what the colour is for. Every pair the system relies on is measured at build time.
Tints
Eight bright tints for identity and emphasis: tags, highlights, avatars. Each ink is readable on its ground.
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.
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.
Space and shape
A 4px step for everything spatial. Corners are crisp (2px); depth comes from borders and surface steps, never shadows.
Motion
Quick, and only in answer to something done: 150ms for feedback, 250ms for disclosure and themes. With reduced motion, things change at once.
Icons
Line icons on a 24-unit grid. Those that point along the reading direction mirror in right-to-left.
Components
Button
Does something. One primary per view; the label names the action and its object.
Add an item to export.
Back link and breadcrumbs
A way back, before the page's title: a back link for the previous step, breadcrumbs for where a page sits.
Text input
A visible label, an optional hint, the field; optional fields say so.
We'll only use this to reply to you.
Type 5000, 5k or ٥٬٠٠٠.
a month
Error: Enter a reference that's 2 letters then 6 numbers, like AB123456
Changed, not saved
Select and combobox
A select for a fixed list; a combobox (a datalist) where people may also type their own.
A new group is created when you save.
Textarea and character count
For longer answers. With a limit, it says what's left in words, and lets people type past it.
A sentence or two is enough.
Date input
Three fields for dates people know; the calendar picker for dates chosen near today.
Search
A field with its icon, and Clear once there's text. Escape clears it too.
Checkboxes
Independent options, in a fieldset with a legend; the whole row is the target.
Radios
One of several, with a sensible default where there is one.
Switch
A setting that applies the moment it's flipped: no Save.
Segmented control
Two to five short options, all visible: a choice in a form, or a view switch.
Error summary
When a form is submitted with errors: every error, at the top, each a link to its field. It takes focus, and the page title starts with “Error:”.
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
Card, panel and stat
A card holds one thing people act on; a panel is a rule above a group; a stat is a figure with its label.
Figure, this month12,480last month: 11,902
Panel title
A rule above a group: most groupings need no box.
Summary list
Facts about one thing, each with its own action: for checking answers, and for any record.
- Member since
- 4 January 2024
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 |
Badge
A short status beside something, in words. Sentence case, never capitals.
Draft
Active
Done
Beta
Overdue
New
3
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.
Task list
The parts of a longer job, each with its status in words; done in any order.
- Add your detailsDone
- Upload a documentIn progress
- Choose your settingsNot started
- Review and sendFinish the other tasks firstCan't start yet
Page head and tabs
The page's title, what applies to the whole page, then its views.
Page title
Beta
Period
The first view.
The second view.
The third view.
Sidebar
An app's sections, collapsible to icons; a bar along the top on small screens.
The main column.
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.
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.
Couldn't load this page
The connection dropped. Check you're online, then try again.
Changing this also updates 2 related items.
Phase banner
Under the header: the product, or part of it, is new or changing, and feedback is welcome.
Toast
What just happened, briefly, with Undo when it can be undone.
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.
Tooltip
A short label for an icon or a mark, on hover and on focus. Never essential.
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.
Loading and progress
Progress where the work happens: a skeleton, a spinner, or a bar when it can be measured.
Loading items
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
Save state, changes and stale results
Whether a change is kept, what else it touches, and which figures are being worked out again. Try them.
£
Changing the amount also updates 2 related items.
Working out again…
Total: £1,240
Rolled back
A change shown at once that the server then refused: put back where it was, with why, and Retry.
- Item one
- Item two
Bulk action bar
Once things are selected: how many, what can be done to all of them, and a way to clear.
Keyboard shortcuts
The platform's modifier: ⌘ on Apple devices, Ctrl elsewhere. Single keys never fire while typing.
- N
- New item
- /
- Search
- CtrlK
- Open the command menu
- CtrlZ
- Undo
- ?
- Show the shortcuts
Column chart
Values over time or across categories, grouped, with an optional target line.
Split bar
The parts of a whole, in one bar, with a key.
Bullet chart
Each value against its target, with the difference in words.
Mark and lockup
The mark beside the wordmark, built from the logo pack. One colour; never redrawn.
Arabesque Labs
Arabesque LabsProduct name
Pattern
The 4.8.8 tessellation of the mark's tile, contact angle 67.5°, drawn by rule as background texture.
Patterns
Ask, check, confirm
For anything sent, or hard to take back: ask; check errors on submit, with an error summary; let people check their answers; then confirm, with what happens next. Try submitting it empty.
Check your answers
Request sent
Your reference AL-4K7Q-92
What happens next
We've sent a confirmation to your email address. We'll reply within 2 working days.