# Cappasity Design System

> High-contrast monochrome canvas punctuated by classical serif displays and sharp, utilitarian geometry.

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

## TL;DR
Cappasity employs a stark, achromatic foundation where pure white (#ffffff) and deep obsidian (#191919) create a high-contrast environment for 3D product visualization. The system is characterized by a "digital gallery" aesthetic, utilizing **Georgia** for display headings to evoke a sense of established luxury and **Roboto** or **Avenir** for functional UI. Interactive elements are strictly geometric with 0px border radii, appearing as solid black blocks or thin-stroked outlines. A singular functional accent, Luminous Green (#40c4a9), is reserved for high-priority conversion points on the pricing layer.

## Signature DNA
1. **The Gallery Serif** (Georgia at 46px/26px is used for all narrative storytelling and section headers, contrasting against technical 3D content. Observed on Homepage and About pages.)
2. **Achromatic Utility** (The primary interface is restricted to #ffffff, #191919, and #484848, ensuring the brand identity never competes with the colors of the 3D assets being showcased.)
3. **Sharp Edge Geometry** (A universal 0px border radius policy for buttons, cards, and input fields, creating a precise, architectural feel. Observed across all analyzed pages.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, brand icons | 97 | 1.0 | `--wp--preset--color--black` |
| `{color.white}` | `#ffffff` | Page background, button text | 28 | 1.0 | `--wp--preset--color--white` |
| `{color.obsidian}` | `#191919` | Primary CTAs, dark section backgrounds | 249 | 0.8 | Computed Style |
| `{color.charcoal}` | `#484848` | Secondary body text | 410 | 0.8 | Computed Style |
| `{color.ash}` | `#c5c5c5` | Muted labels, placeholder text | 97 | 0.8 | Computed Style |
| `{color.smoke}` | `#f5f5f5` | Subtle section backgrounds | 18 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.mint}` | `#40c4a9` | Pricing CTAs, success indicators | 8 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Georgia | 400 | Display, Section Headers | Source Serif 4 | System Serif |
| Roboto | 300, 400, 700 | UI, Technical Body, Buttons | Roboto (Google Fonts) | Apache 2.0 |
| Avenir | 400, 700, 900 | Navigation, Metadata, Captions | Montserrat | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 46px | 57.96px | normal | 400 | Hero H1 | `h1` |
| `{type.h1-ui}` | 36px | 43px | 0.2px | 700 | UI Page Titles | `h1.MuiTypography-root` |
| `{type.h2}` | 26px | 46.02px | normal | 400 | Section Headers | `h2.column-grid__title` |
| `{type.h3}` | 24px | 39.12px | normal | 400 | Card Titles | `div.carousel-item-title` |
| `{type.body}` | 16px | 19px | 0.2px | 400 | Standard Body | `button.MuiButtonBase-root` |
| `{type.body-sm}` | 14px | 29.96px | 1.11px | 400 | Running Text | `p:nth-of-type(1)` |
| `{type.nav}` | 14px | 21px | normal | 400 | Header Menu | `header.header` |
| `{type.caption}` | 12px | 24px | 1px | 400 | Small Metadata | `li:nth-of-type(1)` |
| `{type.button}` | 11px | 45px | 1.8px | 900 | Primary CTA Labels | `a.button.post-content__button` |

### Principles
1. **Serif for Narrative:** Use Georgia for any copy that describes "vision," "story," or "brand."
2. **Sans-Serif for Action:** Use Roboto or Avenir for all interactive components and technical specs.
3. **Wide Tracking on Small Caps:** Captions and button labels at 10-12px use expanded letter spacing (1.2px to 2px) for legibility and a premium feel.

## Spacing
**Base unit:** 10px (derived from high occurrence)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 232 |
| `{space.sm}` | 20px | 101 |
| `{space.md}` | 30px | 105 |
| `{space.lg}` | 40px | 73 |
| `{space.xl}` | 60px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Buttons, Cards, Sections | 785 occurrences |
| `{radius.sm}` | 2px | Form Inputs, Pricing Buttons | 17 occurrences |
| `{radius.full}` | 50px | Avatar/Icon Backdrops | 25 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.flat}` | none | Default state for all cards | Standard across pages |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.05) 0px 0px 15px 0px` | Hovered cards, floating surfaces | 67 occurrences |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.05) 0px 0px 20px 0px` | Modals, dropdowns | 2 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** Homepage, About
**Spec:** Background `{color.obsidian}` (#191919) | Text `{color.white}` (#ffffff) | Radius `{radius.none}` (0px) | Padding 0px 19px | Typography `{type.button}` (11px/900)
**States observed:** Default | Hover | Active: captured

#### Outline Button
**Role:** Secondary action
**Pages observed:** Homepage, Pricing
**Spec:** Background transparent | Text `{color.obsidian}` (#191919) | Border 1px solid `{color.obsidian}` | Radius `{radius.none}` (0px) | Padding 0px 19px
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform capabilities
**Pages observed:** Homepage, About
**Spec:** Background transparent | Text `{color.charcoal}` (#484848) | Shadow `{shadow.soft}` on hover | Padding 40px 20px 30px
**States observed:** Default | Hover: captured

#### Testimonial Circle
**Role:** Social proof
**Pages observed:** Homepage, Pricing
**Spec:** Background `{color.obsidian}` (#191919) | Radius `{radius.full}` (50px) | Text `{color.white}` (#ffffff) | Size 100px x 100px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background `{color.white}` (#ffffff) | Border 1px solid `{color.ash}` (#c5c5c5) | Radius `{radius.none}` (0px) | Padding 40px 30px
**States observed:** Default: captured

#### Accent Button (Pricing)
**Role:** High-conversion CTA
**Pages observed:** Pricing
**Spec:** Background `{color.mint}` (#40c4a9) | Text `{color.white}` (#ffffff) | Radius `{radius.sm}` (2px) | Typography 16px/700
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1170px |
| Section Gutter | 100px |
| Grid Columns | 12 |

## Do's
- Use **Georgia** for all H1 and H2 narrative headers to maintain the "Gallery" feel.
- Keep all button corners at **0px** unless specifically on the Pricing page.
- Use **#191919** for primary buttons, never pure black #000000.
- Ensure **1.8px letter spacing** is applied to all uppercase button labels.
- Maintain a minimum of **100px** vertical spacing between major homepage sections.

## Don'ts
- **Wrong:** Using `{color.mint}` (#40c4a9) as a primary brand header color. **Right:** Use `{color.black}`. **Reason:** Mint is a functional utility color for pricing, not a brand identity color.
- Do not use rounded corners on cards; the brand DNA is strictly rectilinear.
- Do not use Georgia for body text; it is reserved for display roles only.
- Do not apply shadows to buttons; they must remain flat and architectural.

## Quick start

```css
:root {
  --cap-black: #000000;
  --cap-white: #ffffff;
  --cap-obsidian: #191919;
  --cap-charcoal: #484848;
  --cap-mint: #40c4a9;
  
  --cap-font-display: "Georgia", serif;
  --cap-font-ui: "Roboto", sans-serif;
  
  --cap-radius-none: 0px;
  --cap-shadow-soft: rgba(0, 0, 0, 0.05) 0px 0px 15px 0px;
}
```

## Agent prompt examples
- "Create a hero section with a 46px Georgia header in #000000 and a primary button using #191919 with 0px border radius."
- "Design a 3-column feature grid where each card has a 0px border radius and applies a 15px soft shadow only on hover."
- "Generate a pricing table using #ffffff cards, 1px #c5c5c5 borders, and a primary CTA in #40c4a9."

## Known gaps
- Mobile-specific navigation transitions were not fully captured in the trace.
- Hover state color shifts for the Mint (#40c4a9) button were not explicitly defined in the CSS evidence.
- The specific font-face source for "Avenir" was not captured; system-local fallback is assumed.