Design System Specification: The Executive Ledger

1. Overview & Creative North Star

The Creative North Star: "The Architectural Analyst"

This design system rejects the cluttered, "noisy" aesthetic of typical automation tools. Instead, it adopts the persona of a high-end digital ledger. We move beyond the "SaaS template" by prioritizing Architectural Clarity—using structural depth and editorial typography to make complex LinkedIn data feel breathable and authoritative.

We break the standard grid through Intentional Asymmetry: sidebars are treated as deep-layered foundations, while data tables float as clean, high-contrast sheets. By removing traditional borders and relying on tonal shifts, we create a UI that feels like a singular, cohesive piece of glass rather than a collection of boxes.

2. Colors & Tonal Architecture

The palette is rooted in professional stability (`primary: #005b8c`) but elevated through a sophisticated layering of neutrals.

• The "No-Line" Rule: 1px solid borders are strictly prohibited for sectioning. To separate the "Lead List" from the "Filter Pane," use a shift from `surface` (#f7f9fb) to `surface_container_low` (#f2f4f6).
• Surface Hierarchy & Nesting: Treat the UI as physical layers of fine paper.

* Base: `surface` (#f7f9fb)

* Main Content Areas: `surface_container_lowest` (#ffffff) for maximum "pop" and focus.

* Floating Sidebars: `surface_container` (#eceef0).

• The Glass & Gradient Rule: For automation "Active" states or primary CTAs, use a subtle linear gradient from `primary` (#005b8c) to `primary_container` (#0074b1) at a 135° angle. For floating overlays (e.g., Lead Details), use `surface_container_lowest` with a 80% opacity and a 20px `backdrop-blur`.
• Signature Textures: Use `tertiary` (#006443) for success metrics (e.g., "Connection Accepted") to provide a calm, "trustworthy growth" signal.

3. Typography: Editorial Precision

We utilize two distinct typefaces to balance character with readability.

• The Authority (Manrope): Used for `display` and `headline` roles. Its geometric yet warm curves suggest a modern, high-end agency feel.

* *Lead Gen Hero:* `display-md` (2.75rem) with -0.02em letter spacing.

• The Engine (Inter): Used for all data-heavy views (`title`, `body`, `label`). Inter’s high x-height ensures that 1,000+ lead rows remain legible.

* *Table Headers:* `label-md` (#424656) in all-caps with 0.05em tracking.

* *Lead Names:* `title-sm` (#191c1e) for immediate recognition.

4. Elevation & Depth

Depth is the primary navigator in this system, not lines.

• Tonal Layering: To highlight a "Top Performing Campaign," do not use a border. Place a `surface_container_highest` (#e0e3e5) card inside a `surface_container_low` (#f2f4f6) section.
• Ambient Shadows: For floating elements like "Search Filters," use a signature shadow: `0 12px 32px -4px rgba(25, 28, 30, 0.06)`. The tint is derived from `on_surface` to keep it natural.
• The Ghost Border: If a lead status requires a boundary (e.g., a "Pending" chip), use `outline_variant` (#c2c6d9) at 20% opacity.

5. Components

Data Tables (The Core)

• Structure: No vertical or horizontal dividers.
• Row Separation: Use `spacing-4` (0.9rem) of vertical padding. On hover, change the background to `surface_container_low` (#f2f4f6) with a `DEFAULT` (0.25rem) radius.
• Pagination: Use `surface_container_lowest` floating chips with `shadow-sm`.

Automation Controls (The Dash)

• Toggle Switches: When active, use `primary`. When inactive, use `surface_dim` (#d8dadc).
• Primary CTA: Gradient of `primary` to `primary_container`. Padding: `spacing-4` (horizontal) and `spacing-2.5` (vertical). Border-radius: `md` (0.375rem).

Search Filters & Chips

• Filter Chips: Use `surface_container_high` (#e6e8ea) with `on_surface_variant` (#424656) text. On selection, transition to `primary_fixed` (#cde5ff) with `on_primary_fixed` (#001d32) text.
• Input Fields: Ghost-style inputs. Use `surface_container_low` as the fill. Only show an `outline` (#737687) on focus.

Performance Charts

• Visual Soul: Use `primary` for main growth lines. Area charts should use a gradient from `primary` at 30% opacity to `surface` at 0% opacity.
• Tooltips: `inverse_surface` (#2d3133) background with `body-sm` typography in `inverse_on_surface` (#eff1f3).

6. Do’s and Don’ts

Do:

• DO use whitespace as a separator. If two sections feel too close, increase the `spacing` scale (e.g., move from `8` to `12`) rather than adding a line.
• DO use `tertiary` (#006443) for positive data trends to reinforce the "Success" aspect of lead generation.
• DO stack cards using the `surface_container` tiers to indicate parent-child relationships in automation flows.

Don’t:

• DON'T use pure black (#000000) for text. Always use `on_surface` (#191c1e) to maintain a premium, softer contrast.
• DON'T use high-intensity "Alert" reds for minor errors. Reserve `error` (#ba1a1a) for critical automation failures only.
• DON'T use 100% opaque borders. They break the "Glass & Paper" illusion of the system.