# Cybercat.ca Design System

> Organic precision meets editorial structure: deep forest greens and soft sage surfaces anchored by classical serif display type.

**Source:** https://cybercat.ca | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Cybercat.ca utilizes a sophisticated "monochrome-plus" palette where near-black greens `#232b26` provide the structural foundation against a range of desaturated sage and grey surfaces (`#f0f2ed`, `#d8eee1`). The system is defined by a high-contrast typographic pairing: the technical, low-weight **Work Sans** (300-500) handles utility and body, while **Playfair Display** (400) in both upright and italic styles provides an editorial, humanistic display layer. Geometry is notably soft, favoring large 64px radii for primary containers and pill-shaped buttons, creating a tactile, "pebbled" layout rhythm.

## Signature DNA
1. **The Editorial Italic Hero** (Playfair Display Italic at 48px used for emphasis within headings, creating a literary rather than corporate feel).
2. **Deep Green Foundation** (Replacing pure black with `#232b26` for all primary text, borders, and high-impact surfaces to maintain an organic tone).
3. **Hyper-Rounded Containers** (64px corner radii on cards and panels that contrast with the sharp 0px grid of the base canvas).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-scheme-1--text` | `#232b26` | Primary text, dark backgrounds, borders | 162 | 1 | Computed Style |
| `--color-scheme-1--background-white` | `#ffffff` | Primary canvas and card surfaces | 64 | 1 | Computed Style |
| `--color-scheme-1--foreground` | `#f0f2ed` | Secondary surfaces, light grey bands | 16 | 1 | Computed Style |
| `--_primitives---colors--cc-lighter-green` | `#e5f3ea` | Subtle section backgrounds | 4 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--_primitives---colors--cc-light-green` | `#d8eee1` | Decorative surfaces, button backgrounds | 6 | 1 | CSS Variable |
| `--_primitives---colors--cc-green` | `#109748` | High-visibility text accents | 3 | 1 | CSS Variable |
| `--_primitives---colors--cc-foreground` | `#79806e` | Muted borders and secondary strokes | 12 | 1 | CSS Variable |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Playfair Display | 400 | Primary Display (Upright) | Playfair Display | Google Fonts |
| Playfair Display Italic | 400 | Display Emphasis | Playfair Display Italic | Google Fonts |
| Work Sans | 300, 400, 500, 600 | Body, UI, Navigation, Buttons | Work Sans | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.display-lg}` | 48px | 57.6px | normal | 400 | Hero headlines | `h2.heading-style-h2` |
| `{typography.display-italic}` | 48px | 57.6px | normal | 400 | Editorial emphasis | `span.heading-italic` |
| `{typography.heading-md}` | 32px | 41.6px | normal | 400 | Section headers | `h3.heading-style-h4` |
| `{typography.stats-lg}` | 32px | 41.6px | normal | 300 | Numerical data | `div.stats28_number` |
| `{typography.heading-sm}` | 26px | 35.84px | normal | 400 | Sub-section titles | `h3.heading-style-h5` |
| `{typography.body-lg}` | 18px | 26.4px | normal | 300 | Lead paragraphs | `div.banner11_text` |
| `{typography.body-md}` | 16px | 24px | normal | 300 | Default body copy | `header.section_header` |
| `{typography.button}` | 16px | 24px | normal | 400 | CTA labels | `a.button.w-button` |
| `{typography.tag}` | 14px | 21px | normal | 600 | Metadata labels | `div.tag.rounded` |

### Principles
1. **Mixed-Serif Headlines:** Combine upright Playfair Display with its italic variant in the same sentence to highlight key concepts.
2. **Light-Weight Utility:** Use Work Sans at weight 300 for large-scale body text to maintain an airy, modern feel.
3. **Achromatic Hierarchy:** Use `#232b26` for primary actions and `#ffffff` for secondary actions, never using saturated colors for core navigation.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.xs}` | 8px | 33 |
| `{spacing.sm}` | 12px | 10 |
| `{spacing.md}` | 16px | 9 |
| `{spacing.lg}` | 24px | 7 |
| `{spacing.xl}` | 32px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, full-width bands | 101 occurrences |
| `{radius.card-sm}` | 4.8px | Technical cards, blog pills | 12 occurrences |
| `{radius.card-md}` | 19.2px | Feature cards, image containers | 18 occurrences |
| `{radius.pill}` | 64px | Primary buttons, main navigation, large panels | 30 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| Flat | none | All observed components | Evidence shows 0px shadow on all cards |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary call-to-action.
**Pages observed:** https://cybercat.ca
**Spec:** Background: `{color-scheme-1--background-dark}` (#232b26) / Text: `{white}` (#ffffff) / Radius: 64px / Padding: 8px 24px / Typography: Work Sans 16px.
**States observed:** Default | Hover: Not captured.

#### Tag
**Role:** Categorization and status indicators.
**Pages observed:** https://cybercat.ca
**Spec:** Background: `{white}` (#ffffff) with 60% opacity / Text: `{color-scheme-1--text}` (#232b26) / Radius: 64px / Padding: 3.2px 16px / Typography: Work Sans 14px (600).

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting services or statistics.
**Pages observed:** https://cybercat.ca
**Spec:** Background: `{color-scheme-1--foreground}` (#f0f2ed) / Text: `#232b26` / Radius: 19.2px / Padding: 32px / Typography: Work Sans 16px.

#### Statistic Card
**Role:** Displaying quantitative achievements.
**Pages observed:** https://cybercat.ca
**Spec:** Background: `#232b26` / Text: `#ffffff` / Radius: 19.2px / Padding: 0px / Typography: Work Sans 32px (300).

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global site header.
**Pages observed:** https://cybercat.ca
**Spec:** Background: `{white}` (#ffffff) / Border: 1px `#79806e` / Radius: 64px / Padding: 3.2px 8px / Typography: Work Sans 16px.

#### Content Surface
**Role:** Standardized container for text blocks.
**Pages observed:** https://cybercat.ca
**Spec:** Background: `{white}` (#ffffff) / Border: 1px `#eeeeee` / Radius: 4.8px / Padding: 6.4px / Typography: Work Sans 14px.

## Layout
| Property | Value |
|---|---|
| Max content width | ~1200px |
| Section Padding | 80px - 120px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Horizontal navigation, 4-up card grids |
| Mobile | 390px | Vertical stack, hamburger menu, 1-up card grids |

## Imagery & decoration
Cybercat.ca uses high-quality macro photography of organic textures (folded paper, cloth, leaves) in shades of green. These images are always contained within `{radius.card-md}` (19.2px) or `{radius.pill}` (64px) containers. The brand avoids flat illustrations or generic stock photography.

## Do's
- Use `#232b26` for all primary text to maintain the "Dark Green" brand signature.
- Apply `Playfair Display Italic` for exactly one or two words in a headline for emphasis.
- Use the 64px radius for any element that acts as a primary container (Nav, Buttons, Main Panels).
- Maintain a light, airy feel by using `Work Sans` at weight 300 for body copy.
- Use `#f0f2ed` as the primary alternating background color for sections.

## Don'ts
- **Wrong:** Using pure black `#000000` for text. **Right:** Use `#232b26`. **Reason:** Pure black breaks the organic, forest-inspired palette.
- **Wrong:** Using a sub-brand accent color like `#109748` for primary buttons. **Right:** Use `#232b26`. **Reason:** Saturated greens are for accents only; structural elements must be foundation colors.
- **Wrong:** Applying drop shadows to cards. **Right:** Keep cards flat with 1px borders. **Reason:** The brand relies on color blocking and radii for depth, not shadows.
- Do not use bold weights (700+) for display headings; rely on the serif's character at weight 400.
- Do not use sharp corners (0px) for interactive elements.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --cc-dark-green: #232b26;
  --cc-white: #ffffff;
  --cc-sage-light: #f0f2ed;
  --cc-border-muted: #79806e;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Work Sans', sans-serif;
  --radius-pill: 64px;
  --radius-card: 19.2px;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-primary: #232b26;
  --color-surface: #f0f2ed;
  --font-display: "Playfair Display";
  --font-sans: "Work Sans";
  --radius-pill: 64px;
  --radius-card: 19.2px;
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the initial crawl.
- Success and Error semantic tokens were not present on the analyzed pages.
- Complex form elements (selects, radio groups) were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://cybercat.ca | 1440x900 | 2026-06-06 |
| Mobile Home | https://cybercat.ca | 390x844 | 2026-06-06 |