Components
Clock and date
A large local-time anchor gives the start page a useful daily identity.
On this page
Purpose and placement
A large local-time anchor gives the start page a useful daily identity.
Anatomy
- Elza time without day period
- Localized date
- AM/PM pill with sun/moon glyph
Contract
| Input or boundary | Behavior |
|---|---|
| now | Client Date, updated every 60 seconds |
| Locale | Intl.DateTimeFormat defaults to the browser locale |
| Time zone | Viewer environment; not a server timezone preference |
States and feedback
- Before hydration: --:-- and Loading date
- Ready: time, date and day-period indicator
Interaction and composition
The clock is informational. It does not change the active board or start an external action. Use it before the primary composer, with a stable vertical space while the client initializes.
Responsive behavior
Time grows from 6xl to 7xl to 8xl at sm/md. Date row remains readable and centered.
Accessibility contract
Treat the clock as readable text; avoid announcing every minute as a live region. Preserve readable contrast for translucent time text.
Known implementation gaps
Minute updates can be delayed in background tabs. The captures freeze the clock for reproducible comparisons, not as a source feature.
Source references
| Repository file | Responsibility |
|---|---|
| app/(home)/AppHome.tsx | Intl time/date formatting and interval |
Examples from the app
Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 08fa2595a668 · Documentation v1.0.0