Timescale

# Timescale — Style Reference
> Industrial Blueprint on stark white.
Theme: light

Timescale's design system evokes an industrial blueprint aesthetic with a high-contrast monochrome base accented by a warm, vibrant orange and a functional lime yellow. Strong geometric lines define UI elements, often creating outlined, sketched forms. Surfaces are predominantly stark white, providing a canvas for bold typography and diagrammatic illustrations. Typographic hierarchy is established through a combination of font family, weight, and specific letter-spacing, rather than relying solely on size, creating a dense yet legible information display ideal for technical content.

## Colors
| Name | Value | Role |
|------|-------|------|
| Canvas White | `#fafafa` | Page backgrounds, card surfaces, ghost button backgrounds |
| Midnight Ink | `#000000` | Primary text, button backgrounds, strong borders, icons, footer background |
| Shadow Gray | `#6c6c6c` | Muted body text, secondary borders, subtle shadows |
| Silverline | `#b3b3b3` | Decorative borders, tertiary text |
| Action Orange | `#ff5b29` | Orange outline accent for tags, dividers, and focused UI edges |
| Highlight Yellow | `#f5ff80` | Green action color for filled buttons, selected navigation states, and focused conversion moments. |

## Typography
| Family | Role |
|--------|------|
| Geist | Primary marketing and UI text, headings. The varied letter-spacing at larger sizes contributes to its modern, structured feel. |
| Geist Mono | Code snippets, technical details, and certain emphasized UI labels. The monospace gives a technical, precise tone. |
| ui-sans-serif | Default body text and less prominent UI elements where a system font is efficient and legible. |