# Valoores Design System

> Corporate blue precision meets high-contrast geometric clarity.

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

## TL;DR
Valoores utilizes a structured, high-contrast palette anchored by a deep navy accent `#051c2c` and a vibrant functional blue `#0d6efd` against a clean white `#ffffff` foundation. The typography is exclusively **Poppins**, leveraging its geometric sans-serif properties to create a modern, professional hierarchy ranging from bold 40px display headers to 16px functional UI text. Layouts are characterized by sharp edges (0px radii) for structural containers, contrasted with 10px rounded corners for interactive cards. Visual depth is minimal, relying on a single signature white shadow for elevation rather than complex gradients.

## Signature DNA
1. **Geometric Sharpness** (The system defaults to `{radii.sharp}` (0px) for primary surfaces and navigation, creating a rigid, architectural feel across all pages.)
2. **High-Contrast Navy Overlays** (Use of `#051c2c` as a high-density background for cards and navigation bars to anchor white text, observed on the homepage and about sections.)
3. **Poppins Hierarchy** (Strict adherence to the Poppins family across all roles, using weight 700 for display and 500 for primary actions to signal authority.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, button text, carousel indicators | 31 | 1.0 | `css_variable:--bs-body-bg` |
| `{colors.black}` | `#000000` | Emphasis text, translucent borders, backdrop | 27 | 1.0 | `css_variable:--bs-emphasis-color` |
| `{colors.tertiary-bg}` | `#f8f9fa` | Subtle section backgrounds | 1 | 0.9 | `css_variable:--bs-tertiary-bg` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.navy}` | `#051c2c` | Card backgrounds, primary navigation text, footer | 32 | 0.8 | Computed Style |
| `{colors.primary}` | `#0d6efd` | Links, focus rings, primary action indicators | 3 | 1.0 | `css_variable:--bs-primary` |
| `{colors.indigo}` | `#7066e0` | SweetAlert confirmation buttons | 1 | 0.7 | `css_variable:--swal2-confirm-button-background-color` |

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

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 400, 500, 700 | All roles (Display, Body, UI) | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typo.display}` | 40px | 48px | normal | 700 | Hero slide titles | `h1.slide-title` |
| `{typo.heading}` | 28px | 33.6px | normal | 500 | Hero slide subtitles | `h3.slide-subtitle` |
| `{typo.heading-sm}` | 24px | 36px | normal | 400 | Hero paragraph text | `p.slide-parag` |
| `{typo.subheading}` | 18px | 22.08px | normal | 400 | Section labels | `h6` |
| `{typo.body-lg}` | 18px | 27.6px | normal | 400 | Navigation links | `span.link` |
| `{typo.body}` | 16px | 24px | normal | 400 | Default UI text | `div#navbar` |
| `{typo.button}` | 16px | 24px | normal | 500 | Primary CTA buttons | `a.btn.btn-primary` |
| `{typo.caption}` | 12px | 16.8px | normal | 400 | Small annotations | Not captured |

### Principles
1. **Geometric Sans Only.** No serif typefaces are permitted; Poppins carries all brand weight.
2. **Tight Display Leading.** Large headers use a 1.2x line-height ratio to maintain visual density.
3. **Weight-Based Hierarchy.** Weight 700 is reserved for H1/Display; Weight 500 is used for interactive triggers and sub-headers.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 3 |
| `{space.sm}` | 8px | 3 |
| `{space.lg}` | 24px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Navigation, main surfaces, section containers | 56 occurrences |
| `{radius.md}` | 10px | Content cards, interactive modules | 3 occurrences |
| `{radius.sm}` | 6px | Secondary buttons | 2 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.none}` | none | Standard cards and nav | 3 occurrences |
| `{shadow.elevated}` | `rgba(255, 255, 255, 0.1) 10px 10px 10px 0px` | Surface-specific depth | 3 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Secondary actions and ghost buttons.
**Pages observed:** Homepage.
**Spec:** Background: transparent / Text: `#ffffff` / Border: 1px `#ffffff` / Radius: 6px / Typography: Poppins 16px.
**States observed:** Default | Hover: captured.

