Visual Identity
The LyftData docs share a single set of brand tokens so components stay consistent between light and dark surfaces. Use the mappings below when adding new UI elements or theming Astro components.
Product naming
- Product name in prose: LyftData.
- CLI/binary and code identifiers: use
lyftdata,LYFTDATA_*, file paths, and command examples exactly as they appear in the product. - Legal text: keep the spelling/capitalization as-is (for example in
src/content/docs/reference/legal/*).
Brand Colors
| Token | Value | CSS variable |
|---|---|---|
| Primary gradient start | #0096FF | --brand-a |
| Primary gradient end | #00E6B0 | --brand-b |
| Body text | #0A0F1C | --brand-text |
| Card ring | rgba(0, 150, 255, 0.16) | --brand-card-ring |
Gradients
--gradient-primary:linear-gradient(135deg, var(--brand-a), color-mix(in srgb, var(--brand-a) 45%, var(--brand-b) 55%), var(--brand-b))--gradient-soft:linear-gradient(135deg, color-mix(in srgb, var(--brand-a) 60%, transparent), color-mix(in srgb, var(--brand-b) 45%, transparent))--gradient-subtle:linear-gradient(135deg, color-mix(in srgb, var(--brand-a) 45%, transparent), color-mix(in srgb, var(--brand-b) 35%, transparent))
Radii
- Default corners:
var(--radius)(10px equivalent) - Large cards and hero shells:
var(--radius-xl)(28px equivalent) - Pill controls and buttons:
var(--radius-pill)
Shadows
- Hover elevation:
var(--shadow-hover)(0 18px 40px -20px rgba(0,150,255,0.5)) - Surface elevation:
var(--shadow-md)(0 16px 35px -24px rgba(0,96,160,0.28)) - Callout lift:
0 18px 36px -24px rgba(0, 36, 72, 0.18)
When extending the system, prefer reusing these variables through CSS custom properties or the exported BRAND tokens in src/components/constants.ts so new elements inherit theme updates automatically.