# Cankado Design System

> Clinical precision meets digital healthcare through a high-contrast emerald and mint interface.

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

## TL;DR
Cankado utilizes a medical-grade aesthetic defined by a primary emerald green (`#0d936a`) and a soft mint accent (`#e5fff7`). The system is built on a foundation of pure white surfaces and high-contrast black text, ensuring legibility for healthcare users. Typography is a functional pairing of Poppins for structured headings and Roboto for interactive UI elements and body text. The interface relies on sharp geometry (0px radii) for containers, contrasted with subtle 3px-5px rounding on interactive inputs and buttons.

## Signature DNA
1. **Emerald Primary Action** (The deep green `#0d936a` is used exclusively for primary conversion points and critical UI borders across all analyzed pages).
2. **Mint Surface Wash** (A very light mint `#e5fff7` acts as a secondary surface color to group related content without the harshness of a full border).
3. **Sharp/Soft Contrast** (The system uses `0px` sharp corners for major layout containers and "Surface" elements, while reserving `3px-5px` radii specifically for interactive components like buttons and inputs).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary page background, button text | 33 | 1.0 | `--bs-body-bg` |
| `{color.black}` | `#000000` | Primary text, translucent overlays | 105 | 1.0 | `--bs-black` |
| `{color.gray.muted}` | `#78777e` | Secondary body text | 9 | 0.6 | Computed Style |
| `{color.gray.border}` | `#c6c5c5` | Default hairline dividers | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#0d936a` | Primary buttons, active borders | 21 | 0.8 | Computed Style |
| `{color.surface.mint}` | `#e5fff7` | Section backgrounds, notification cards | 3 | 1.0 | Computed Style |
| `{color.info.blue}` | `#2196f3` | Text links and informational icons | 6 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{color.success}` | `#198754` | Success states (inherited from Bootstrap) |
| `{color.error}` | `#dc3545` | Error validation (inherited from Bootstrap) |
| `{color.warning}` | `#ffc107` | Warning alerts (inherited from Bootstrap) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|--------|
| Poppins | 300, 400, 500, 600 | Headings, sub-titles, labels | Poppins (Google Fonts) | OFL |
| Roboto | 500 | UI Buttons, notifications | Roboto (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 32px | 500px | 1.28px | 600 | Main Page Title | `div.title` |
| `{type.h4}` | 24px | 28.8px | normal | 500 | Section Heading | `h4` |
| `{type.subtitle}` | 18px | 27px | 0.72px | 500 | Hero Sub-text | `div.sub-title` |
| `{type.button.lg}` | 16px | 21px | normal | 500 | Primary Action | `button.btn-5.w-100` |
| `{type.body.sm}` | 15px | 22.5px | normal | 500 | Links | `a.forgot_link` |
| `{type.label}` | 14px | 21px | normal | 500 | App Name/Labels | `span.app.name` |
| `{type.input}` | 14px | 21px | 1px | 400 | Form Inputs | `input.input-5` |
| `{type.caption}` | 14px | 21px | normal | 300 | Muted metadata | `div.lang-activator` |

### Principles
1. **Heading Tracking:** Larger Poppins headings use positive letter spacing (up to 1.28px) to maintain airiness.
2. **Functional Roboto:** Roboto is reserved for high-utility moments: buttons, notifications, and technical UI.
3. **Weight Restraint:** The system avoids "Bold" (700), peaking at "Semi-bold" (600) for titles to maintain a clinical feel.

## Spacing
**Base unit:** 4px (variable)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xxs}` | 4px | 3 |
| `{space.xs}` | 8px | 24 |
| `{space.sm}` | 12px | 6 |
| `{space.md}` | 16px | 3 |
| `{space.lg}` | 24px | 6 |
| `{space.xl}` | 50px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|------|----------|
| `{radius.none}` | 0px | Main surfaces, inputs, text fields | 111 occurrences |
| `{radius.sm}` | 3px | Primary and Secondary buttons | 12 occurrences |
| `{radius.md}` | 4px | Content cards | 6 occurrences |
| `{radius.lg}` | 5px | Elevated cards | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|------|----------|
| Flat | 0px | Default surfaces | `border-width: 0px` |
| Floating | `rgba(0, 0, 0, 0.15) 0px 4px 12px 0px` | Notification cards, pricing cards | 6 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background `{color.primary}` (#0d936a) / Text `{color.white}` (#ffffff) / Radius 3px / Padding 7px 20px / Typography Roboto 14px
**States observed:** Default | Active: captured

#### Text Input
**Role:** Form entry
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) / Text `#000000a6` / Border `{color.black}` (#000000) / Radius 0px / Padding 15px
**States observed:** Default | Focus: not captured

