# Ionlinesp Design System

> Industrial connectivity anchored by high-contrast slate and safety orange, utilizing geometric sans-serif typography to signal technical reliability.

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

## TL;DR
Ionlinesp utilizes a high-utility "monochrome-plus-one" system where a dominant achromatic foundation of White (#ffffff) and Deep Grey (#4d4d4f) is punctuated by a high-visibility Orange (#f69322). The interface relies on Montserrat for all typographic hierarchy, moving from heavy 700-weight headlines to legible 400-weight body text. Layouts are structured around generous 100px vertical section breathing room, with interactive elements defined by 6px rounded corners and a consistent 0px 3px 11px soft shadow. The visual language is technical and direct, using orange as a functional signal for primary actions and key semantic highlights.

## Signature DNA
1. **The Safety Accent** (The consistent use of `#f69322` orange for every primary interaction point and heading emphasis against a neutral canvas.)
2. **Technical Breathing Room** (A strict 100px vertical section rhythm that separates complex technical content into digestible blocks.)
3. **Softened Geometry** (The pairing of sharp 0px layout containers with specific 6px radii on interactive components like buttons and cards.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--_color---grey` | `#4d4d4f` | Primary text, dark section backgrounds, footer text | 80 | 1 | Computed Style |
| `--white` | `#ffffff` | Page background, button text, card surfaces | 94 | 1 | Brand Page |
| `--_color---grey-light` | `#f4f4f4` | Subtle section alternating backgrounds | 6 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--_color---orange` | `#f69322` | Primary buttons, active borders, heading emphasis | 57 | 1 | CSS Variable |
| `--_color---orange-light` | `#f5a045` | Secondary text emphasis (decorative_only) | 4 | 1 | CSS Variable |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Montserrat | 400, 700 | All headings, UI labels, and body copy | Montserrat (Google Fonts) | SIL Open Font |
| sans-serif | 400 | System fallback | N/A | N/A |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h2}` | 36px | 43.2px | normal | 700 | Main section headlines | `h2.h2` |
| `{type.h3}` | 24px | 28.8px | normal | 400 | Sub-section headlines | `h3.h3` |
| `{type.h3-bold}` | 24px | 24px | normal | 700 | Grid titles | `h3.txt-grid-3-title` |
| `{type.h3-bg}` | 20px | 24px | normal | 700 | Headlines on colored backgrounds | `h3.h3-bg-grid` |
| `{type.body-lg}` | 18px | 36px | normal | 400 | Primary descriptive text | `div.txt-primary` |
| `{type.body-md}` | 16px | 19.2px | normal | 400 | Navigation and general body | `section.nav` |
| `{type.nav-link}` | 14px | 19.2px | normal | 400 | Footer and utility links | `a.nav-link` |
| `{type.button}` | 14px | 19.2px | normal | 700 | CTA labels | `a.btn-primary` |

### Principles
1. **Orange Emphasis:** Headlines often use a single orange word to anchor the visual focus.
2. **Generous Leading:** Body text at 18px uses a 36px line height (2.0) for maximum legibility.
3. **Weight Contrast:** Headlines strictly toggle between 400 and 700 to define hierarchy without size changes.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 9 |
| `{space.sm}` | 16px | 16 |
| `{space.md}` | 32px | 15 |
| `{space.lg}` | 48px | 19 |
| `{space.section}` | 100px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, full-width bands | 158 occurrences |
| `{radius.sm}` | 6px | Buttons, feature cards, inputs | 15 occurrences |
| `{radius.pill}` | 1000px | Specialized badges | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.standard}` | `rgba(0, 0, 0, 0.25) 0px 3px 11px 0px` | Feature cards and primary buttons | 18 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and secondary call-to-action
**Pages observed:** https://ionlinesp.com
**Spec:** Background `#f69322` / Text `#ffffff` / Border `#f69322` 2px / Radius 6px / Padding 12px 32px / Typography `{type.button}` / Shadow `{shadow.standard}`
**States observed:** Default | Hover: captured (opacity change)

#### Pill Badge
**Role:** Decorative labels or status indicators
**Pages observed:** https://ionlinesp.com
**Spec:** Background `transparent` / Text `#4d4d4f` / Border `#ffffff` 1px / Radius 1000px / Padding 0px / Typography `{type.body-md}`

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific service benefits
**Pages observed:** https://ionlinesp.com
**Spec:** Background `#f69322` / Text `#ffffff` / Border `#f69322` 2px / Radius 6px / Padding 16px 32px / Shadow `{shadow.standard}`

### Tier 3: Surface-specific

#### Light Section
**Role:** Standard content block
**Pages observed:** https://ionlinesp.com
**Spec:** Background `#ffffff` / Text `#4d4d4f` / Padding 100px 48px / Radius 0px

#### Dark Section
**Role:** High-contrast emphasis or footer area
**Pages observed:** https://ionlinesp.com
**Spec:** Background `#4d4d4f` / Text `#ffffff` / Padding 100px 48px / Radius 0px

#### Alternating Section
**Role:** Visual break between white sections
**Pages observed:** https://ionlinesp.com
**Spec:** Background `#f4f4f4` / Text `#4d4d4f` / Padding 100px 48px / Radius 0px

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1200px |
| Section Vertical Gap | 100px |
| Column Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked grid items, reduced horizontal padding (16px) |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), 48px horizontal padding |

