# Logipro Design System

> Deep navy typography and high-contrast electric blue accents anchored by a rigorous geometric grid.

**Source:** https://logipro.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Logipro utilizes a high-contrast "monochrome-plus" system where a deep navy ink `#0e0a34` provides the structural weight for typography and shadows, while a vibrant electric blue `#0f32ff` serves as the primary action signal. The interface is characterized by generous whitespace, 10px rounded controls, and a reliance on **Plus Jakarta Sans** across all hierarchies. Layouts are strictly organized into cards with subtle 1px borders `#e2e0ef` and soft, multi-layered shadows that suggest physical depth without using heavy gradients.

## Signature DNA
1. **The Navy-to-Electric Contrast** (The interplay between the near-black navy `#0e0a34` text and the high-voltage blue `#0f32ff` primary actions across all pages).
2. **Jakarta Geometricity** (The exclusive use of Plus Jakarta Sans at heavy weights—up to 800 for display—with aggressive negative letter-spacing for a technical, engineered feel).
3. **Soft-Inward Elevation** (The use of inset shadows `rgba(255, 255, 255, 0.85)` combined with outer glows to create "pressed" or "beveled" card surfaces).

## Family Map
Not captured in source (no sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-surface` | `#ffffff` | Page background, card fill, button text | 14 | 1 | computed_style |
| `--color-bg` | `#f3f2fa` | Secondary section backgrounds | 2 | 0.9 | declared_token |
| `--color-border` | `#e2e0ef` | Default 1px card and divider borders | 7 | 1 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-text` | `#0e0a34` | Primary headings, body text, deep shadows | 136 | 1 | computed_style |
| `--color-primary` | `#0f32ff` | Primary buttons, active borders, icons | 36 | 1 | computed_style |
| `--color-text-muted` | `#5c5977` | Secondary body, excerpts, timestamps | 21 | 1 | computed_style |
| `--color-accent` | `#0ce2f5` | Decorative accents (cyan) | 4 | 0.8 | declared_token |
| `--color-warm` | `#f0a95a` | Decorative_only (orange) | 2 | 0.7 | declared_token |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `--color-success` | `#166534` | Success states |
| `--color-warning` | `#a16207` | Warning states |
| `--color-danger` | `#b91c1c` | Error/Danger states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Plus Jakarta Sans | 400, 500, 600, 650, 700, 800 | All (Display, Heading, Body) | Plus Jakarta Sans (Google) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{display-mega}` | 76px | 76px | -3.8px | 800 | 404 Page Error Code | `p.page-404__code` |
| `{heading-xl}` | 28px | 33.6px | -0.84px | 700 | Main Page Titles | `h1#page-404-title` |
| `{heading-lg}` | 25px | 39.68px | -0.62px | 700 | Section Headers | `h2#about-us` |
| `{heading-md}` | 20px | 32px | -0.5px | 700 | Feature Titles | `h2#software-development` |
| `{subheading}` | 18px | 23.4px | -0.36px | 650 | Blog/News Titles | `h2.home-blog-latest__title` |
| `{body-md}` | 16px | 25.6px | normal | 400 | Default Body Text | `section.hero` |
| `{button-text}` | 15px | 18.75px | -0.15px | 600 | Primary CTA Labels | `a.btn.btn--primary` |
| `{caption}` | 11px | 17.6px | 1.54px | 700 | Uppercase Labels | `p.page-404__explore-title` |

### Principles
1. **Aggressive Display Tracking:** Large headings (76px) use -5% tracking (-3.8px) to create a compact, high-impact visual block.
2. **Weight as Hierarchy:** The system avoids color-based hierarchy in text, opting for 800 weight for display and 400 for body.
3. **Caption Spacing:** Small labels (11px) use wide letter-spacing (1.54px) to maintain legibility in all-caps or metadata contexts.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space-xs}` | 4px | 9 |
| `{space-sm}` | 8px | 11 |
| `{space-md}` | 16px | 43 |
| `{space-lg}` | 24px | 11 |
| `{space-xl}` | 32px | 20 |
| `{space-xxl}` | 48px | 7 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius-none}` | 0px | Section containers, layout blocks | 173 occurrences |
| `{radius-md}` | 10px | Buttons, cards, inputs | 15 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `shadow-sm` | `rgba(14, 10, 52, 0.06) 0px 1px 2px 0px` | Secondary buttons, small cards | Pricing page |
| `shadow-md` | `rgba(15, 50, 255, 0.28) 0px 2px 8px 0px` | Primary CTA buttons | Homepage hero |
| `shadow-card` | `rgba(15, 50, 255, 0.06) 0px 4px 24px 0px, rgba(255, 255, 255, 0.85) 0px 1px 0px 0px inset` | Feature cards | About page |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Contact, Sign up)
**Pages observed:** Homepage, About, Pricing
**Spec:** Background: `#0f32ff` / Text: `#ffffff` / Radius: `10px` / Padding: `12px 21.6px` / Shadow: `rgba(15, 50, 255, 0.28) 0px 2px 8px 0px`
**States observed:** Default: Captured | Hover: Not captured