### Tier 2: Patterns
#### Card
**Role:** Content grouping and feature highlights.
**Pages observed:** Homepage, Pricing, About.
**Spec:** Background: `#051c2c` / Text: `#ffffff` / Border: 0px / Radius: 10px / Padding: 5px 24px.
**States observed:** Default: captured.

#### Navigation Bar
**Role:** Global site navigation.
**Pages observed:** All analyzed pages.
**Spec:** Background: `#ffffff` / Text: `#051c2c` / Radius: 0px / Typography: Poppins 16px.
**States observed:** Default: captured.

### Tier 3: Surface-specific
#### Surface Overlay
**Role:** Decorative or functional section overlays.
**Pages observed:** Homepage, Pricing, About.
**Spec:** Background: `rgba(0, 0, 0, 0.2)` / Text: `#051c2c` / Shadow: `{shadow.elevated}` / Radius: 0px.
**States observed:** Default: captured.

## Layout
| Property | Value |
|---|---|
| Max-width | 1440px (Desktop) |
| Section Padding | 8px 0px |
| Card Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger menu; hero text realigns to center. |
| Desktop | 1440px | Multi-column card layouts; horizontal top navigation. |

## Imagery & decoration
- **Photography:** High-resolution corporate and event photography (e.g., summits, flags).
- **Overlays:** Dark translucent overlays (`rgba(0,0,0,0.2)`) used to ensure text legibility over busy images.
- **Avoid:** Hand-drawn illustrations or organic, rounded decorative shapes.

## Do's
- Use **Poppins** for every text element without exception.
- Apply `{radius.sharp}` (0px) to all structural layout containers.
- Use `#051c2c` for high-impact content cards to create contrast against white backgrounds.
- Maintain a 1.2x line-height for display-sized headers.
- Use `#0d6efd` exclusively for interactive links and focus states.

## Don'ts
- **Wrong:** Using a generic blue like `#0000ff` for primary actions. **Right:** Use `#0d6efd`. **Reason:** Brand consistency and WCAG AA contrast compliance.
- **Wrong:** Applying rounded corners to the main navigation bar. **Right:** Keep it 0px. **Reason:** Structural elements must remain sharp.
- **Wrong:** Using serif fonts for "executive" feel. **Right:** Use Poppins Bold. **Reason:** The brand identity is strictly geometric sans-serif.

## Similar brands
- SAP (Corporate blue, high-contrast UI)
- Oracle (Structured, architectural layouts)
- IBM (Geometric precision, blue-centric palette)

## Quick start

### CSS Variables
```css
:root {
  --color-primary: #0d6efd;
  --color-navy: #051c2c;
  --color-white: #ffffff;
  --font-main: 'Poppins', sans-serif;
  --radius-sharp: 0px;
  --radius-card: 10px;
  --shadow-elevated: 10px 10px 10px 0px rgba(255, 255, 255, 0.1);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #0d6efd;
  --color-navy: #051c2c;
  --font-poppins: "Poppins";
  --radius-card: 10px;
  --shadow-elevated: 10px 10px 10px 0px rgba(255, 255, 255, 0.1);
}
```

## Agent prompt examples
- "Create a feature card using Poppins 16px white text on a `#051c2c` background with a 10px border radius."
- "Design a hero section with a `#ffffff` background, a `#0d6efd` primary button, and a Poppins 40px bold header."
- "Build a navigation bar with a sharp 0px radius, white background, and `#051c2c` Poppins 16px links."

## Known gaps
- Hover states for primary buttons were not explicitly detailed in the CSS variable tokens.
- Mobile-specific spacing tokens (padding/margin) were not captured in the evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Page | https://valoores.com | 1440px | 2026-06-06 |
| Pricing | https://valoores.com/pricing | 1440px | 2026-06-06 |
| About | https://valoores.com/about | 1440px | 2026-06-06 |