SaveDay

# SaveDay — Style Reference
> Industrial Scanner Clarity
Theme: light

SaveDay uses a bold, monochrome industrial scanner aesthetic: high-contrast black text on white or light gray surfaces dominates, providing a no-nonsense, functional atmosphere. Key sections and interactive elements are highlighted with a vibrant, almost neon yellow, acting as a functional accent rather than decorative flourish. Typography is dense and commanding, especially for headings, contrasting with crisp, minimal UI elements.

## Colors
| Name | Value | Role |
|------|-------|------|
| Canvas White | `#ffffff` | Page backgrounds, card surfaces, primary text on dark backgrounds |
| Midnight Black | `#0d0d0d` | Primary text, prominent headings, borders for contrast elements |
| Deepest Ink | `#000000` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |
| Cool Mist | `#edeef0` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |
| Pinstripe Gray | `#e5e4e3` | Subtle background for alternating sections, secondary card surfaces |
| Ash Cloud | `#999999` | Muted text, list item borders, decorative strokes |
| Cloud Shadow | `#cccccc` | Subtle shadow color for cards, decorative fills |
| Graphite | `#333333` | Darker card backgrounds, iconography |
| Scanner Yellow | `#fbda5f` | Yellow accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color |
| System Blue | `#006aff` | Default link color, accent for specific interactive elements |

## Typography
| Family | Role |
|--------|------|
| Phudu | Dominant display font for primary headings and impactful statements. Its condensed, robust character adds a sense of urgency and directness. Weight 700 creates strong visual presence. Letter-spacing is aggressively tight (-0.03em) at large sizes, fitting many characters into headlines and creating a dense, impactful block of text. |
| Interdisplay | Versatile sans-serif for body text, subheadings, navigation, and interactive elements. Its wide range of weights and optical sizing capabilities (implied by 'display' in name) ensures readability across roles. Tighter letter-spacing on larger sizes (-0.024em at 24px) maintains a compact, efficient feel. |