## Imagery & decoration
Ionlinesp uses technical line-art illustrations and isometric hardware renderings (SIM cards, satellites) to visualize abstract IoT concepts. It avoids stock photography of people, favoring clean, iconographic representations of connectivity.

## Do's
- Use `#f69322` for the first or most important word in an `h2` headline.
- Maintain exactly 100px of vertical padding between major content sections.
- Apply the 6px border radius to all interactive surfaces.
- Use Montserrat 700 for all CTA labels to ensure legibility against orange backgrounds.
- Ensure all body text uses at least 1.5x line height (ideally 2.0x for 18px text).

## Don'ts
- **Wrong:** Using a saturated blue (like `--swiper-theme-color`) for primary UI actions. **Right:** Use the brand orange `#f69322`. **Reason:** Blue is a utility token for third-party libraries, not a brand signal.
- Do not use shadows on flat section backgrounds; reserve `{shadow.standard}` for floating cards and buttons.
- Do not mix Montserrat with other serif or decorative fonts.
- Do not use orange for large blocks of body text; it is reserved for headings and UI signals.
- Avoid sharp corners (0px) on buttons; they must always be 6px.

## Similar brands
- Orange Business Services
- Samsara
- Verkada
- Teltonika

## Quick start

```css
/* CSS Variables */
:root {
  --color-orange: #f69322;
  --color-grey: #4d4d4f;
  --color-grey-light: #f4f4f4;
  --color-white: #ffffff;
  --shadow-standard: 0px 3px 11px 0px rgba(0, 0, 0, 0.25);
  --radius-sm: 6px;
  --section-padding: 100px;
}
```

```json
{
  "style-dictionary": {
    "color": {
      "brand": { "value": "#f69322" },
      "neutral": {
        "dark": { "value": "#4d4d4f" },
        "light": { "value": "#f4f4f4" }
      }
    }
  }
}
```

## Agent prompt examples
- "Create a feature grid using 6px rounded cards with a #f69322 background and white Montserrat 700 headings."
- "Design a primary button with a 2px orange border, 6px radius, and the standard 0px 3px 11px shadow."
- "Build a section layout with 100px top/bottom padding and a background of #f4f4f4."

## Known gaps
- Hover and Active states for navigation links were not explicitly captured in the token data.
- Form validation states (Success/Error) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://ionlinesp.com | Desktop 1440px | 2026-06-06 |
| Homepage Mobile | https://ionlinesp.com | Mobile 390px | 2026-06-06 |