# Qara Design System

> High-contrast geometric utility anchored by a vibrant signal red and rounded Poppins typography.

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

## TL;DR
Qara utilizes a high-energy "Signal Red" (#f04a3a) as its primary brand driver, often deployed in full-width hero bands and primary CTAs. The system is built on a clean white foundation (#ffffff) with deep charcoal text (#272727) and secondary accents of purple (#7141b1) and emerald green (#63c097). Typography is strictly sans-serif, pairing Poppins for bold, geometric headlines with Roboto for legible body content. Components favor a soft-geometric aesthetic, utilizing a standard 5px to 15px border radius on buttons and cards to balance the high-contrast color palette.

## Signature DNA
1. **Signal Red Flood** (#f04a3a used as a full-width background for hero sections and footer CTAs, creating immediate brand recognition across all landing pages).
2. **Geometric Type Pairing** (Poppins at weight 700 for display headers vs. Roboto for functional body text, ensuring a "tech-forward" but accessible feel).
3. **Soft-Cornered Containers** (Consistent use of 15px-20px radii for content cards and 5px for buttons, softening the impact of the high-contrast monochrome and red palette).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, card surface | 74 | 1 | `--wp--preset--color--white` |
| `{color.charcoal}` | `#272727` | Primary body text, headings | 120 | 1 | `--postx_preset_Contrast_2_color` |
| `{color.dark-navy}` | `#0e1523` | High-contrast display text | 15 | 1 | `--postx_preset_Contrast_1_color` |
| `{color.deep-gray}` | `#363636` | Footer backgrounds, secondary surfaces | 31 | 0.8 | Computed style |
| `{color.silver}` | `#bbbbbb` | Muted text, decorative lines | 72 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#f04a3a` | Primary CTA background, hero sections | 17 | 0.8 | Computed style |
| `{color.purple}` | `#7141b1` | Secondary headings, feature icons | 41 | 0.8 | Computed style |
| `{color.emerald}` | `#63c097` | Success indicators, secondary buttons | 6 | 0.6 | Computed style |
| `{color.amber}` | `#ffd328` | Pricing tier highlight (decorative_only) | 4 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 400, 500, 600, 700 | Display, Headings | Google Fonts | SIL OFL |
| Roboto | 400, 500, 600, 700 | Body, UI Labels | Google Fonts | Apache 2.0 |
| Montserrat | 600 | Captions, small labels | Google Fonts | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 60px | 75px | normal | 700 | Hero Slider | `a#slider-5-slide-24-layer-3` |
| `{type.display-lg}` | 42px | 47.88px | normal | 700 | Page Titles | `h1.page-title` |
| `{type.h2}` | 36px | 33.6px | normal | 700 | Section Heads | `h2.elementor-heading-title` |
| `{type.h3}` | 24px | 47.88px | normal | 700 | Entry Titles | `h3.entry-title` |
| `{type.subheading}` | 19px | 30px | normal | 700 | Feature Titles | `h4.elementor-heading-title` |
| `{type.body-lg}` | 16px | 27.2px | normal | 400 | Default Body | `header#site-header` |
| `{type.body-sm}` | 14px | 26px | normal | 600 | List Items | `span.elementor-icon-list-text` |
| `{type.caption}` | 12px | 12px | 1px | 600 | Small Links | `a` |

### Principles
1. **Bold Display Weight:** All headings from 19px up to 60px utilize weight 700 (Bold) for maximum impact.
2. **Standardized Body Height:** Body text at 16px consistently uses a 27.2px line height (1.7 ratio) for readability.
3. **Uppercase Accents:** Small captions (12px) use Montserrat with 1px letter spacing for technical/metadata roles.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 41 |
| `{space.sm}` | 10px | 11 |
| `{space.md}` | 20px | 16 |
| `{space.lg}` | 30px | 15 |
| `{space.xl}` | 50px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 375 occurrences |
| `{radius.sm}` | 5px | Primary CTA buttons | Rounded Button component |
| `{radius.md}` | 10px | UI Controls | Control role |
| `{radius.lg}` | 15px | Feature cards | Card component |
| `{radius.xl}` | 20px | Pricing/Hero cards | Surface component |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All observed components | evidence.shadows = [] |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action (Book a Demo, See More)
**Pages observed:** All
**Spec:** Background `{color.primary}` (#f04a3a) / Text `{color.white}` (#ffffff) / Radius 5px / Padding 10px 15px / Typography 14px 700 Roboto
**States observed:** Default | Hover: Not captured

#### Rounded Button (Ghost/Secondary)
**Role:** Inverted CTA on colored backgrounds
**Pages observed:** Pricing, Home
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.primary}` (#f04a3a) / Radius 3px / Padding 10px 30px / Typography 14px 700 Roboto
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific services or news items
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.charcoal}` (#272727) / Radius 15px / Border 0px / Typography 16px Roboto
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Section Surface
**Role:** Footer and secondary content bands
**Pages observed:** All
**Spec:** Background `{color.deep-gray}` (#363636) / Text `{color.white}` (#ffffff) / Radius 0px / Padding 50px 0px
**States observed:** Default

#### Signal Hero Surface
**Role:** Primary hero background
**Pages observed:** Home, Pricing
**Spec:** Background `{color.primary}` (#f04a3a) / Text `{color.white}` (#ffffff) / Radius 0px / Padding 0px 50px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1200px (estimated from 1440px screenshots) |
| Section Padding | 50px (vertical) |
| Card Gap | 20px - 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Hero text centers; padding reduces to 10px-15px; buttons stack vertically. |

## Imagery & decoration
Qara uses flat, modern vector illustrations with a limited palette (matching the brand colors). It avoids photography in hero sections, preferring clean iconography and illustrative "authentication" metaphors.

## Do's
- Use Poppins Bold (700) for all section headers.
- Flood the background with `#f04a3a` for high-impact conversion zones.
- Apply a 15px radius to white cards sitting on light gray or white backgrounds.
- Use Roboto for all long-form body copy to maintain legibility.
- Maintain a 1.7x line-height ratio for body text.

## Don'ts
- **Wrong:** Using `#635dff` (Sub-brand Purple) as the primary button color. **Right:** Use `#f04a3a`. **Reason:** Purple is a secondary accent, not a primary action color.
- Do not use shadows on cards; the brand relies on color blocking and hairlines for separation.
- Do not use Poppins for body text; keep it reserved for headings.
- Avoid sharp corners (0px) on buttons; always use at least a 3px-5px radius.

## Similar brands
- Cloudflare (monochrome + vibrant orange/red accent)
- Datadog (bold geometric type + high-contrast surfaces)
- Vercel (monochrome foundation with specific signal accents)

## Quick start

```css
:root {
  --qara-primary: #f04a3a;
  --qara-charcoal: #272727;
  --qara-white: #ffffff;
  --qara-purple: #7141b1;
  --qara-font-display: 'Poppins', sans-serif;
  --qara-font-body: 'Roboto', sans-serif;
  --qara-radius-card: 15px;
  --qara-radius-btn: 5px;
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Mobile-specific font size transitions (fluid type) were not captured in the scale.
- Shadow tokens were absent from the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://qara.net | 1440px | 2026-06-06 |
| Pricing | https://qara.net/pricing | 1440px | 2026-06-06 |
| About | https://qara.net/about | 1440px | 2026-06-06 |