# Quoruminfotech Design System

> Corporate blue precision anchored by high-contrast typography and concentric circular motifs on a crisp, off-white foundation.

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

## TL;DR
Quoruminfotech utilizes a "Corporate Blue" palette dominated by `#0054a6` (Primary) and `#001329` (Deep Accent), set against a nearly-white canvas of `#fcfcfd`. The system relies heavily on the **Catamaran** and **din-2014** font families to establish a professional, industrial hierarchy. Visual interest is generated through concentric circular line patterns and cards with significant corner radii (up to 50px for panels). Primary actions are consistently rendered as `#0054a6` rounded buttons with a subtle drop shadow (`rgba(87, 102, 119, 0.5)`), ensuring high visibility and a tactile feel.

## Signature DNA
1. **Concentric Circularity** (Faint gray concentric circles used as background textures behind executive headshots and feature sections to imply "Quorum" or gathering; observed on Home and About pages).
2. **The Blue Anchor** (The consistent use of `#0054a6` for both primary CTAs and heavy section headers, creating a strong vertical brand thread; validated via 143 occurrences).
3. **High-Radius Surfaces** (A mix of sharp 0px layouts and extremely soft 15px-19px card radii, culminating in 50px "pill" panels for major call-outs).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#fcfcfd` | Primary page background | 87 | 1.0 | Computed Style |
| `{color.ink}` | `#6e6e6e` | Default body text | 216 | 0.8 | Computed Style |
| `{color.ink.strong}` | `#000000` | Headings and high-contrast text | 5 | 1.0 | Computed Style |
| `{color.border}` | `#e1e8ed` | Subtle section dividers | 8 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#0054a6` | Buttons, active states, primary headers | 143 | 0.8 | Computed Style |
| `{color.accent.deep}` | `#001329` | Footer background, dark text accents | 66 | 0.8 | Computed Style |
| `{color.accent.cyan}` | `#05c3de` | Secondary buttons, decorative icons | 9 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Catamaran | 400, 500, 600, 700, 900 | Display and Headings | Catamaran (Google Fonts) | SIL OFL |
| din-2014 | 300, 400, 500, 700, 900 | Body and UI Labels | Roboto | Commercial |
| Roboto | 300, 400, 500, 700 | Secondary Body | Roboto (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 53px | 52.8px | normal | 700 | Main Hero H1 | `h1.elementor-heading-title` |
| `{type.display.lg}` | 48px | 48px | normal | 700 | Section Headers | `h2.elementor-heading-title` |
| `{type.heading.md}` | 38px | 38.4px | normal | 700 | Sub-section Headers | `h2.elementor-heading-title` |
| `{type.heading.sm}` | 29px | 28.8px | normal | 700 | Card Titles | `h3.elementor-heading-title` |
| `{type.body.lg}` | 19px | 19.2px | normal | 500 | Large UI / Button Text | `a.elementor-button-link` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard Body Text | `section.elementor-top-section` |
| `{type.body.sm}` | 14px | 23px | normal | 300 | Footer / Legal Text | `p.elementor-heading-title` |
| `{type.caption}` | 12px | 18px | normal | 400 | Metadata / Captions | `section.elementor-top-section` |

### Principles
1. **Heading Weight is Absolute:** All display and primary headings (H1-H3) must utilize weight 700 (Bold) to maintain brand authority.
2. **Body Legibility:** Standard body text uses a generous 1.5x line height (24px on 16px base) to ensure readability on wide viewports.
3. **Sans-Serif Exclusivity:** No serif fonts are used in the digital interface; authority is conveyed through weight and color rather than traditional type styles.

## Spacing
**Base unit:** 4px (Inferred from 8, 12, 16, 40px patterns)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 3 |
| `{space.sm}` | 12px | 3 |
| `{space.md}` | 16px | 5 |
| `{space.lg}` | 40px | 10 |
| `{space.xl}` | 56px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, full-width bands | 439 occurrences |
| `{radius.sm}` | 8px | Control elements, small cards | 5 occurrences |
| `{radius.md}` | 11px | Primary Buttons | Rounded Button component |
| `{radius.lg}` | 15px | Feature Cards | Surface component |
| `{radius.xl}` | 19px | Detailed Content Cards | Card (observed_once) |
| `{radius.full}` | 50px | Decorative panels and avatars | Panel role |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.button}` | `rgba(87, 102, 119, 0.5) 0px 7px 11px -4px` | Primary CTAs | Rounded Button |
| `{shadow.card}` | `rgba(0, 19, 41, 0.2) 0px 0px 20px 0px` | Floating Feature Cards | Card (observed_once) |
| `{shadow.inset}` | `rgb(255, 255, 255) 0px 0px 10px 10px inset` | Softening image edges | Surface component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions (Learn More, Accept, Submit)
**Pages observed:** Home, About
**Spec:** 
- Background: `{color.primary}` (#0054a6)
- Text: `{color.canvas}` (#ffffff)
- Border: 3px solid `{color.primary}` (#0054a6)
- Radius: `{radius.md}` (11px)
- Padding: 15px 30px
- Typography: `{type.body.lg}` (19.2px / 500)
- Shadow: `{shadow.button}`

#### Surface (Standard)
**Role:** Content grouping and section containers
**Pages observed:** Home, About
**Spec:** 
- Background: Transparent / `rgba(0, 0, 0, 0)`
- Text: `{color.ink}` (#6e6e6e)
- Radius: `{radius.lg}` (15px)
- Padding: 0px

### Tier 2: Patterns

#### Solution Card
**Role:** Navigational tiles for product categories
**Pages observed:** Home
**Spec:** 
- Background: `{color.primary}` (#0054a6)
- Text: `{color.canvas}` (#ffffff)
- Radius: 0px (sharp)
- Padding: 35px
- Typography: `{type.heading.sm}` (29px / 700)

#### News/Blog Card
**Role:** Feed items for latest events
**Pages observed:** Home
**Spec:** 
- Background: `{color.canvas}` (#ffffff)
- Text: `{color.ink}` (#6e6e6e)
- Radius: 0px
- Shadow: `rgba(0, 0, 0, 0.2) 2px 8px 23px 3px`

### Tier 3: Surface-specific

#### Executive Panel
**Role:** High-profile call-to-action or bio section
**Pages observed:** About
**Spec:** 
- Background: `rgb(240, 243, 246)`
- Radius: `{radius.full}` (50px)
- Padding: 40px

#### Social Icon Group
**Role:** Footer social connectivity
**Pages observed:** Home, About
**Spec:** 
- Background: `{color.primary}` (#0054a6)
- Text: `{color.canvas}` (#ffffff)
- Radius: 50% (Circle)
- Size: 20px icon container

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px (Standard Elementor container) |
| Section Padding | 71px (Vertical) |
| Column Gap | 30px |

## Do's
- Use `#0054a6` for all primary interactive elements.
- Apply `Catamaran` weight 700 for all section headings.
- Maintain a 15px radius for standard content cards.
- Use the concentric circle background motif to anchor circular imagery.
- Ensure all body text is at least 16px for accessibility.

