# Enqura Design System

> Corporate blue precision meets high-contrast financial technology, anchored by heavy Avenir display typography and a clinical white canvas.

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

## TL;DR
Enqura utilizes a high-trust "FinTech Blue" palette, primarily leveraging `#137ecf` for interactive elements and `#28283b` for deep structural accents. The system is typographically heavy, relying on **Avenir** at extreme weights (800) for display headlines to project stability and authority. Layouts are strictly modular, using a 10px border radius for UI controls and cards, contrasted against a pure white `#ffffff` foundation. Decorative elements are minimal, restricted to subtle light-blue gradients and high-fidelity product UI mockups.

## Signature DNA
1. **The Heavy Display** (Avenir at weight 800, 44px, with 66px line height creates an imposing, stable header style found on the Homepage and About pages).
2. **FinTech Blue Primary** (The use of `#137ecf` as the singular high-confidence primary color for both CTA backgrounds and key surface accents).
3. **Softened Geometry** (A consistent 10px radius applied to all functional controls, from buttons to card containers, softening the otherwise rigid corporate grid).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, primary surface, button text | 26 | 1.0 | Computed Style |
| `{colors.dark}` | `#212529` | Primary body text, secondary labels | 46 | 1.0 | `--bs-body-color` |
| `{colors.black}` | `#000000` | Emphasis text, shadow foundations | 5 | 1.0 | `--bs-emphasis-color` |
| `{colors.gray-deep}` | `#333333` | Secondary text (About page) | 20 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#137ecf` | Primary CTA background, active surfaces | 12 | 0.8 | Computed Style |
| `{colors.navy}` | `#28283b` | Accent text, deep structural elements | 18 | 0.8 | Computed Style |
| `{colors.midnight}` | `#20344c` | Hero text, secondary accents | 17 | 0.8 | Computed Style |
| `{colors.blue-muted}` | `#69727d` | Muted text, secondary labels | 3 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.success}` | `#198754` | Valid form states |
| `{colors.error}` | `#dc3545` | Invalid form states |
| `{colors.warning}` | `#ffc107` | Warning backgrounds |
| `{colors.info}` | `#0dcaf0` | Informational highlights |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| **Avenir** | 300, 400, 500, 600, 700, 800, 900 | Display, Headings, UI | Montserrat | Commercial |
| **Poppins** | 400, 700 | Body alternative | Poppins (Google) | OFL |
| **system-ui** | 400 | Default body fallback | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-xl}` | 44px | 66px | normal | 800 | Main Hero Headlines | `p:nth-of-type(1)` |
| `{type.display-lg}` | 44px | 66px | normal | 600 | Gradient Titles | `span#gradientTitle` |
| `{type.heading-md}` | 24px | 36px | normal | 500 | Section Subheaders | `p` |
| `{type.heading-sm}` | 24px | 24px | normal | 500 | Navigation Links | `a` |
| `{type.subheading}` | 18px | 18px | normal | 600 | Section Titles | `h2.elementor-heading-title` |
| `{type.body-lg}` | 18px | 14.4px | normal | 600 | Bold Body/Links | `a.wpr-no-pointer` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default Body Text | `div.elementor-element` |
| `{type.button}` | 16px | 22px | 0.1px | 600 | Primary CTA Labels | `a.elementor-button` |
| `{type.body-sm}` | 14px | 14px | normal | 300 | Footer / Legal | `p` |

### Principles
1. **Extreme Display Weight:** Primary headlines must use Avenir at weight 800 to maintain brand authority.
2. **Loose Display Leading:** Large headlines utilize a generous 1.5x line-height (66px for 44px text) to prevent crowding.
3. **Tight UI Labels:** Navigation and button labels use a 1:1 or near 1:1 line-height to maintain vertical centering within containers.

