Design system
One typeface, ruled rows, big tabular numerals, and a single saffron marker. The schedule is the design; everything else stays out of its way.
Color
Tokens live in globals.css and flip for dark mode automatically.
- Paper--paperPage background
- Paper 2--paper-2Panels, table headers
- Ink--inkBody text, numerals
- Ink 2--ink-2Secondary text
- Dusk--duskCaptions, sunrise row
- Mist--mistRules and borders
- Moss--mossLinks, primary buttons
- Moss soft--moss-softQuiet button hover
- Saffron--saffronNext-prayer marker, focus ring. Used once per screen.
- Danger--dangerValidation problems
Type
IBM Plex Sans, 1.25 scale from 16px. Numerals always tabular.
7:42 pm
Page title — Masjid Al-Noor
Section — Iqamah rules
Body — Set your iqamah times once, as rules instead of a spreadsheet. SalahLink keeps them current through the seasons.
Caption — Calculated with ISNA angles
Prayer rail
The one shared component. Public page, widget, kiosk, and admin preview all render this.
| Prayer | Adhan | Iqamah |
|---|---|---|
| Fajr | 5:52 am | 6:15 am |
| Sunrise | 7:10 am | – |
| Dhuhr | 1:24 pm | 1:45 pm |
| Asrnext | 4:52 pm | 5:15 pm |
| Maghrib | 7:37 pm | 7:42 pm |
| Isha | 8:50 pm | 9:15 pm |
| Prayer | Adhan |
|---|---|
| Fajr | 05:52 |
| Sunrise | 07:10 |
| Dhuhr | 13:24 |
| Asrnext | 16:52 |
| Maghrib | 19:37 |
| Isha | 20:50 |
Kiosk scale
Size "l" on a dark panel: what a TV in the hall shows.
| Prayer | Adhan | Iqamah |
|---|---|---|
| Fajr | 5:52 am | 6:15 am |
| Sunrise | 7:10 am | – |
| Dhuhr | 1:24 pm | 1:45 pm |
| Asrnext | 4:52 pm | 5:15 pm |
| Maghrib | 7:37 pm | 7:42 pm |
| Isha | 8:50 pm | 9:15 pm |
Controls
Offsets keep up with the seasons on their own.
Rounded up to the nearest 5 minutes.
Isha iqamah 20:00 is before adhan 20:50 on 2026-09-09. Move it later or switch to an offset.
Rules of the house
- Saffron appears once per screen: the next prayer, or the focused control. Never both as decoration.
- Times are always tabular numerals; 12-hour by default, 24-hour is a user toggle.
- Rows are separated by rules, not cards. Panels get a background only when they need to be isolated (kiosk).
- Buttons say what happens: Publish schedule, Claim this masjid, Save rules.
- Errors state the fact and the fix. They never apologize.
- No motion except in response to an action.