# Logmycare.co.uk Design System

> Deep indigo foundations punctuated by high-visibility amber actions and geometric Apercu headlines.

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

## TL;DR
Log my Care utilizes a high-contrast "Deep Indigo" (`#330066`) and "Amber" (`#ffa300`) palette to create a professional yet accessible healthcare technology aesthetic. The system relies heavily on **Apercu Pro** for bold, wide-tracked display typography and **Helvetica Neue** for functional body text. Layouts are characterized by generous 100px vertical section spacing and large-radius containers (40px to 50px). Primary actions are consistently rendered as large, amber pill buttons with indigo text, ensuring maximum legibility and clear user pathways.

## Signature DNA
1. **The Indigo-Amber Punch** (The primary brand voltage comes from the 15.8:1 contrast ratio between the indigo text/surfaces and amber primary buttons, seen across all heroes and CTAs).
2. **Wide-Tracked Apercu Display** (Headlines use Apercu Pro with aggressive positive letter spacing, ranging from 2px to 6px, creating a distinct, airy geometric rhythm).
3. **Softened Scale** (Large-scale radii of 40px and 50px are applied to cards and buttons, removing sharp corners from the digital care environment).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.indigo}` | `#330066` | Primary brand color, headings, dark surfaces, button text | 118 | 1.0 | Computed Style |
| `{color.white}` | `#ffffff` | Page background, card surfaces, text on dark | 34 | 1.0 | Computed Style |
| `{color.black}` | `#000000` | Primary body text, secondary headings | 338 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.amber}` | `#ffa300` | Primary CTA background | 12 | 0.8 | Computed Style |
| `{color.error}` | `#e00000` | Alert text (Pricing page) | 3 | 0.6 | Computed Style |
| `{color.gray}` | `#777169` | Borders and dividers | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Apercu Pro | 600, 700 | Display & Headings | ITC Johnston or DM Sans | Licensed |
| Helvetica Neue | 300, 700 | Body & UI | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 81px | 81.1px | 6px | 700 | Hero H1 | `h1.c-masthead-home__title` |
| `{type.display.lg}` | 65px | 65.4px | 4px | 700 | CTA Titles | `h2.c-cta__title` |
| `{type.display.md}` | 53px | 52.7px | 2px | 700 | Section Titles | `h2.c-content-media__title` |
| `{type.heading.md}` | 34px | 37.7px | 2px | 700 | List Item Titles | `h2.c-listing__item-title` |
| `{type.heading.sm}` | 22px | 24.5px | 2px | 700 | Accordion Headers | `summary.c-accordion__item-heading` |
| `{type.button}` | 22px | 22.3px | normal | 700 | Primary CTA Text | `a.c-masthead-home__btn.c-btn` |
| `{type.body.lg}` | 18px | 28.8px | normal | 300 | Intro Paragraphs | `p.c-listing__item-summary` |
| `{type.body.md}` | 16px | 16px | normal | 300 | List Items | `li:nth-of-type(1)` |
| `{type.caption}` | 12px | 18.7px | normal | 700 | Form Labels | `span.hs-form-required` |

### Principles
1. **Headline Tracking:** All Apercu Pro headings must have at least 2px of letter spacing to maintain brand character.
2. **Body Weight:** Default body text uses Helvetica Neue at weight 300 for a light, modern feel.
3. **Contrast First:** Text on Amber backgrounds must always be Indigo (`#330066`), never Black.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 19 |
| `{space.sm}` | 20px | 101 |
| `{space.md}` | 40px | 7 |
| `{space.lg}` | 50px | 18 |
| `{space.section}` | 100px | 35 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Form inputs, sharp sections | 426 occurrences |
| `{radius.md}` | 30px | Small cards | Pricing page containers |
| `{radius.lg}` | 40px | Content cards | Media-content blocks |
| `{radius.pill}` | 50px | Primary Buttons | Main CTA components |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards and buttons | No drop shadows observed in component specs |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Book a demo, Get started)
**Pages observed:** Home, Pricing, About
**Spec:** 
- **Background:** `#ffa300`
- **Text:** `#330066`
- **Radius:** 50px
- **Padding:** 30px 50px
- **Typography:** Helvetica Neue 700, 22.32px
**States observed:** Default | Hover: Not captured

#### Ghost Button
**Role:** Secondary actions (How it works)
**Pages observed:** Home, Pricing
**Spec:** 
- **Background:** transparent
- **Text:** `#330066`
- **Border:** 2px solid transparent (or `#330066` in specific variants)
- **Radius:** 50px
- **Padding:** 30px 50px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature highlights and pricing tiers
**Pages observed:** Pricing, About
**Spec:** 
- **Background:** `#fff2bd` (Amber-tint) or `#ffffff`
- **Border:** 0px
- **Radius:** 40px
- **Padding:** 35px
**States observed:** Default

#### Accordion Item
**Role:** Frequently Asked Questions
**Pages observed:** Home, Pricing
**Spec:** 
- **Text:** `#330066`
- **Border-bottom:** 1px solid `#330066`
- **Typography:** Apercu Pro 700, 22px
**States observed:** Default | Active: Not captured

### Tier 3: Surface-specific

#### Dark Section Block
**Role:** High-impact value propositions
**Pages observed:** Home
**Spec:** 
- **Background:** `#330066`
- **Text:** `#ffffff`
- **Radius:** 40px
- **Padding:** 50px
**States observed:** Default

#### Form Input
**Role:** Lead generation
**Pages observed:** Pricing
**Spec:** 
- **Background:** `#ffffff`
- **Border:** 1px solid `#330066`
- **Radius:** 0px
- **Typography:** Helvetica Neue 300, 18px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Gutter | 100px |
| Column Gap | 32px |

## Do's
- Use `#ffa300` for the primary "Book a Demo" action.
- Apply at least 2px letter-spacing to all Apercu Pro headings.
- Use `#330066` for body text when placed on light-tinted cards.
- Maintain 100px vertical spacing between major homepage sections.
- Use 50px radius for all primary interactive buttons.

## Don'ts
- **Wrong:** Using Black (`#000000`) for primary buttons. **Right:** Use Indigo (`#330066`) on Amber. **Reason:** Brand identity and contrast.
- **Wrong:** Using sharp corners on feature cards. **Right:** Use 40px radius. **Reason:** System-wide "softened" geometric language.
- **Wrong:** Tightening tracking on display text. **Right:** Keep 4px-6px spacing on H1/H2. **Reason:** Signature Apercu DNA.

## Quick start

### CSS Variables
```css
:root {
  --color-indigo: #330066;
  --color-amber: #ffa300;
  --color-white: #ffffff;
  --font-display: "Apercu Pro", sans-serif;
  --font-body: "Helvetica Neue", Arial, sans-serif;
  --radius-pill: 50px;
  --radius-card: 40px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-indigo: #330066;
  --color-amber: #ffa300;
  --font-apercu: "Apercu Pro";
  --radius-xl: 40px;
  --radius-pill: 50px;
}
```

## Agent prompt examples
- "Create a hero section with a `#330066` background, an H1 in Apercu Pro with 6px letter spacing, and a primary pill button in `#ffa300`."
- "Design a pricing card with a 40px border radius, `#fff2bd` background, and 35px internal padding."
- "Generate an FAQ list where each item has a `#330066` bottom border and uses Apercu Pro 700 for the question text."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific navigation menu transitions were not sampled.
- Dark mode variants were not observed; the system appears strictly light-mode based.