Slab

# Slab — Style Reference
> Warm knowledge hub behind a berry curtain. The UI feels like an organized library where key information is highlighted by vibrant accents.
Theme: light

Slab's design system feels like a warm, engaging knowledge hub, balancing a serious intent with inviting visual cues. The predominant use of varied neutrals provides clarity and structure, offset by a rich, deep berry background in the hero, creating an immediate sense of depth and distinction. Strategic pops of vivid red and blue for CTAs act as clear beacons against the otherwise subdued palette. Custom fonts with precise letter-spacing contribute to a distinguished readability, ensuring information feels approachable yet authoritative.

## Colors
| Name | Value | Role |
|------|-------|------|
| Berry Ink | `#42022` | Hero background, creating a distinctive brand identity. |
| Slab Red | `#ff4143` | Primary call-to-action buttons, indicating immediate action. |
| Slab Blue | `#4285f4` | Secondary call-to-action buttons (e.g., Google sign-up), providing an alternative interactive color. |
| Muted Cyan | `#00d5a0` | Decorative accents in illustrations, adding a fresh, complementary touch. |
| Muted Violet | `#253858` | Decorative accents in illustrations. |
| Vivid Blue | `#0061ff` | Decorative accents in illustrations. |
| Sky Blue | `#50c5dc` | Decorative accents in illustrations. |
| Crisp White | `#ffffff` | Page backgrounds, card surfaces, primary text on dark backgrounds. |
| Near Black | `#000000` | Primary body text, input borders, drawing attention through high contrast. |
| Slate Gray | `#455360` | Secondary text, icons, borders, providing robust readability without harshness. |
| Ash Gray | `#939598` | Tertiary text, subtle borders, inactive elements, providing visual breathing room. |
| Border Gray | `#e0e0e0` | Subtle dividers and borders, adding structural definition. |
| Off White | `#f1f1f1` | Subtle background shifts for content blocks. |
| Berry Gradient Left | `#42022` | Gradient for hero section backgrounds, adding depth to the Berry Ink. |
| Berry Gradient Right | `#42022` | Gradient for hero section backgrounds, complementing the left gradient. |

## Typography
| Family | Role |
|--------|------|
| Whitney | Used for body text, interface elements, and secondary headings. Its consistent slightly tracked letter-spacing at all sizes provides a refined, open feel across the UI. |
| Sentinel | Signature display font for headlines. The combination of its serifs and significantly negative letter-spacing for larger sizes gives a distinctive, compact, and elegant appearance, setting them apart from standard web typography. |