# B-Secur Design System

> High-precision medical aesthetics defined by deep forest greens, vibrant coral accents, and technical Aeonik typography.

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

## TL;DR
B-Secur utilizes a sophisticated "Dark Mode" foundation for its primary identity, leaning heavily on a deep forest green (#122423) canvas. This technical atmosphere is punctuated by a high-contrast coral accent (#ff685b) used for primary CTAs and footer surfaces, creating a distinct medical-tech urgency. Typography is strictly Aeonik, maintaining a clean, geometric sans-serif profile across all hierarchies. The system balances sharp 0px containers with extremely soft 9999px pill-shaped buttons and 50px rounded cards, signaling a blend of clinical precision and consumer accessibility.

## Signature DNA
1. **The Coral Punctuation:** Use of #ff685b as a high-voltage functional color against dark backgrounds, specifically for the "HeartKey Evaluation" CTA and the global footer.
2. **Deep Forest Foundation:** Replacing standard black with #122423 for primary backgrounds and navigation bars, providing a softer but equally premium technical feel.
3. **Aeonik Geometry:** A singular reliance on the Aeonik typeface, using weight 500 for headers to maintain a modern, engineered appearance.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--bs-dark-forest` | `#122423` | Primary surface, Nav background, Text | 19 | 0.8 | Computed Style |
| `--bs-white` | `#ffffff` | Text, Card background | 43 | 1.0 | `--bs-white` |
| `--bs-dark` | `#212529` | Primary body text | 134 | 1.0 | `--bs-dark` |
| `--bs-off-white` | `#f7f6f4` | Secondary section backgrounds | 1 | 1.0 | `--bs-light` |
| `--bs-gray-border` | `#707070` | Subtle dividers and borders | 10 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--bs-coral` | `#ff685b` | Primary CTA, Footer background, Icons | 50 | 0.8 | Computed Style |
| `--bs-primary` | `#0d6efd` | Link text, focus states | 5 | 1.0 | `--bs-primary` |
| `--bs-teal-muted` | `#285150` | Secondary text on light backgrounds | 48 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Aeonik | 400, 500 | All headlines, body, and UI | Montserrat | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 36px | 57px | -0.2px | 400 | Hero sub-headers | `div.banner-half-video--content--heading` |
| `{type.h1}` | 36px | 57px | normal | 500 | Section headlines | `p.stats-list--heading` |
| `{type.h5}` | 25px | 35px | normal | 500 | Footer headings | `h5.footer--heading` |
| `{type.h6}` | 24px | 30px | normal | 400 | Team names | `p.people-team-block--info-name` |
| `{type.body-lg}` | 20px | 34px | normal | 400 | Intro paragraphs | `p` |
| `{type.body-md}` | 18px | 30px | normal | 400 | Position labels | `p.people-team-block--info-position` |
| `{type.body-sm}` | 16px | 24px | normal | 400 | Default body copy | `div.alert.show` |
| `{type.caption}` | 12px | 16px | 0.6px | 400 | Uppercase labels | `a.uppercase.font-aeonik` |

### Principles
1. **Generous Leading:** Body text uses a 1.5x to 1.7x line-height ratio (e.g., 20px/34px) to ensure legibility in technical contexts.
2. **Medium Weight Emphasis:** Weight 500 is the standard for all interactive elements and structural headings.
3. **Tight Display Tracking:** Larger headings at 36px utilize -0.2px letter spacing to maintain geometric tension.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 41 |
| `{space.sm}` | 10px | 58 |
| `{space.md}` | 20px | 29 |
| `{space.lg}` | 40px | 18 |
| `{space.xl}` | 50px | 11 |
| `{space.section}` | 100px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main layout containers | 268 occurrences |
| `{radius.sm}` | 3px | Form inputs | 6 occurrences |
| `{radius.lg}` | 16px | Content cards | 12 occurrences |
| `{radius.pill}` | 9999px | Primary CTA buttons | 15 occurrences |
| `{radius.huge}` | 50px | Large feature cards | Component: Card |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.nav}` | `rgba(18, 36, 35, 0.25) 0px 8px 12px 0px` | Sticky navigation bar | Navigation component |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global header and site orchestration.
**Pages observed:** All
**Spec:** Background: `#122423` | Text: `#ffffff` | Radius: `0px` | Shadow: `{shadow.nav}`
**States observed:** Default: Captured | Hover: Not captured

#### Footer
**Role:** Global site closure and secondary links.
**Pages observed:** All
**Spec:** Background: `#ff685b` | Text: `#212529` | Radius: `0px` | Padding: `50px 0px`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Card
**Role:** Feature highlights and content grouping.
**Pages observed:** All
**Spec:** Background: `#ff685b` | Text: `#122423` | Radius: `50px` | Padding: `2px 29px`
**States observed:** Default: Captured

#### Primary Button
**Role:** Main call to action (e.g., HeartKey Evaluation).
**Pages observed:** All
**Spec:** Background: `#ff685b` | Text: `#ffffff` | Radius: `9999px` | Typography: `Aeonik 500`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Surface (Technical)
**Role:** Dark background sections for data visualization.
**Pages observed:** All
**Spec:** Background: `#122423` | Text: `#ffffff` | Radius: `0px` | Padding: `30px 0px`
**States observed:** Default: Captured

#### Surface (Light)
**Role:** Content-heavy sections or whitepapers.
**Pages observed:** About Us
**Spec:** Background: `#f7f6f4` | Text: `#212529` | Radius: `0px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1440px |
| Section Gap | 100px |
| Column Gap | 30px |

## Do's
- Use `#ff685b` for the primary "Evaluation" CTA to ensure maximum visibility.
- Set all headlines in Aeonik weight 500.
- Use `#122423` for dark-themed section backgrounds instead of pure black.
- Apply `{radius.pill}` (9999px) to all interactive buttons.
- Maintain a minimum of 100px vertical spacing between major content sections.

## Don'ts
- **Wrong:** Using `#0d6efd` (Standard Bootstrap Blue) for primary buttons. 
  **Right:** Use `#ff685b` (Coral). 
  **Reason:** Blue is a legacy token; Coral is the brand's primary functional accent.
- **Wrong:** Applying rounded corners to the main navigation bar.
  **Right:** Keep navigation at `0px` radius.
  **Reason:** The system uses sharp edges for structural containers and round edges for interactive elements.
- **Wrong:** Using serif fonts for body copy.
  **Right:** Use Aeonik 400.
  **Reason:** The brand identity is strictly geometric sans-serif.

## Similar brands
- Oura
- Whoop
- Dexcom
- Neuralink

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-brand-primary: #ff685b;
  --color-brand-dark: #122423;
  --color-text-main: #212529;
  --font-family-base: 'Aeonik', sans-serif;
  --radius-pill: 9999px;
  --shadow-nav: rgba(18, 36, 35, 0.25) 0px 8px 12px 0px;
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific navigation transitions were not fully documented.
- Explicit "Success" and "Error" semantic tokens were present in CSS variables (`--bs-red`, `--bs-green`) but not observed in UI components.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://b-secur.com | 1440px | 2026-06-06 |
| About Us | https://b-secur.com/about | 1440px | 2026-06-06 |