# Carecru Design System

> Deep indigo canvases meet high-contrast lavender actions, anchored by geometric sans-serif precision and fluid, organic background waves.

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

## TL;DR
Carecru utilizes a "Deep Night" palette where a dark navy-purple base `#12082c` serves as the primary atmospheric floor for hero sections, contrasted against a clean white `#ffffff` canvas for content-heavy grids. The brand's interactive energy is driven by "Lavender" `#574bd2` for primary actions and "Electric Blue" `#1a47fc` for secondary signals and links. Typography is strictly **Axiforma**, a geometric sans-serif that maintains a bold, professional weight (700) for display headings and a highly legible 400 for body text. Visual depth is achieved through organic, flowing vector lines and subtle inner-glow shadows on interactive elements.

## Signature DNA
1. **The Indigo-to-White Shift** (Deep backgrounds `#12082c` used for high-impact hero moments and footers, transitioning into stark white `#ffffff` sections for data and pricing clarity.)
2. **Lavender Command** (Primary CTAs and key brand highlights use `#574bd2`, often paired with complex inset shadows to create a "pressed" or "tactile" button feel.)
3. **Geometric Clarity** (Axiforma's circular apertures and consistent stroke weights define the brand's modern, tech-forward dental platform identity.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--base-color-neutral--white` | `#ffffff` | Primary page background, alternate text | 259 | 1 | `computed_style` |
| `--background-color--background-primary` | `#12082c` | Hero and footer surface background | 12 | 1 | `css_variable` |
| `--super-white` | `#f7f6f9` | Subtle section backgrounds, card surfaces | 12 | 1 | `computed_style` |
| `--border-color--border-primary` | `#eeeeee` | Default 1px dividers and card outlines | 5 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--text-color--text-primary` | `#453d5a` | Primary body and heading text | 299 | 1 | `css_variable` |
| `--link-color--link-primary` | `#1a47fc` | Secondary buttons, links, and borders | 72 | 1 | `css_variable` |
| `--base-color-brand--lavander` | `#574bd2` | Primary CTA background, brand highlights | 25 | 1 | `computed_style` |
| `--base-color-brand--purple` | `#7c70ff` | Hover states and emphasized text | 28 | 1 | `css_variable` |
| `--base-color-brand--pink` | `#ff006f` | Tertiary accents (decorative only) | 1 | 0.4 | `css_variable` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--background-color--background-success` | `#cef5ca` | Success states / Checkmarks |
| `--background-color--background-error` | `#f8e4e4` | Error states / Validation |
| `--background-color--background-warning` | `#fcf8d8` | Warning alerts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| Axiforma | 400, 600, 700 | Primary Display & UI | Montserrat | Licensed |
| axiforma | 400 | Body copy | Montserrat | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.display-h1}` | 64px | 70.4px | normal | 700 | Main Hero Heading | `h1.heading-style-h1` |
| `{typography.display-h2}` | 48px | 57.6px | normal | 700 | Section Headings | `h2.heading-style-h2` |
| `{typography.heading-h3}` | 32px | 38.4px | normal | 700 | Sub-section Headings | `h3.heading-style-h3` |
| `{typography.heading-h4}` | 24px | 33.6px | normal | 700 | Card Titles | `h3.heading-style-h4` |
| `{typography.body-lg}` | 20px | 30px | normal | 400 | Intro Paragraphs | `p.text-size-medium` |
| `{typography.body-md}` | 16px | 24px | normal | 400 | Default Body Text | `section.section_hero` |
| `{typography.button}` | 16px | 22.4px | normal | 600 | Primary CTA Labels | `div.button.open-modal` |
| `{typography.body-sm}` | 14px | 21px | normal | 400 | Small UI / Captions | `div.text-size-small` |

### Principles
1. **Bold Display Hierarchy:** Headings always use weight 700 to anchor the page.
2. **Generous Leading:** Body text maintains a 1.5x line-height ratio (16px/24px) for readability.
3. **Uppercase Utility:** Small labels and "is-text" buttons often use 1.6px letter spacing for a technical feel.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.xs}` | 8px | 75 |
| `{spacing.sm}` | 12px | 11 |
| `{spacing.md}` | 24px | 22 |
| `{spacing.lg}` | 32px | 18 |
| `{spacing.xl}` | 40px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.control}` | 8px | Standard buttons and small cards | `Rounded Button` |
| `{radius.card}` | 16px | Feature cards and containers | `Surface` |
| `{radius.panel}` | 32px | Large pricing/feature blocks | `Card` |
| `{radius.full}` | 160px | Pill-shaped decorative elements | `Card` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `inset-glow` | `rgb(255, 255, 255) 0.5px 2px 3px -2px inset` | Primary buttons to create depth | `Rounded Button` |
| `soft-shadow` | `rgba(0, 0, 0, 0.2) 0px 2px 5px 1px` | Floating UI elements | `Card` |
| `brand-glow` | `rgba(87, 75, 210, 0.59) -3px -3px 14px -1px` | Active/Featured brand cards | `Card` |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Primary action (e.g., "Get Pricing", "Submit")
**Pages observed:** All
**Spec:** Background `#574bd2` | Text `#ffffff` | Radius `8px` | Padding `12px 24px` | Shadow `inset-glow`
**States observed:** Default | Active: captured

