The system, in one place.
Every token, type specimen, logo variant, and component that SalahClock is built from. Live, browsable, and the single source of truth — for our team and yours.
Foundations
The shape of the brand in three sentences.
The five punched-disc — a glyph for the five daily prayers, opened from a solid disc by removing five circles.
"Prayer times, in sync." — quiet, declarative, free of marketing fat.
Calm, precise, of the ummah. The brand of a well-kept mosque, not a startup.
Color
Deep green on paper cream. Inverted in dark mode. Every token is a CSS variable — themes can override safely.
--primary#0F2A22Brand mark, hero text, primary CTA
--secondary#14362CHover & pressed states for primary
--accent#1B473ASecondary highlights, focus ring
--background#F4F1EAPaper cream — page background
--card#FBFAF6Warmer white — cards & popovers
--foreground#0A0A0ABody ink
--muted-foreground#6B6B6BSecondary text
--border#E5E2DCLines, dividers, input outlines
--chart-4#9EB6ADSage tint — charts, illustrations
Typography
Three families. Each with a specific job. Together they cover display, body, and the numeric grid that prayer times need.
.font-brand-display.font-brand-body.font-monoOne width across four scripts
Prayer-time columns must align across languages. We chain four fonts behind --font-mono so Latin digits render in JetBrains Mono, Arabic-Indic in Noto Sans Arabic, Eastern Arabic-Indic in the same, and Bengali in Noto Sans Bengali — all width-matched.
Logo
The wordmark is salah:clock with a half-weight colon. The mark is the five punched-disc. Both render via the <Lockup> component.
Use the auto variant — it inverts cleanly between light and dark.
Keep at least the mark's width as clear space around the lockup.
Don't rotate, skew, or recolour the lockup.
Don't reproduce the wordmark in another typeface.
Spacing & radii
An 8-pixel base grid. Six standard radii driven by --radius. Curves stay generous; corners stay quiet.
p-28pxp-312pxp-416pxp-624pxp-832pxp-1248pxsmmdlgxl2xl3xlComponents
The shadcn/ui primitives we ship with. Each rendered live below — copy the snippet, paste, done.
Motion
Subtle. Dignified. Never decorative. A masjid screen shouldn't twitch.
Move only on action
Animations confirm user input — they don't fill silence. No ambient motion in a kiosk display.
Short, eased, predictable
150–250ms with a soft ease. If the user can perceive the start and stop, it's right.
Respect reduced motion
prefers-reduced-motion disables decorative motion entirely. Functional transitions are kept but shortened.
Voice & tone
How we write — for the dashboard, for the marketing site, for the inbox.
Calm and declarative
“Set up your mosque clock in 60 seconds.” — A fact, not a sales pitch.
Marketing fat
“Revolutionise your prayer experience with our cutting-edge AI-powered platform!” — Not how anyone talks in a masjid.
Specific over abstract
“30 days cached. Works without Wi-Fi.” — Concrete, measurable, useful.
Vague promises
“Best-in-class reliability and seamless connectivity.” — Means nothing.
Building with SalahClock?
Components and tokens live in the repo. If you’re extending the design system or proposing a change — get in touch.