# Logiwa Design System

> High-velocity logistics interface anchored by a vibrant emerald primary and deep indigo surfaces, utilizing generous whitespace and soft-radius containers.

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

## TL;DR
Logiwa employs a professional "Enterprise Tech" aesthetic that balances a high-contrast foundation of pure white (#ffffff) and deep charcoal (#404140) with a signature "Logiwa Green" (#2cb673) accent. The system is characterized by its use of Lato across all typographic levels, favoring heavy weights (700-800) for display and medium weights (500) for body and UI labels. Visual depth is achieved through large, soft-radius panels (up to 30px) and occasional indigo (#101820) section floods. Interactive elements are consistently pill-shaped or rounded, using the primary green or a secondary blue (#2d6ef9) to denote action.

## Signature DNA
1. **The Emerald Anchor** (#2cb673): Used as the primary action color for high-conversion CTAs and as a semantic marker for "growth" and "success" across the homepage and pricing tiers.
2. **Soft-Radius Enclosures**: Large content blocks and testimonial cards utilize radii between 20px and 30px, softening the technical nature of the WMS product (observed on homepage and pricing).
3. **Indigo Depth Floods**: The use of #101820 for footer and specific "Experience" bands provides a heavy visual anchor to the otherwise light, airy layout.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#ffffff` | Page background, card surface | 90 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#404140` | Primary headings and body text | 311 | 1.0 | `--gcid-heading-color` |
| `{color.ink.deep}` | `#000000` | High-emphasis text (About page) | 6 | 1.0 | `--wp--preset--color--black` |
| `{color.surface.dark}` | `#101820` | Footer and dark section backgrounds | 7 | 0.6 | Computed Style |
| `{color.border.light}` | `#d8d8d8` | Subtle dividers and card outlines | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#2cb673` | Primary CTA background, success markers | 4 | 1.0 | `--gcid-primary-color` |
| `{color.secondary}` | `#2d6ef9` | Secondary actions, border accents | 15 | 0.8 | Computed Style |
| `{color.accent.indigo}` | `#666794` | Decorative surfaces, secondary cards | 27 | 0.8 | Computed Style |
| `{color.accent.blue}` | `#4788c7` | Informational text and iconography | 31 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Lato | 300, 400, 500, 600, 700, 800 | All (Display, Heading, Body, UI) | Lato (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.xl}` | 85px | 72px | normal | 700 | Hero display | `p` |
| `{type.display.lg}` | 60px | 66px | normal | 700 | Gradient text | `span.gradient-text` |
| `{type.h1}` | 54px | 60px | normal | 500 | Section headers | `h1` |
| `{type.h2}` | 32px | 38px | normal | 800 | Feature titles | `h2` |
| `{type.h3}` | 24px | 27px | normal | 500 | Card titles | `h3.title` |
| `{type.body.lg}` | 18px | 24px | normal | 700 | Subheadings | `h3.is-h4-style` |
| `{type.body.md}` | 16px | 27.2px | normal | 500 | Default body | `article#post-5` |
| `{type.body.sm}` | 14px | 16px | normal | 600 | Metadata, Footer | `p:nth-of-type(1)` |

### Principles
1. **Heavyweight Headers**: Primary display text frequently uses 700 or 800 weights to establish authority.
2. **Medium-Weight Body**: Standard body text is set at 500 weight rather than 400, ensuring legibility against white backgrounds.
3. **Tight Display Leading**: Large display sizes (85px) use a line height (72px) smaller than the font size for a compact, modern look.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 39 |
| `{space.sm}` | 10px | 43 |
| `{space.md}` | 20px | 28 |
| `{space.lg}` | 40px | 21 |
| `{space.xl}` | 57px | 21 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Default sections, sharp buttons | 491 occurrences |
| `{radius.sm}` | 5px | Input fields, small cards | Card (Indigo) |
| `{radius.md}` | 10px | UI controls | Control role |
| `{radius.lg}` | 20px | Content cards | Green Card |
| `{radius.pill}` | 30px | Primary CTA buttons | Rounded Button |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{elev.flat}` | none | Standard cards and sections | 15+ occurrences |
| `{elev.nav}` | `rgba(0, 0, 0, 0.1) 0px 1px 0px 0px` | Sticky header separation | Navigation component |

## Components

### Tier 1: Foundational
#### Navigation
**Role:** Global site header and primary menu.
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#404140` / Shadow `rgba(0, 0, 0, 0.1) 0px 1px 0px 0px` / Font Size `16px`
**States observed:** Default | Hover: captured

#### Rounded Button
**Role:** Primary "Book My Demo" or "Request a Demo" actions.
**Pages observed:** Pricing, About
**Spec:** Background `#2cb673` (primary) or `#ffffff` (outline) / Text `#ffffff` / Radius `30px` / Padding `10px 20px`
**States observed:** Default | Active: captured

### Tier 2: Patterns
#### Card (Primary)
**Role:** Highlighting key features or pricing tiers.
**Pages observed:** All
**Spec:** Background `#2cb673` / Text `#ffffff` / Radius `20px` / Padding `10px 20px`
**States observed:** Default | Hover: not captured

#### Card (Secondary)
**Role:** Testimonials and ecosystem integrations.
**Pages observed:** All
**Spec:** Background `#666794` / Text `#ffffff` / Radius `5px` / Padding `0px`
**States observed:** Default

### Tier 3: Surface-specific
#### Surface (Dark Section)
**Role:** Footer and high-contrast CTA bands.
**Pages observed:** All
**Spec:** Background `#101820` / Text `#404140` (on white) or `#ffffff` (on dark) / Padding `57px 0px`
**States observed:** Default

#### Surface (Bordered)
**Role:** Pricing grid or feature list items.
**Pages observed:** Pricing
**Spec:** Background `transparent` / Border `1px #d8d8d8` / Radius `0px` / Padding `19px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px (approx) |
| Section Padding (Vertical) | 57px |
| Card Gap | 20px |

## Imagery & decoration
*   **Product UI Mockups**: High-fidelity screenshots of the WMS dashboard are used as hero focal points.
*   **Gradient Text**: Used for emphasis in headers (e.g., "AI-Powered") using a purple-to-blue transition.
*   **Partner Logos**: Grayscale or low-opacity logos used in the "Trusted By" band.

## Do's
*   Use `#2cb673` for the primary conversion button on every page.
*   Apply `{radius.pill}` (30px) to all high-level CTA buttons.
*   Set primary headings in Lato 700 or 800 for strong visual hierarchy.
*   Use `#101820` for the global footer background to anchor the page.
*   Maintain a minimum vertical section padding of 57px.

## Don'ts
*   Do not use `#2cb673` for body text; reserve it for interactive elements and accents.
*   Do not use sharp corners (0px) for content cards; use `{radius.lg}` (20px).
*   Avoid using light weights (300) for UI labels or navigation.
*   **Wrong:** Using `#2d6ef9` as the primary brand color. **Right:** Use `#2cb673`. **Reason:** Blue is a secondary functional color, not the brand primary.
*   Do not mix multiple serif fonts; Lato is the exclusive typeface.

## Quick start

### CSS Custom Properties
```css
:root {
  --logiwa-primary: #2cb673;
  --logiwa-secondary: #2d6ef9;
  --logiwa-heading: #404140;
  --logiwa-bg-dark: #101820;
  --logiwa-radius-card: 20px;
  --logiwa-radius-btn: 30px;
  --font-family: 'Lato', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #2cb673;
  --color-secondary: #2d6ef9;
  --color-indigo-depth: #101820;
  --font-lato: "Lato";
  --radius-pill: 30px;
  --radius-card: 20px;
}
```

## Known gaps
*   Hover and focus states for secondary navigation items were not explicitly captured in the token evidence.
*   Mobile-specific spacing tokens (e.g., reduced section padding) were not fully isolated from desktop values.
*   Semantic colors for "Error" or "Warning" states were not present in the analyzed marketing pages.

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