# Capabilia Design System

> High-contrast academic precision anchored by a vibrant emerald primary and deep obsidian surfaces.

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

## TL;DR
Capabilia utilizes a "monochrome-plus-one" strategy where a high-voltage emerald green (#00a667) punctuates a strictly achromatic foundation of pure black (#000000) and off-white (#f5f6f6). The system relies on heavy geometric typography, specifically Montserrat, often deployed at extreme scales (up to 200px) with generous letter spacing to create an "institutional-modern" feel. Layouts alternate between light canvas sections and dark-mode "Obsidian" bands, using sharp 0px corners for structural containers and soft 50px pills for interactive elements like inputs.

## Signature DNA
1. **The Emerald Pulse** (#00a667 is the exclusive chromatic signal, used for links, hover states, and primary brand markers across all pages).
2. **Extreme Type Scale** (Display headings reach 200px with +10px tracking, creating a structural rather than just textual presence).
3. **Obsidian Banding** (Frequent use of #1e2222 and #000000 full-width sections to create high-contrast rhythmic breaks in the scrolling experience).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Capabilia (Parent) | #00a667 | Concentric circles / Geometric overlays | - | - |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.obsidian}` | `#000000` | Primary text, high-contrast backgrounds | 9 | 1.0 | `--wp--preset--color--black` |
| `{color.cinder}` | `#1e2222` | Headings (H1-H6), dark section backgrounds | 3 | 1.0 | `--thegem-to-h1-color` |
| `{color.canvas}` | `#f5f6f6` | Page background, input surfaces | 2 | 1.0 | `--thegem-to-menu-level3-bg-color` |
| `{color.white}` | `#ffffff` | Navigation background, primary button text | - | 1.0 | `--main-bg-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#00a667` | Links, hover states, pagination active | 4 | 1.0 | `--thegem-to-link-color` |
| `{color.accent-alt}` | `#51bd8c` | Active menu items, secondary accents | - | 1.0 | `--thegem-to-menu-level1-active-color` |
| `{color.decorative}` | `#3c3950` | Decorative titles, breadcrumbs (decorative_only) | 2 | 1.0 | `--thegem-to-product-title-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 400, 500 | Display, Body, UI | Montserrat (Google Fonts) | OFL |
| Jura | 600 | Buttons, Small labels | Jura (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-xl}` | 200px | 160px | 10px | 400 | Hero Display | `div.title-xlarge` |
| `{type.display-lg}` | 80px | 92px | normal | 400 | Section Headers | `span:nth-of-type(1)` |
| `{type.display-md}` | 80px | 90px | 4px | 400 | H1 Page Titles | `div.title-h1` |
| `{type.body-lg}` | 18px | 30px | normal | 500 | Primary Body | `span.jCAhz` |
| `{type.input}` | 18px | 500px | normal | 500 | Form Inputs | `input.search-field` |
| `{type.button}` | 14px | 50px | normal | 600 | CTA Buttons | `button.gem-button` |
| `{type.caption}` | 12px | 1.4 | 0.96px | 600 | Badges/Labels | Not captured in source |
| `{type.nav}` | 15px | 1.4 | 0 | 500 | Main Navigation | Not captured in source |

### Principles
1. **Display Tracking:** Larger display sizes (200px) require extreme positive letter spacing (+10px) to maintain the brand's "airy" institutional feel.
2. **Achromatic Hierarchy:** Body text is strictly `#000000`, while headings use the slightly softer `#1e2222` Obsidian.
3. **Montserrat Dominance:** Montserrat is used for 90% of the interface; Jura is reserved strictly for high-density button labels.

## Spacing
**Base unit:** 4px (Inferred from standard grid alignments)
Table: Not captured in source

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, cards, image frames | 20+ occurrences |
| `{radius.pill}` | 50px | Search inputs, primary buttons | Component: Text Input |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elevation.flat}` | none | All cards and sections | 0px radius containers |

## Components

### Tier 1: Foundational

#### Text Input
**Role:** Search and lead capture
**Pages observed:** /pricing, /about
**Spec:** Background: `#f5f6f6` | Text: `#3c3950` | Border: 1px `#e8e8e8` | Radius: 50px | Padding: 0 50px 0 25px | Typography: 18px Montserrat
**States observed:** Default: Captured | Hover: Not captured

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://capabilia.org
**Spec:** Background: `#1e2222` | Text: `#ffffff` | Radius: 0px | Typography: 14px Jura (600)
**States observed:** Default: Captured | Hover: `#00a667` (from `--thegem-to-button-basic-color-hover`)

### Tier 2: Patterns

#### Accordion (Strategy)
**Role:** Content chunking in "Modelo End-to-End"
**Pages observed:** https://capabilia.org
**Spec:** Header Background: `#00a667` | Header Text: `#ffffff` | Body Background: `#ffffff` | Radius: 0px
**States observed:** Active: Captured | Default: Not captured

#### Feature Card (Dark)
**Role:** Value proposition highlights
**Pages observed:** https://capabilia.org
**Spec:** Background: `#1e2222` | Text: `#ffffff` | Border: None | Radius: 0px
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 80px - 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Display type scales down significantly. |
| Desktop | 1440px | Full horizontal menu; Multi-column grid (3-up or 4-up). |

## Imagery & decoration
Capabilia uses concentric circle line-art (thin grey strokes) as a background motif to suggest "impact" or "resonance." Photography is often treated with dark overlays or high-contrast grayscale to ensure text legibility in hero sections.

## Do's
- Use `#00a667` for all interactive hover states.
- Set display headings (H1) with at least 4px letter spacing.
- Alternate between `#ffffff` and `#f5f6f6` for light section backgrounds.
- Keep all structural containers at 0px border radius.
- Use Montserrat 500 for primary body copy.

## Don'ts
- **Wrong:** Using `#ff6900` (Vivid Orange) for primary CTAs. **Right:** Use `#1e2222` or `#00a667`. **Reason:** Orange is a legacy WP token, not the Capabilia brand primary.
- **Wrong:** Applying rounded corners to feature cards. **Right:** Keep corners at 0px. **Reason:** The brand identity is built on sharp, geometric precision.
- **Wrong:** Using Montserrat for buttons. **Right:** Use Jura 600. **Reason:** Jura provides the necessary "technical" contrast for micro-copy.
- Do not use shadows on cards; the brand is strictly flat.
- Do not use `#00a667` for large background areas; it is an accent only.

## Similar brands
- Coursera (Academic, clean)
- MasterClass (High-contrast, dark-mode sections)
- EdX (Institutional, sans-serif heavy)

## Quick start

### CSS Variables
```css
:root {
  --color-primary: #00a667;
  --color-obsidian: #000000;
  --color-cinder: #1e2222;
  --color-canvas: #f5f6f6;
  --font-main: 'Montserrat', sans-serif;
  --font-accent: 'Jura', sans-serif;
  --radius-sharp: 0px;
  --radius-pill: 50px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #00a667;
  --color-obsidian: #000000;
  --color-cinder: #1e2222;
  --color-canvas: #f5f6f6;
  --font-montserrat: 'Montserrat';
  --font-jura: 'Jura';
}
```

## Agent prompt examples
- "Create a hero section for Capabilia using a #1e2222 background, a 200px Montserrat heading with 10px letter-spacing, and a sharp-edged primary button."
- "Design a search bar component with a #f5f6f6 background and 50px border radius, using 18px Montserrat text."
- "Generate a feature grid where cards have 0px radius and use #00a667 strictly for icon accents and link hovers."

## Known gaps
- Spacing scale tokens were not explicitly declared in the CSS variables; values are inferred from rendered layouts.
- Success/Error semantic colors were not observed in the analyzed pages.
- Hover states for secondary buttons were not captured in the source evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://capabilia.org | Desktop 1440 | 2026-06-06 |
| Pricing | https://capabilia.org/pricing | Desktop 1440 | 2026-06-06 |
| About | https://capabilia.org/about | Desktop 1440 | 2026-06-06 |