#### Rounded Button (Secondary)
**Role:** Secondary actions on dark backgrounds
**Pages observed:** All
**Spec:** Background `transparent` | Text `#ffffff` | Border `1px #ffffff` | Radius `8px` | Padding `12px 24px`
**States observed:** Default | Hover: not captured

### Tier 2: Patterns
#### Pricing Card
**Role:** Product tier display
**Pages observed:** `/pricing`
**Spec:** Background `#f7f6f9` | Text `#453d5a` | Border `1px rgba(87, 75, 210, 0.1)` | Radius `32px` | Padding `32px`
**States observed:** Default

#### Feature Badge
**Role:** Small category labels (e.g., "Connect", "Analyze")
**Pages observed:** All
**Spec:** Background `rgba(26, 71, 252, 0.1)` | Text `#453d5a` | Border `1px rgba(26, 71, 252, 0.3)` | Radius `8px` | Padding `0px 8px`

### Tier 3: Surface-specific
#### Hero Section
**Role:** Top-of-page brand impact
**Pages observed:** All
**Spec:** Background `#12082c` | Text `#ffffff` | Typography `Axiforma 700`
**Decoration:** Flowing vector waves in `#453d5a` opacity.

#### Form Input
**Role:** Lead generation
**Pages observed:** All
**Spec:** Background `#ffffff` | Border `1px #eeeeee` | Radius `8px` | Typography `Axiforma 400`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding | 80px - 120px |
| Grid Gutter | 24px |

## Do's
- Use `#574bd2` for the primary "Submit" or "Get Started" action.
- Ensure all headings use **Axiforma Bold (700)**.
- Apply the `inset-glow` shadow to primary lavender buttons to maintain brand depth.
- Use `#12082c` for full-width footer backgrounds.
- Maintain 32px radius on large content containers to soften the geometric layout.

## Don'ts
- **Wrong:** Using `#1a47fc` (Electric Blue) for primary "Submit" buttons. 
  **Right:** Use `#574bd2` (Lavender). 
  **Reason:** Lavender is the designated primary action color; blue is for secondary links and borders.
- **Wrong:** Setting display headings in weight 400.
  **Right:** Always use weight 700 for H1-H3.
- Do not use sharp (0px) corners for interactive UI elements; always use at least 8px radius.

## Similar brands
- **Loom:** Similar use of purple-indigo foundations and geometric sans-serifs.
- **Drift:** High-contrast dark mode heroes with vibrant accent buttons.
- **Intercom:** Use of soft rounded corners and structured pricing grids.

## Quick start
```css
/* CSS Variables */
:root {
  --carecru-indigo: #12082c;
  --carecru-lavender: #574bd2;
  --carecru-blue: #1a47fc;
  --carecru-ink: #453d5a;
  --carecru-white: #ffffff;
  --font-main: 'Axiforma', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Carecru Lavender #574bd2, 8px border radius, and a white inset glow shadow."
- "Generate a feature card with a #f7f6f9 background, 32px corner radius, and Axiforma Bold headings in #453d5a."
- "Design a hero section with a #12082c background and white Axiforma text at 64px."

## Known gaps
- Hover and Active states for secondary buttons were not explicitly captured in the CSS variable mapping.
- Mobile-specific breakpoint transitions for the 64px H1 were not fully documented.