# Qmarkets Design System

> Deep navy foundations anchored by geometric Poppins typography and vibrant gradient accents.

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

## TL;DR
Qmarkets utilizes a high-contrast "Deep Navy" (#162045) as its primary canvas and text anchor, creating a professional enterprise atmosphere. The system is characterized by its reliance on **Poppins** for nearly all typographic hierarchy, often utilizing heavy weights (700-800) for display headers. Visual interest is introduced through a specific "Vivid Blue" (#100686) for primary actions and a secondary palette of warm amber (#ffab2f) and soft pink (#fe4f79) used in gradients and iconography. Components favor a soft-geometric aesthetic with consistent 15px to 16px border radii on cards and buttons.

## Signature DNA
1. **The Navy Anchor** (#162045 is used as both a background surface and primary text color, establishing a formal, secure enterprise tone across all pages.)
2. **Soft-Geometric Radius** (A consistent 15px-16px corner radius is applied to cards, buttons, and input fields, softening the corporate aesthetic.)
3. **Typographic Weight Stacking** (Headers frequently stack Poppins 700 or 800 weights against 400 weight sub-headers at the same 50px or 42px scale to create internal contrast.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 148 | 1.0 | Computed Style |
| `{color.navy.primary}` | `#162045` | Primary text, dark section backgrounds | 160 | 0.8 | Computed Style |
| `{color.navy.muted}` | `#313852` | Secondary text, subtle borders | 27 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.blue.action}` | `#100686` | Primary button backgrounds, active borders | 19 | 0.8 | Computed Style |
| `{color.blue.link}` | `#337ab7` | Inline links, secondary button text | 31 | 0.8 | Computed Style |
| `{color.amber}` | `#ffab2f` | Decorative accents, icon highlights | 7 | 0.6 | decorative_only |
| `{color.pink}` | `#fe4f79` | Gradient stops, UI highlights | 4 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 400, 500, 600, 700, 800 | Primary Display, Body, UI | Poppins (Google Fonts) | OFL |
| Raleway | 400, 700 | Secondary Display | Raleway (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 50px | 60px | normal | 700 | Hero Headlines | `span.text-gradient` |
| `{type.display.lg}` | 48px | 52.8px | -1.2px | 800 | Section Headers | `h2.iris-smart-h2` |
| `{type.display.md}` | 42px | 50.4px | normal | 700 | Sub-section Headers | `strong:nth-of-type(1)` |
| `{type.heading.sm}` | 24px | 33.6px | normal | 700 | Feature Titles | `strong:nth-of-type(1)` |
| `{type.heading.xs}` | 20px | 28px | normal | 700 | Card Titles | `h3` |
| `{type.body.lg}` | 18px | 25.2px | 0.16px | 700 | Emphasis Body | `div.user_name` |
| `{type.body.md}` | 16px | 22.4px | normal | 400 | Standard Body | `div#hero` |
| `{type.body.sm}` | 14px | 19.6px | normal | 700 | Small CTA/Labels | `span.iris-smart-cta` |

### Principles
1. **Header Contrast:** Use Poppins 800 with negative letter-spacing (-1.2px) for high-impact section headers.
2. **Body Legibility:** Standard body text (16px) maintains a 1.4x line-height ratio for readability on white backgrounds.
3. **Gradient Text:** Primary display headers often utilize a linear gradient from #162045 to accent colors.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 11 |
| `{space.sm}` | 12px | 12 |
| `{space.md}` | 16px | 8 |
| `{space.lg}` | 24px | 5 |
| `{space.xl}` | 48px | 11 |
| `{space.section}` | 90px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Full-width sections | 240 occurrences |
| `{radius.sm}` | 8px | Form inputs | Text Input component |
| `{radius.md}` | 15px | Primary buttons, cards | Card (Type A) |
| `{radius.lg}` | 16px | Feature cards | Card (Type B) |
| `{radius.pill}` | 50px | Toggle containers | Pricing toggles |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(167, 167, 167, 0.23) 0px 2px 10px 0px` | Standard feature cards | Card component |
| `{shadow.deep}` | `rgba(26, 58, 177, 0.08) 0px 0px 60px 0px` | Pricing tier cards | Pricing page cards |
| `{shadow.glow}` | `rgba(171, 90, 255, 0.35) 0px 4px 14px 0px` | Accent elements | 3 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions (Get a Demo, Pricing)
**Pages observed:** https://qmarkets.net, https://qmarkets.net/pricing
**Spec:** Background: `#100686` | Text: `#ffffff` | Border: 2px solid `#100686` | Radius: `15px` | Padding: `16px 29px` | Typography: Poppins 600 (16px)
**States observed:** Default | Hover | Active: captured

#### Text Input
**Role:** Lead generation forms
**Pages observed:** https://qmarkets.net, https://qmarkets.net/pricing
**Spec:** Background: `#ffffff` | Text: `#162045` | Border: 1px solid `rgba(49, 56, 82, 0.2)` | Radius: `8px` | Padding: `12px 19px`
**States observed:** Default: captured | Focus: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform capabilities
**Pages observed:** https://qmarkets.net, https://qmarkets.net/pricing
**Spec:** Background: `#ffffff` | Text: `#162045` | Radius: `16px` | Padding: `20px` | Shadow: `rgba(167, 167, 167, 0.23) 0px 2px 10px 0px`
**States observed:** Default: captured

#### Pricing Card
**Role:** High-elevation product tiers
**Pages observed:** https://qmarkets.net/pricing
**Spec:** Background: `#ffffff` | Text: `#162045` | Radius: `30px` | Padding: `20px 20px 30px` | Shadow: `rgba(26, 58, 177, 0.08) 0px 0px 60px 0px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Dark Surface Section
**Role:** High-contrast content bands
**Pages observed:** https://qmarkets.net, https://qmarkets.net/pricing
**Spec:** Background: `#162045` | Text: `#ffffff` | Radius: `0px` | Padding: `90px 0px`
**States observed:** Default: captured

#### Ghost Button (Inherited Variant)
**Role:** Secondary actions (Explore Success Stories)
**Pages observed:** https://qmarkets.net
**Spec:** Background: `transparent` | Text: `#100686` | Border: 2px solid `#100686` | Radius: `15px` | Padding: `16px 29px`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gutter | 90px |
| Column Gap | 30px |

## Do's
- Use Poppins 700 for all primary headings to maintain brand authority.
- Apply `#162045` for large background sections to create enterprise depth.
- Ensure all cards use a minimum of `15px` border radius.
- Use `#100686` for the primary "Get a Demo" CTA.
- Maintain a 90px vertical rhythm between major content sections.

## Don'ts
- **Wrong:** Using `#000000` for primary text. **Right:** Use `#162045`. **Reason:** Pure black breaks the brand's navy-centric professional palette.
- **Wrong:** Using sharp corners on buttons. **Right:** Use `15px` radius. **Reason:** Sharp corners conflict with the "soft-geometric" DNA.
- **Wrong:** Using sub-brand accent colors (like `#ffab2f`) for primary action buttons. **Right:** Use `#100686`. **Reason:** Accents are for iconography and highlights only.

## Similar brands
- SAP (Enterprise blue focus)
- Salesforce (Soft geometric cards)
- IBM (Deep navy foundations)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --qmarkets-navy: #162045;
  --qmarkets-blue-action: #100686;
  --qmarkets-white: #ffffff;
  --qmarkets-radius-card: 15px;
  --qmarkets-shadow-soft: 0px 2px 10px 0px rgba(167, 167, 167, 0.23);
  --qmarkets-font-main: 'Poppins', sans-serif;
}
```

## Known gaps
- Hover state transitions for primary buttons were not explicitly captured in the token evidence.
- Mobile-specific navigation menu behavior (hamburger transition) was not captured.
- Success/Error semantic colors for form validation were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://qmarkets.net | Desktop 1440 | 2026-06-06 |
| Pricing | https://qmarkets.net/pricing | Desktop 1440 | 2026-06-06 |
| Homepage Mobile | https://qmarkets.net | Mobile 390 | 2026-06-06 |