#### Outline Button
**Role:** Secondary actions (Contact on 404, All news)
**Pages observed:** Homepage, 404
**Spec:** Background: `transparent` / Text: `#0f32ff` / Border: `2px solid #0f32ff` / Radius: `10px` / Padding: `12px 21.6px`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting services (Software development, Data science)
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` / Border: `1px solid #e2e0ef` / Radius: `10px` / Padding: `48px 32px` / Shadow: `shadow-card`
**States observed:** Default: Captured

#### Testimonial Block
**Role:** Social proof sections
**Pages observed:** Homepage
**Spec:** Background: `rgba(15, 50, 255, 0.06)` / Border-left: `4px solid #0f32ff` / Radius: `0px` / Padding: `24px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global site navigation
**Pages observed:** All
**Spec:** Background: `#ffffff` / Height: `auto` / Text: `#0e0a34` / Font-size: `15px` / Weight: `600`
**States observed:** Default: Captured

#### News Card
**Role:** Blog and news feed items
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` / Border: `1px solid #e2e0ef` / Radius: `10px` / Padding: `16px` / Shadow: `shadow-sm`
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Container Width | 1280px |
| Section Vertical Gap | 80px - 120px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Nav menu collapses to hamburger; 1-column card stacks; padding reduced to 16px. |
| Desktop | 1440px | 2 or 3-column card grids; horizontal nav visible. |

## Imagery & decoration
Logipro uses stylized line-art icons with electric blue accents. Photography is used sparingly in heroes, often featuring high-tech or collaborative environments with a cool-toned color grade. The system avoids organic shapes, preferring strict 90-degree angles or consistent 10px radii.

## Do's
- Use `#0e0a34` for all primary text to ensure 18.9:1 contrast.
- Apply `-0.84px` letter-spacing to headings at 28px.
- Use `10px` border-radius for all interactive elements (buttons, inputs).
- Use the electric blue `#0f32ff` exclusively for interactive or "active" states.
- Ensure cards use the dual-layer shadow with the white inset for depth.

## Don'ts
- **Wrong:** Using `#0ce2f5` (Cyan) for primary CTA buttons. 
  **Right:** Use `#0f32ff` (Electric Blue). 
  **Reason:** Cyan is a decorative accent token, not a primary action color.
- **Wrong:** Using bold weights (700+) for body copy.
  **Right:** Use weight 400 for body text.
- **Wrong:** Mixing sharp corners and rounded corners on buttons.
  **Right:** Maintain a consistent `10px` radius.

## Similar brands
- Stripe (for high-contrast typography and clean card systems)
- Vercel (for monochrome-plus-accent logic)
- Linear (for technical, geometric precision)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #0f32ff;
  --color-text: #0e0a34;
  --color-text-muted: #5c5977;
  --color-border: #e2e0ef;
  --color-surface: #ffffff;
  --radius-md: 10px;
  --shadow-card: 0 4px 24px 0 rgba(15, 50, 255, 0.06), inset 0 1px 0 0 rgba(255, 255, 255, 0.85);
}
```

## Agent prompt examples
- "Generate a feature card component using a 1px border of #e2e0ef, a 10px radius, and the dual-layer shadow with a white inset."
- "Create a primary button with a #0f32ff background, white Plus Jakarta Sans text at 15px weight 600, and 12px 21px padding."
- "Style a section header using Plus Jakarta Sans at 25px, weight 700, and -0.62px letter spacing in color #0e0a34."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the rendered CSS.
- Mobile-specific typography scale for display sizes was not fully sampled.
- Form validation states (Error/Success) were present in tokens but not observed in page components.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://logipro.com | 1440x900 | 2026-06-06 |
| Pricing | https://logipro.com/pricing | 1440x900 | 2026-06-06 |
| About | https://logipro.com/about | 1440x900 | 2026-06-06 |