## Spacing
**Base unit:** 4px (approximated)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 7 |
| `{space.sm}` | 12px | 36 |
| `{space.md}` | 16px | 4 |
| `{space.lg}` | 24px | 4 |
| `{space.xl}` | 34px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, sharp UI | 114 occurrences |
| `{radius.md}` | 10px | Buttons, Cards, Inputs | 34 occurrences |
| `{radius.full}` | 50px | Large pill containers | 5 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Standard cards and sections | 21 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Request a Demo", "View More")
**Pages observed:** Homepage, About
**Spec:** 
- Background: `{colors.primary}` (#137ecf)
- Text: `{colors.white}` (#ffffff)
- Radius: `{radius.md}` (10px)
- Padding: 12px 24px
- Typography: `{type.button}` (16px, 600)
**States observed:** Default | Hover: captured (darker blue) | Focus: captured | Active: captured | Disabled: not captured

#### Navigation Link
**Role:** Top-level site navigation
**Pages observed:** Homepage, About
**Spec:**
- Background: transparent
- Text: `{colors.dark}` (#212529)
- Typography: `{type.heading-sm}` (24px, 500)
- Padding: 0px
**States observed:** Default | Hover: captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product or service highlights
**Pages observed:** Homepage, About
**Spec:**
- Background: `{colors.primary}` (#137ecf)
- Text: `{colors.white}` (#ffffff)
- Radius: `{radius.md}` (10px)
- Padding: 12px 24px
- Border: 1px solid `{colors.white}` (#ffffff)
**States observed:** Default | Hover: not captured

### Tier 3: Surface-specific

#### Privacy Banner
**Role:** Compliance and cookie management
**Pages observed:** Homepage, About
**Spec:**
- Background: `{colors.white}` (#ffffff)
- Text: `{colors.dark}` (#212529)
- Radius: `{radius.md}` (10px)
- Border: 1px solid `{colors.gray-deep}` (#333333)
- Shadow: none
**States observed:** Default | Hover: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px (standard container) |
| Section Padding | 80px - 100px (vertical) |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero text reduces to ~32px; Stacked columns. |
| Desktop | 1440px | Full horizontal navigation; Multi-column grids (3-up or 4-up). |

## Imagery & decoration
Enqura uses high-fidelity 3D device mockups (phones, tablets) floating in a digital "node and line" network space. Backgrounds often feature soft blue radial gradients to create depth without using shadows. UI avoids heavy textures, preferring clean, semi-transparent overlays.

## Do's
- Use **Avenir 800** for all primary page headlines.
- Apply a **10px border radius** to all interactive elements and cards.
- Maintain a **pure white (#ffffff)** background for content-heavy sections.
- Use **#137ecf** as the primary action color for buttons.
- Ensure 1.5x line-height on display typography.

## Don'ts
- **Don't** use sub-brand colors (like vivid orange #ff6900) for parent-level primary buttons.
- **Don't** use drop shadows on cards; use 1px borders or subtle background shifts instead.
- **Don't** use serif fonts; the brand is strictly sans-serif (Avenir/Poppins).
- **Don't** use sharp corners for functional UI components (always 10px).
- **Don't** mix primary blue #137ecf with secondary blue #0d6efd in the same component.

## Similar brands
- Revolut (clean FinTech aesthetic)
- Stripe (modular grid and typography focus)
- Mastercard (corporate blue/white stability)

## Quick start

### CSS Custom Properties
```css
:root {
  --enqura-primary: #137ecf;
  --enqura-navy: #28283b;
  --enqura-dark: #212529;
  --enqura-white: #ffffff;
  --enqura-radius-md: 10px;
  --enqura-font-display: 'Avenir', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #137ecf;
  --color-navy: #28283b;
  --font-display: "Avenir";
  --radius-md: 10px;
}
```

## Agent prompt examples
- "Generate a hero section for Enqura using Avenir 800 for the headline at 44px and a primary button with hex #137ecf and 10px border radius."
- "Create a feature grid of 3 cards with #ffffff backgrounds, #212529 text, and 10px rounded corners."
- "Design a navigation bar with #212529 text links using Avenir 500 at 24px."

## Known gaps
- Hover states for secondary buttons were not fully captured in the source.
- Specific mobile typography scale for sub-headings was not explicitly defined in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://enqura.com | 1440px | 2026-06-06 |
| About Us | https://enqura.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://enqura.com | 390px | 2026-06-06 |