# Design Tokens Report: Solvior Landing Page

## 1. Color Palette
The brand uses a high-contrast professional palette with a primary blue accent and a deep navy secondary base.

*   **Primary (Brand Blue):** `#0075FF` (Used for highlights, icons, and primary CTA accents)
*   **Secondary (Navy/Dark):** `#051229` (Used for dark sections, footer, and secondary text)
*   **Background (Light Gray):** `#F7F7F7` (The primary canvas color for the landing page)
*   **Text (Charcoal):** `#364052` (Primary body text color)
*   **Hover/Accent:** Transparent backgrounds with white text or blue-to-navy transitions.

## 2. Typography
The system uses a two-font approach to balance professional structure with modern readability.

*   **Heading Font Family:** `Libre Franklin`, sans-serif
*   **Body Font Family:** `Lato`, sans-serif
*   **Scale & Hierarchy (Computed):**
    *   **H1:** 72px / 79.2px (Line Height: 1.1) / Weight: 600
    *   **H2:** 48px / 57.6px (Line Height: 1.2) / Weight: 600
    *   **H3:** 32px / 38.4px / Weight: 600
    *   **H4:** 24px / 28.8px / Weight: 600
    *   **H5:** 20px / 24px / Weight: 600
    *   **H6:** 16px / 19.2px / Weight: 600
    *   **Body Text:** 16px / 25.6px (Line Height: 1.6) / Weight: 400
*   **Fluidity:** Units are primarily in `px` at the computed level, with standard media queries handling scaling rather than `clamp()` functions.

## 3. UI Components (CTA Buttons)
Primary buttons follow a distinct pill-shaped design with internal icon separation.

*   **Shape:** Pill (Border-radius: `50px`)
*   **Background:** White/Light Gray (`#F7F7F7`) for the main body.
*   **Text Color:** Navy (`#051229`)
*   **Icon Accent:** A circular container within the button using the Primary Blue (`#0075FF`).
*   **Padding:** Computed at `4.5px` (outer) with inner span padding providing the visual bulk.
*   **Hover Effect:** Transitions use `0.3s ease-in-out`.

## 4. Animations and Transitions
The site uses smooth, standard easing for all interactive elements.

*   **Standard Transition:** `all 0.3s ease-in-out`
*   **Motion Physics:** `transform 0.4s ease-in-out` used for card entries and hover scaling.

## 5. Box Shadows
The design employs subtle depth with light shadows and brand-colored glows.

*   **Soft Card Shadow:** `rgba(0, 0, 0, 0.06) 0px 0px 15px 0px` (Used on feature and service cards).
*   **Brand Glow:** `rgba(0, 117, 255, 0.08) 0px 0px 0px 6.94px` (Used as a focus or accent glow around primary interactive elements).
