# Clickboarding Design System

> A high-contrast corporate canvas defined by deep teal anchors, vibrant green accents, and heavy-weight geometric typography.

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

## TL;DR
Clickboarding utilizes a "monochrome-plus" system where a deep primary teal `#007488` provides structural authority, while a vibrant secondary green `#00af53` and its lighter variant `#2ad03d` signal action and momentum. The interface is grounded on a pure white `#ffffff` canvas with a dark charcoal `#212a29` used for high-density body text. Typography is characterized by the use of **Axiforma** in extreme weights—ranging from a delicate 100-weight for sub-headers to a massive 900-weight for display headlines—creating a rhythmic, editorial hierarchy. Components favor a 10px "soft-square" radius for controls and inputs, contrasted by 50px or full-pill radii for larger containers and primary CTAs.

## Signature DNA
1. **Extreme Weight Contrast** (Axiforma is deployed at weight 900 for primary headings and weight 100 for descriptive sub-headers, creating a dramatic vertical rhythm observed on both the Homepage and About page.)
2. **The Teal-Green Pivot** (Primary brand actions use teal `#007488`, while secondary "success" or "growth" oriented actions pivot to green `#00af53` or `#2ad03d`, a dual-chromatic strategy used across all analyzed pages.)
3. **Wavy Section Transitions** (The system avoids straight horizontal dividers, instead using organic, wave-like SVG masks to transition between white and light teal `#e9f8fc` or `#c0dde5` background sections.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--black` | `#212a29` | Primary body text, dark surfaces | 406 | 1 | Computed style |
| `--white-light` | `#ffffff` | Page canvas, button text | 81 | 1 | Computed style |
| `--white` | `#f8f8f8` | Secondary surface, button backgrounds | 75 | 1 | Computed style |
| `--black-light` | `#2c3635` | De-emphasized text | 36 | 1 | Computed style |
| `--white-dark` | `#f1f1f1` | Subtle borders | 5 | 1 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--primary` | `#007488` | Primary CTA bg, headings, borders | 121 | 1 | `--empat_secondary` |
| `--secondary` | `#00af53` | Secondary CTA bg, success indicators | 75 | 1 | Computed style |
| `--secondary-light`| `#2ad03d` | Vibrant green text, button bg | 61 | 1 | Computed style |
| `--grey` | `#79888b` | Tertiary text, labels | 37 | 1 | Computed style |
| `--tertiary-light` | `#e9f8fc` | Section backgrounds, input fills | 20 | 1 | Computed style |
| `--primary-light` | `#099fbd` | Hover states, icon backgrounds | 5 | 1 | Computed style |
| `--tertiary` | `#c0dde5` | Decorative backgrounds | 2 | 0.8 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Axiforma | 100, 300, 400, 700, 900 | Display, Headings, Buttons | Montserrat | Licensed |
| Inter | 300, 400, 700 | Body, Navigation, UI Labels | Inter (Google) | OFL |
| sans-serif | 400 | Fallback body | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 50px | 50px | normal | 300 | Stat numbers | `span.countNumber_count` |
| `{type.h2}` | 40px | 56px | normal | 900 | Section heroes | `h2.elementor-heading-title` |
| `{type.h3}` | 36px | 50.4px | normal | 900 | Feature heads | `h3.elementor-heading-title` |
| `{type.h4}` | 26px | 36.4px | normal | 900 | Card titles | `div.elementor-heading-title` |
| `{type.intro}` | 20px | 34px | normal | 100 | Hero sub-text | `p:nth-of-type(1)` |
| `{type.body-lg}` | 18px | 30.6px | normal | 400 | Lead paragraphs | `div.elementor-heading-title` |
| `{type.body}` | 16px | 25.6px | normal | 400 | General copy | `header.elementor` |
| `{type.button}` | 14px | 14px | normal | 700 | Primary CTAs | `a.button-primary` |
| `{type.caption}` | 12px | 16px | normal | 400 | Icon descriptions| `p.elementor-icon-box-description` |

### Principles
- **Heavyweight Headings:** All primary and secondary headings (h2-h4) must use Axiforma at weight 900.
- **Lightweight Intros:** Hero descriptions and lead-ins utilize Axiforma at weight 100 to provide maximum contrast against heavy titles.
- **Inter for Utility:** Use Inter for all functional UI elements including navigation, form labels, and footer links.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 104 |
| `{space.sm}` | 10px | 34 |
| `{space.md}` | 20px | 90 |
| `{space.lg}` | 40px | 59 |
| `{space.xl}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Navigation, Section bands | 541 occurrences |
| `{radius.md}` | 10px | Cards, Buttons, Inputs | 140 occurrences |
| `{radius.lg}` | 50px | Large containers | 26 occurrences |
| `{radius.pill}` | 9999px | Avatars, decorative circles | 16 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.soft}` | `rgba(33, 42, 41, 0.043) 0px 12px 30px 0px` | Primary buttons, floating cards | Homepage CTAs |
| `{shadow.deep}` | `rgba(33, 42, 41, 0.145) 0px 20px 65px 0px` | Hovered feature cards | About page cards |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and secondary page actions.
**Pages observed:** Homepage, About.
**Spec:** 
- Background: `{colors.primary}` (#007488) or `{colors.secondary}` (#00af53)
- Text: `{colors.white}` (#f8f8f8)
- Radius: `{radius.md}` (10px)
- Padding: 15px 22px
- Typography: `{type.button}` (14px / 700)
- Shadow: `{shadow.soft}`

#### Text Input
**Role:** Lead capture and newsletter forms.
**Pages observed:** Homepage, About.
**Spec:**
- Background: `rgba(233, 248, 252, 0.9)`
- Border: 1px solid `{colors.tertiary-light}` (#e9f8fc)
- Radius: `{radius.md}` (10px)
- Padding: 12px 18px
- Typography: 14px Inter

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific platform benefits or team members.
**Pages observed:** Homepage, About.
**Spec:**
- Background: `{colors.white-light}` (#ffffff)
- Border: 2px solid `{colors.secondary-light}` (#2ad03d)
- Radius: `{radius.md}` (10px)
- Padding: 0px 40px
- Shadow: None (Default) / `{shadow.deep}` (Hover)

#### Navigation
**Role:** Global header menu.
**Pages observed:** Homepage, About.
**Spec:**
- Background: `{colors.black}` (#212a29)
- Text: `{colors.white-light}` (#ffffff)
- Radius: `{radius.none}`
- Padding: 20px 50px
- Typography: 16px Inter

### Tier 3: Surface-specific

#### Impact Card
**Role:** Displaying large statistics or metrics.
**Pages observed:** Homepage.
**Spec:**
- Background: Transparent
- Text: `{colors.primary}` (#007488)
- Radius: 50% (Circle)
- Border: 2px solid `{colors.primary}` (#007488)
- Typography: `{type.display}` (50px / 300)

#### Pill Button (Ghost)
**Role:** Tertiary navigation or "See more" actions.
**Pages observed:** Homepage, About.
**Spec:**
- Background: Transparent
- Text: `{colors.black}` (#212a29)
- Radius: `{radius.pill}` (15984px)
- Padding: 0px
- Typography: 16px Inter

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

## Do's
- Use Axiforma 900 for all section titles to maintain brand authority.
- Apply `{radius.md}` (10px) to all interactive elements like buttons and inputs.
- Use `#007488` (Teal) as the primary anchor for structural UI elements.
- Utilize wavy SVG masks for transitions between major page sections.
- Ensure all primary buttons carry the `{shadow.soft}` elevation.

## Don'ts
- **Wrong:** Using `#00af53` (Green) for primary structural navigation. **Right:** Use Teal `#007488`. **Reason:** Green is reserved for growth/success signals and secondary actions.
- Do not use Axiforma for long-form body text; use Inter 400 for legibility.
- Never use sharp 0px corners on buttons or cards.
- Avoid using pure black `#000000`; use the brand charcoal `#212a29`.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --cb-teal: #007488;
  --cb-green: #00af53;
  --cb-green-light: #2ad03d;
  --cb-charcoal: #212a29;
  --cb-white: #ffffff;
  --cb-radius-md: 10px;
  --cb-shadow-soft: 0px 12px 30px 0px rgba(33, 42, 41, 0.043);
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence, though inferred from standard web patterns.
- Mobile-specific breakpoint values (e.g., 768px vs 1024px) were not present in the CSS variable evidence.
- Error and Warning semantic colors were not captured in the analyzed page samples.