Foundations
Layout
Text is left-aligned. Content sits in a centered column, station screens and photos run full-bleed, and seven layouts recur across the site.
Grid
4 columns on phones, 8 from sm (40rem), 12 from lg (64rem), Tailwind's default breakpoints. Resize the window to see it change.
Preview
1
2
3
4
Show codeHide code
<div className="grid grid-cols-4 gap-4 sm:grid-cols-8 lg:grid-cols-12">…</div>Content width
Content sits in a centered column of at most about 76rem plus side margins: <Container>. Running text is at most 66ch. Forms, login and FAQ use the narrow column of about 48rem (<Container narrow>).
Full-bleed bands (tone-ink sections and photo bands) span the viewport, with their content back in the column.
Preview
Container inside a full-bleed band
Narrow column · forms, login, FAQ
Show codeHide code
<section className="tone-ink">
<Container className="py-16">…</Container>
</section>Signature layouts
| Layout | What it is | See | |
|---|---|---|---|
| L1 | Network hero | Home only. Kicker, expanded headline, one primary button, the six-campus line with member counts, then a large natural-color group photo. | Home |
| L2 | Route strip | On long pages, section headings become stations on a vertical route in the gutter; a scrollable strip below lg. | Route strip |
| L3 | Departure board | Upcoming events as rows: time, event and line badges, station, status. | Departure board |
| L4 | Lines | Kepengurusan laid out as the network's lines, BPH first. | Member card |
| L5 | Route tracker | The oprec journey: Online form → Written test → Interview → Results. | Route tracker |
| L6 | Station page | Event detail: a header like a station sign, then photo, body, registration panel and gallery. | — |
| L7 | Gallery | A masonry of event photos in natural ratios, CSS columns 2 / 3 / 4; click opens a dialog. | Dialog |
Page compositions
| Page | Composition |
|---|---|
| Home | L1 hero → departure board (tone-ink, next 4 events) → About → numbers → latest news → Guidebook → footer |
| Events | Title + lede → departure board (upcoming) → past events by month |
| Event detail | L6 |
| Cabinet | Title + cabinet image + network map → L4 per division |
| Oprec status | Narrow column: L5 route tracker → the current stage's panel |
| News | Lead article → article rows |
| FAQ | Narrow column: category chips → accordion |
| Forms, sign-in | Narrow column, single form panel |
No centered hero, no grid of identical cards, no section with a colored background. Layers come from tone and hairlines.