01
The price is always visible
Every screen that leads to a booking shows the full price, with taxes and fees, before the client commits.
SKYLARK · Design System
One system for the booking app and the operator console.
Tokens, components and rules used to build the SKYLARK charter platform. Every component on this page is live: try the states, switch to dark mode, copy the code.
- 54
- design tokens
- 10
- core components
- 2
- themes, light and dark
- AA
- contrast on every text pair
Principles
02
Quiet by default
Midnight, white and greys carry the interface. Colour is reserved for status: confirmed, in flight, attention, maintenance.
03
Same rules, two audiences
The client app and the operator console share tokens and components. Density changes; the language does not.
Foundations
Colour
Brand, neutral and status colours. Contrast ratios are calculated on this page against white and against the ink colour.
Brand
Neutrals
Status
Semantic tokens
Components use semantic tokens, never raw values. Dark mode swaps the values behind the same names.
| Token | Light | Dark | Use |
|---|
Foundations
Typography
Archivo, set slightly wide, for display and numbers. Inter for interface text. Heebo replaces both in Hebrew.
Foundations
Spacing
A 4-pixel base. Components use steps 1 to 6; page layout uses steps 6 to 10.
Foundations
Radius
Five radii. Smaller elements get smaller radii, so nested corners stay concentric.
Foundations
Elevation
Four levels. Borders separate surfaces; shadows are kept for things that float above the page.
Foundations
Motion
Short and decelerating. Motion confirms an action or shows where something came from; it never delays the client.
With reduced motion switched on in the system settings, transitions become fades of 120 ms or less.
Component
Button
One primary action per view. Secondary and ghost buttons for everything else.
States
Accessibility
- Minimum target 40 × 40 px (44 on touch). The small size is for dense console tables only.
- Focus ring: 2 px gap and 2 px midnight ring, visible in both themes.
- While loading, the button keeps its width, sets aria-busy and ignores repeat presses.
Component
Input
Label above, helper or error below. Airports accept a city, a name or an IATA code.
City, airport or three-letter code
Type at least three letters, then press Tab
States
Passengers
Accessibility
- Every input has a label element; helper and error text are linked with aria-describedby.
- Errors are written as what to do next, set aria-invalid, and never rely on red alone: an icon and text come with them.
Component
Select
A listbox for short, known lists: aircraft category, departure time, currency. More than twelve options become a searchable input.
Aircraft category
- Light jetUp to 6 seats · 1,950 nm
- Midsize jetUp to 8 seats · 2,700 nm
- Super-midsize jetUp to 9 seats · 3,400 nm
Arrow keys move, Enter selects, Esc closes.
Midsize jetSuper-midsize jet
CL-350PC-24
Accessibility
- Button with aria-haspopup and aria-expanded; list with role listbox; options with aria-selected.
- Focus returns to the button when the list closes.
Component
Date picker
One month at a time on mobile, two on desktop in the booking app. Past days are disabled; today is outlined.
Accessibility
- Grid navigation: arrow keys move by day and week, Page Up and Page Down by month, Home and End to the start and end of the week.
- Each day is announced with its full date; disabled days say why.
- In Hebrew the grid runs right to left and the week starts on Sunday; in English it starts on Monday.
Component
Flight card
One aircraft option with its full price. Three cards appear after every search: light, midsize and super-midsize.
Prices are illustrative demo data.
€32,900Total, all fees
€5,900per flight hour*
Accessibility
- The three cards form a radio group: one choice, arrow keys move between them.
- An unavailable card stays in the group with aria-disabled, so the client hears why it cannot be chosen.
Component
Quote summary
The price, line by line, next to the booking button. The same component closes the booking in the app and prints on the confirmation.
Accessibility
- Built as a description list, so screen readers read each line as a name and a value.
- Amounts use tabular figures and stay left-to-right in Hebrew.
Component
Table
The operator console's main surface. Sortable columns, status badges and right-aligned numbers.
Demo data. Click a column header to sort.
Status badges
New requestConfirmedIn flightAwaiting paymentMaintenance
Accessibility
- Sortable headers are buttons inside th, and the column carries aria-sort.
- On narrow screens the table scrolls inside its own frame; the page itself never scrolls sideways.
Component
Toast
Short confirmation after an action. It leaves by itself after five seconds, pauses on hover, and never carries the only copy of important information.
Booking confirmedSK-2612 · TLV to NCE, Friday 09:00
Accessibility
- Success and information use role status; errors use role alert.
- Toasts appear at the bottom start corner, away from the booking button and the chat.
Component
Modal
For decisions that cannot be undone. The question is the title; the buttons repeat the verb.
Accessibility
- Uses the native dialog element: focus moves inside, stays there, and returns to the trigger on close.
- Esc closes. The safe choice gets initial focus, not the destructive one.
Component
Tabs
Switch between views of the same thing. In the search panel: one way, return and multi-leg.
TLV → NCE
Friday 9 October · 09:00 · 4 passengers
TLV ⇄ NCE
Out Friday 9 October · back Monday 12 October
TLV → NCE → GVA → TLV
Three legs over five days
Accessibility
- Roving tab index: Tab enters the list once; arrow keys move between tabs; Home and End jump to the ends.
- Arrow direction follows the reading direction, so the right arrow moves backwards in Hebrew.