Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- A warm off-white race-ranking page has a compact header with identity, rankings/races links, search field and utility icons. Opening pairs large left heading/explanation with recent-results panel at right. Search and category pills sit below; two equal standings tables follow, then three explanatory cards in black, pale blue and white. Thin dividers and generous spacing are accented by amber.
- Type
- Large heavy sans introduction, regular sans names and results, compact monospaced-looking metadata/table labels, dates and times; exact faces unknown.
- Color and surface
- Warm off-white canvas/cards, charcoal text, dark selected pill, warm-gray rules, amber labels and pale-blue explanatory card.
- Components
- Compact nav/search, two-part intro/results panel, search/filter controls, paired standings tables and explanatory cards.
What makes it work
- Warm off-white field with thin warm-gray rules and softly rounded panels
- Bold sans introduction balanced by a recent-results summary
- Search/filter controls above paired ruled records tables
- Regular sans names/results contrasted with compact monospaced-looking metadata
On a new subjectFor a regional blood-donation network, create a warm light recognition dashboard with a bold sans introduction, recent-drive summary, search/filters and paired rounded ruled tables for donation milestones and centers. Use regular sans names/results with compact monospaced labels and metadata, thin warm-gray dividers and restrained amber status pills; replace races with verified health-service records.
Measured
Fonts loadedGeist, Geist Mono
H156px / 600 / -1.96px
Body text16px
Page backgroundlab(94.4667 0.0291467 2.67346)
Text colorlab(10.8278 -0.050351 2.3117)
Page height1,266px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- Warm pale-gray results interface with near-black sans headings, rounded off-white cards, thin table rules and small monospaced metadata. The opening area pairs a large two-line title/search group with a recent-results card. Two ranking tables sit beneath, followed by three explanatory cards in black, powder blue and off-white. Tiny orange status badges provide the strongest bright accent; initials occupy muted rounded squares rather than photos.
- Responsive
- Desktop content is1120px wide centered atx160. Opening grid has two536px tracks and48px gap; tablet changes to one736px track and32px gap, phone one358px track and32px gap. Display changes56px/57.12px to48px/48.96px tablet and36px/36.72px phone, weight600 with tight tracking. Header search wraps to a second row on phone, while the larger hero search remains separate. Ranking cards remain two352px tracks on tablet and their right-side table content is clipped; horizontal scrolling was not exercised. Phone only exposes the recent-results card, with wrapped metadata/footer; the ranking-table transformation below the viewport remains unknown.
- Scroll
- Requested scroll reaches actual scrollY266, the document maximum for1440x1266 in a1000px viewport. Header remains at top. Ranking tables, three contrasting explanatory cards and two Biggest Movers tables become visible. Table cells combine ordinary14px names with smaller monospaced race/rank metadata, thin horizontal rules and green positive movement values. The preceding hero and latest-winner rows partly behind the header are excluded from full visibility claims.