## Don'ts
- **Wrong:** Using `#05c3de` (Cyan) for primary buttons. **Right:** Use `#0054a6`. **Reason:** Cyan is reserved for secondary accents and decorative icons.
- **Wrong:** Applying serif fonts for body copy. **Right:** Use `din-2014` or `Roboto`. **Reason:** The brand identity is strictly sans-serif.
- **Wrong:** Using sharp corners for buttons. **Right:** Use an 11px radius. **Reason:** Primary CTAs must follow the "Rounded Button" spec to stand out from sharp layout containers.

## Quick start

### CSS Custom Properties
```css
:root {
  --quorum-primary: #0054a6;
  --quorum-accent-deep: #001329;
  --quorum-canvas: #fcfcfd;
  --quorum-ink: #6e6e6e;
  --quorum-radius-card: 15px;
  --quorum-radius-btn: 11px;
  --quorum-shadow-btn: 0px 7px 11px -4px rgba(87, 102, 119, 0.5);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #0054a6;
  --color-canvas: #fcfcfd;
  --font-display: "Catamaran", sans-serif;
  --font-body: "din-2014", "Roboto", sans-serif;
  --radius-card: 15px;
  --shadow-button: 0 7px 11px -4px rgba(87, 102, 119, 0.5);
}
```

## Known gaps
- Hover states for the "Solution Card" were not explicitly captured in the computed style evidence, though visual inspection suggests a slight brightness shift.
- Mobile-specific typography scaling for H1 headers was not fully sampled; current specs reflect desktop viewports.