# Loginextsolutions Design System

> High-contrast logistics interface pairing deep charcoal ink with urgent signal red and functional blue accents.

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

## TL;DR
Loginextsolutions utilizes a high-contrast foundation of pure white (#ffffff) and deep charcoal (#101c22) to maintain a professional, data-heavy logistics atmosphere. The system uses a dual-primary color strategy: a signal red (#e1242a) for high-urgency actions and a corporate blue (#156bd3) for secondary functional paths. Typography is anchored by **Montserrat**, utilizing a wide range of weights from 400 to 800 to establish hierarchy across complex pricing and feature grids. Layouts are defined by generous 32px to 50px panel radii and subtle, large-spread shadows that create soft depth without cluttering the information-dense interface.

## Signature DNA
1. **Dual-Action Color Logic** (The system consistently pairs Red #e1242a and Blue #156bd3 for primary CTAs, often side-by-side in hero and section footers as seen on the homepage and about pages.)
2. **Montserrat Weight Stacking** (Hierarchy is driven by weight rather than just size, frequently jumping from 400 for body to 700/800 for buttons and headers to maintain legibility against dark backgrounds.)
3. **Soft-Cornered Containers** (Large 32px and 50px border radii on cards and buttons soften the otherwise rigid, grid-based logistics data presentation.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, card surfaces | 28 | 0.8 | computed_style |
| `{color.ink}` | `#101c22` | Primary text, footer backgrounds, borders | 159 | 0.8 | computed_style |
| `{color.ink.soft}` | `#212121` | Secondary body text | 16 | 0.8 | computed_style |
| `{color.muted}` | `#888888` | Deemphasized text, captions | 8 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary.red}` | `#e1242a` | Primary CTA background, "Fast" emphasis text | 40 | 0.8 | computed_style |
| `{color.primary.blue}` | `#156bd3` | Secondary CTA background, "Schedule" actions | 6 | 0.6 | computed_style |
| `{color.accent.orange}` | `#ff9600` | Decorative text moments (decorative_only) | 40 | 0.8 | computed_style |
| `{color.accent.link}` | `#0000ee` | Standard inline hyperlinks | 23 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `__Montserrat_0c51c4` | 400, 500, 600, 700, 800 | All UI text and headings | Montserrat | Google Fonts |
| `__loginextIcons_58fa1f` | 400 | UI Icons | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xxxl}` | 65px | 78px | 0.5px | 400 | Hero display text | `p.text.text--xxxl` |
| `{type.display.bold}` | 63px | 75.6px | 0.5px | 700 | Hero emphasis | `span.home-cover-section__cover-section-deliver-fast` |
| `{type.h1}` | 45px | 54px | 0.5px | 700 | Main page titles | `h1.text.text--xxxl` |
| `{type.h2}` | 35px | 42px | 0.5px | 400 | Section headers | `h2.text.text--xxl` |
| `{type.h2.medium}` | 35px | 42px | 0.5px | 500 | Pricing headers | `h2.text.text--xxxl` |
| `{type.h3}` | 20px | 31.2px | 0.5px | 400 | Sub-section titles | `h3.text.text--xl` |
| `{type.body.lg}` | 18px | 28.08px | 0.5px | 400 | Intro paragraphs | `span.text.text--l` |
| `{type.body}` | 16px | 24.96px | 0.5px | 400 | Default body copy | `p.text.text--m` |
| `{type.button}` | 14px | 18px | normal | 800 | CTA labels | `button.button--secondary` |
| `{type.caption}` | 12px | 18.72px | 0.5px | 400 | Small annotations | `span.text.text--xs` |

### Principles
1. **Letter Spacing Consistency:** A fixed 0.5px tracking is applied to almost all text sizes above 12px to improve legibility of the Montserrat geometric forms.
2. **Heavy Button Weight:** Buttons utilize the heaviest weight in the system (800) to ensure actionability at small 14px sizes.
3. **Icon-Text Alignment:** Icons from the custom icon font are sized exactly to match line-heights (16px or 60px) to prevent layout shifting.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|---|---|---|---|
| `{space.xs}` | 6px | 19 |
| `{space.sm}` | 12px | 4 |
| `{space.md}` | 20px | 12 |
| `{space.lg}` | 30px | 49 |
| `{space.xl}` | 45px | 6 |
| `{space.xxl}` | 62px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Footer sections, sharp containers | 239 occurrences |
| `{radius.sm}` | 4px | Form inputs, pricing cards | `pricing-card` |
| `{radius.md}` | 8px | Feature cards | `Card` component |
| `{radius.lg}` | 32px | Primary Buttons | `Rounded Button` |
| `{radius.full}` | 50px | Large pill containers | `Card` (variant) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.soft}` | `rgba(16, 28, 34, 0.08) 0px 0px 26px 0px` | Default card elevation | Surface component |
| `{shadow.deep}` | `rgba(16, 28, 34, 0.07) 0px 0px 40px 0px` | Featured card elevation | Card component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** Homepage, About
**Spec:** 
- **Background:** `{color.primary.red}` (#e1242a) OR `{color.primary.blue}` (#156bd3)
- **Text:** `{color.canvas}` (#ffffff)
- **Radius:** 32px
- **Padding:** 14px 62px
- **Typography:** Montserrat 14px / 800
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Surface
**Role:** Content grouping and sectioning
**Pages observed:** Homepage, About
**Spec:** 
- **Background:** Transparent (rgba(0,0,0,0)) or Light Gray (#efefef)
- **Text:** `{color.ink}` (#101c22)
- **Padding:** 20px 25px
- **Shadow:** `{shadow.soft}`
**States observed:** Default

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific product capabilities
**Pages observed:** Homepage, About
**Spec:** 
- **Background:** rgba(255, 255, 255, 0.7)
- **Border:** 1px solid rgba(0, 0, 0, 0.1)
- **Radius:** 8px
- **Padding:** 45px 15px
- **Shadow:** `{shadow.deep}`
**States observed:** Default

#### Pricing Card
**Role:** Tiered service selection
**Pages observed:** Pricing
**Spec:** 
- **Background:** `{color.canvas}` (#ffffff)
- **Radius:** 4px
- **Padding:** 30px
- **Typography:** Montserrat 14px / 500 (list items)
**States observed:** Default

### Tier 3: Surface-specific

#### Collapsible FAQ
**Role:** Information disclosure
**Pages observed:** Pricing
**Spec:** 
- **Typography:** Montserrat 14px / 400
- **Icon:** `{color.primary.red}` (#e1242a) chevron
- **Border:** 1px solid `{color.ink}` (#101c22)
**States observed:** Default | Active

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (inferred from screenshots) |
| Section Padding | 62px (vertical) |
| Grid Gap | 30px |

## Do's
- Use `#e1242a` for high-conversion actions like "Sign Up".
- Use `#156bd3` for informational actions like "Schedule a Demo".
- Apply `0.5px` letter spacing to all Montserrat headings.
- Use `32px` radius for all primary action buttons.
- Maintain `17.3:1` contrast by placing `#101c22` text on `#ffffff` backgrounds.

## Don'ts
- Do not use `#ff9600` for interactive components; it is decorative only.
- Do not use weights below 700 for button labels.
- Do not mix sharp (0px) and soft (32px) radii within the same component group.
- **Parent Rule:** Do not use sub-brand specific colors (if any were present) as the global header background.
- Do not use pure black (#000000) for body text; use `{color.ink}` (#101c22).

## Quick start

```css
/* CSS Variables */
:root {
  --color-ink: #101c22;
  --color-primary-red: #e1242a;
  --color-primary-blue: #156bd3;
  --color-canvas: #ffffff;
  --font-main: "__Montserrat_0c51c4", sans-serif;
  --radius-button: 32px;
  --shadow-card: 0px 0px 40px 0px rgba(16, 28, 34, 0.07);
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific breakpoint transitions for the 3-column pricing grid were not fully detailed.
- The specific mapping of the icon font (`__loginextIcons_58fa1f`) to glyph names was not captured.