### Tier 2: Patterns

#### Card (Elevated)
**Role:** Feature highlighting
**Pages observed:** pricing, about
**Spec:** Background `{color.white}` (#ffffff) / Radius 4px / Shadow `rgba(0, 0, 0, 0.15) 0px 4px 12px 0px`
**States observed:** Default

#### Card (Mint Surface)
**Role:** Subtle grouping
**Pages observed:** pricing, home
**Spec:** Background `{color.surface.mint}` (#e5fff7) / Radius 4px / Padding 12px 22px
**States observed:** Default

### Tier 3: Surface-specific

#### Surface (Sharp)
**Role:** Layout containers
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) / Border `{color.gray.border}` (#c6c5c5) / Radius 0px
**States observed:** Default

#### Overlay Surface
**Role:** Modal backdrops
**Pages observed:** home
**Spec:** Background `rgba(0, 0, 0, 0.45)` / Radius 0px
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max Content Width | Not captured in source |
| Section Padding | 50px |
| Element Gap | 8px - 12px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Buttons expand to `w-100` (full width) |
| Desktop | 1440px | Multi-column card layouts |

## Imagery & decoration
Cankado uses a "monochrome-plus" approach. Visual interest is generated through the contrast of `#0d936a` against white. Decorative elements are limited to functional icons (blue `#2196f3`) and translucent black overlays for focus.

## Do's
- Use `#0d936a` for all primary "Login" or "Submit" actions.
- Pair Poppins 600 with 1.28px letter spacing for main page titles.
- Apply `0px` border radius to all structural layout containers.
- Use `#e5fff7` as a background wash for secondary content blocks.
- Ensure all body text uses Roboto 500 for high legibility.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) for primary buttons. **Right:** Use `#0d936a`. **Reason:** Cankado overrides standard Bootstrap primaries for brand alignment.
- Do not use rounded corners ( > 0px) on text input fields.
- Do not use `#0d936a` for body text; reserve it for interactive elements and borders.
- Avoid using shadows on standard surfaces; reserve shadows for floating notifications.

## Similar brands
- Doctolib
- Zocdoc
- Epic Systems

## Quick start

### CSS Custom Properties
```css
:root {
  --cankado-primary: #0d936a;
  --cankado-surface-mint: #e5fff7;
  --cankado-text-main: #000000;
  --cankado-font-heading: 'Poppins', sans-serif;
  --cankado-font-ui: 'Roboto', sans-serif;
  --cankado-radius-interactive: 3px;
  --cankado-shadow-elevated: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}
```

### Tailwind v4
```javascript
@theme {
  --color-emerald-cankado: #0d936a;
  --color-mint-cankado: #e5fff7;
  --font-poppins: "Poppins", sans-serif;
  --font-roboto: "Roboto", sans-serif;
  --shadow-medical: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
  --radius-button: 3px;
}
```

## Agent prompt examples
- "Generate a login card using Cankado's sharp 0px radius, a white background, and a primary emerald button (#0d936a) with 3px rounding."
- "Create a pricing section with three cards. The center card should have a mint background (#e5fff7) and a medical-grade shadow (0px 4px 12px rgba(0,0,0,0.15))."
- "Code a header using Poppins at weight 600 with 1.28px letter spacing for the title 'Patient Dashboard'."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific navigation transitions were not captured.
- Exact max-width for the main container was not identified in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Homepage | https://cankado.com | 1440x900 | 2026-06-06 |
| Pricing | https://cankado.com/pricing | 1440x900 | 2026-06-06 |
| About | https://cankado.com/about | 390x844 | 2026-06-06 |