# Cardiobase Design System

> Clinical precision anchored by high-contrast grayscale and vibrant cyan functional accents.

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

## TL;DR
Cardiobase utilizes a monochrome foundation of pure black (#000000) and mid-gray (#888888) to establish a professional, clinical atmosphere. The system is punctuated by a high-visibility Electric Cyan (#00aeef) used exclusively for primary headings and brand-critical identifiers. Typography is dominated by Inter, leveraging semi-bold weights (600) and tight letter-spacing (-0.7px) for display elements to ensure legibility within dense medical contexts. Layouts favor generous vertical rhythm with 100px section gaps and circular image masking to soften the technical aesthetic.

## Signature DNA
1. **Electric Cyan Punctuation** (#00aeef used for `h2.framer-text` and section headers to draw immediate focus against a grayscale canvas).
2. **Circular Clinical Masking** (Photography is consistently contained within perfect circles with thick cyan borders, humanizing the medical subject matter).
3. **Grayscale Hierarchy** (Body text alternates between #888888 for secondary descriptions and #000000 for primary labels, maintaining high contrast without chromatic fatigue).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| Clinibase | #00aeef | Circular "G" icon | Typography, Spacing | Logo accent |
| Rezibase | #888888 | Circular "R" icon | Typography, Spacing | Logo accent |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.black}` | `#000000` | Primary text, wordmarks | 26 | 0.8 | computed_style |
| `{color.gray}` | `#888888` | Secondary body text, icons | 20 | 0.8 | computed_style |
| `{color.white}` | `#ffffff` | Page background | 8 | 0.6 | computed_style |
| `{color.dark-gray}` | `#444444` | Deemphasized text | 4 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.cyan}` | `#00aeef` | Section headings, primary accents | 8 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Inter | 500, 600, 700 | Heading, UI | Inter (Google Fonts) | SIL OFL |
| sans-serif | 400 | Body fallback | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.h2}` | 34px | 51px | -0.7px | 600 | Main section heads | `h2.framer-text` |
| `{type.h3}` | 24px | 36px | -0.7px | 500 | Sub-section heads | `h2.framer-text` |
| `{type.label-lg}` | 24px | 33.6px | -0.5px | 500 | Feature titles | `span.framer-text` |
| `{type.label-md}` | 20px | 28px | -0.5px | 500 | Card headings | `h3.framer-text` |
| `{type.body-md}` | 15px | 30px | -0.15px | 500 | Running prose | `p.framer-text` |
| `{type.caption}` | 12px | normal | normal | 400 | Footer links | `div.framer-KXjfF` |
| `{type.nav}` | 14px | normal | normal | 500 | Top navigation | `a.framer-nav` |
| `{type.legal}` | 11px | normal | normal | 400 | Privacy links | `a.privacy-policy` |

### Principles
1. **Negative Tracking on Display:** All headings above 20px must use negative letter-spacing (-0.5px to -0.7px) to maintain visual density.
2. **Generous Line Height:** Body text (`{type.body-md}`) uses a 2.0x line-height ratio (30px height / 15px size) to aid readability in dense blocks.
3. **Weight as Hierarchy:** Use weight 600 for primary brand statements and 500 for all interactive or secondary labels.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.section}` | 100px | 3 |
| `{space.gutter}` | 24px | 8 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Layout containers | 43 occurrences |
| `{radius.card}` | 20px | Content surfaces | 18 occurrences |
| `{radius.full}` | 9999px | Image masks | Screenshot (Circular) |

## Elevation
Table: | Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- | :--- |
| Flat | none | All surfaces | `shadow: none` in component data |

## Components

### Tier 1: Foundational

#### Surface
**Role:** Standard content container
**Pages observed:** https://cardiobase.com
**Spec:** Background: transparent / Text: #000000 / Border: none / Radius: 20px / Padding: 0px
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Circular Hero Mask
**Role:** Primary visual for medical staff/facility imagery
**Pages observed:** https://cardiobase.com
**Spec:** Border: 4px solid #00aeef / Radius: 9999px / Overflow: hidden
**States observed:** Default: captured

#### Product Wordmark Group
**Role:** Displaying sub-brand logos in a grid
**Pages observed:** https://cardiobase.com
**Spec:** Typography: Inter 500 / Color: #888888 / Gap: 24px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Navigation Link
**Role:** Header menu items
**Pages observed:** https://cardiobase.com
**Spec:** Typography: Inter 500 / Size: 14px / Color: #00aeef (active) or #000000 (default)
**States observed:** Default: captured | Hover: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Width | 1200px |
| Section Padding | 100px (vertical) |
| Grid Columns | 2-column (desktop) |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Stacked 1-column grid, centered text alignment |
| Desktop | 1440px | 2-column feature splits, 100px section spacing |

## Imagery & decoration
Cardiobase uses high-fidelity photography of medical professionals. Images are strictly masked into circles or "pill" shapes. Avoids illustrations, icons, or complex shadows.

## Do's
- Use #00aeef for primary headings to establish brand presence.
- Apply -0.7px letter-spacing to any text set in Inter 600.
- Maintain 100px vertical gaps between major content sections.
- Use #888888 for long-form descriptive text to reduce visual weight.
- Mask all photography into circular containers.

## Don'ts
- **Wrong:** Using #00aeef for body text. **Right:** Use #000000 or #888888. **Reason:** Cyan lacks sufficient legibility for long-form reading.
- **Wrong:** Applying drop shadows to cards. **Right:** Keep surfaces flat (none). **Reason:** The brand relies on clean, clinical lines.
- **Wrong:** Using sub-brand colors (like Rezibase green) for Cardiobase parent headings. **Right:** Use #00aeef for parent. **Reason:** Maintains brand hierarchy.

## Similar brands
- Philips Healthcare
- GE HealthCare
- Siemens Healthineers
- Dräger

## Quick start

```css
/* CSS Variables */
:root {
  --cb-color-black: #000000;
  --cb-color-gray: #888888;
  --cb-color-white: #ffffff;
  --cb-color-cyan: #00aeef;
  --cb-font-main: 'Inter', sans-serif;
  --cb-radius-card: 20px;
  --cb-space-section: 100px;
}
```

## Agent prompt examples
- "Create a feature section for Cardiobase using a 2-column grid. The left column should have an H2 in #00aeef with -0.7px spacing. The right column should have a circular masked image with a cyan border."
- "Generate a content card with a 20px border radius, no shadow, and body text in #888888 using Inter at 15px."

## Known gaps
- Hover states for navigation and buttons were not explicitly captured in the source data.
- Form input styles and validation states are missing from the analyzed pages.
- Mobile-specific navigation menu (hamburger) behavior not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://cardiobase.com | 1440x900 | 2026-06-06 |