# Sourceknowledge Design System

> High-contrast performance marketing interface anchored by cyan primary actions and heavy Lato typography on stark white and charcoal foundations.

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

## TL;DR
Sourceknowledge utilizes a high-energy "monochrome+" system where a vibrant cyan (`#3cbce5`) serves as the primary functional driver against a high-contrast background of pure white (`#ffffff`) and deep charcoal (`#202020`). The system is characterized by heavy, bold typography using the Lato family, often reaching 700 or 800 weights for display and interactive elements. Visual rhythm is established through sharp 0px corners on most containers, punctuated by specific 3px or pill-shaped (`9999px`) radii for buttons and social elements. A secondary accent palette of yellow (`#efc404`) and teal (`#00c1cf`) is used sparingly for emphasis within text and specific card backgrounds.

## Signature DNA
1. **Cyan Functionalism** (The use of `#3cbce5` as the exclusive color for primary CTAs and active navigation states across all pages.)
2. **Heavy-Weight Lato** (Display type consistently uses Lato at 700 weight with sizes up to 65px, creating a dense, authoritative typographic voice.)
3. **Sharp Geometry** (A default border-radius of 0px for sections and most cards, creating a rigid, professional grid feel.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary canvas, button text, card surfaces | 136 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Primary text, borders, pill button outlines | 42 | 1.0 | `--wp--preset--color--black` |
| `{color.charcoal}` | `#202020` | Footer background, dark mode text | 20 | 0.8 | Computed Style |
| `{color.gray.medium}` | `#797979` | Default body text | 103 | 0.8 | Computed Style |
| `{color.gray.light}` | `#b5b5b5` | Secondary text, muted labels | 40 | 0.8 | Computed Style |
| `{color.off-white}` | `#f4f4f4` | Subtle section backgrounds | 8 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#3cbce5` | Primary buttons, active nav, links | 39 | 0.8 | Computed Style |
| `{color.accent.yellow}` | `#efc404` | Text highlighting, secondary surfaces | 10 | 0.6 | Computed Style |
| `{color.accent.teal}` | `#00c1cf` | Decorative card backgrounds | 8 | 0.6 | Computed Style |
| `{color.accent.pink}` | `#eb46ad` | Decorative only (<5 occurrences) | 3 | 0.6 | Computed Style |
| `{color.accent.green}` | `#0a930c` | Decorative only (<5 occurrences) | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Lato | 400, 500, 700, 800 | Heading, Display, UI | Lato (Google Fonts) | OFL |
| Arial | 400, 500, 700 | Body, Testimonials | System Sans | Standard |
| Montserrat | 500, 700 | Header utility, small labels | Montserrat (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 65px | 92.6px | normal | 700 | Hero H1 | `h1` |
| `{type.display.lg}` | 60px | 65px | normal | 700 | Slide titles | `h2.qodef-slide-title` |
| `{type.display.md}` | 48px | 52.6px | normal | 700 | Page titles | `h1` |
| `{type.heading.lg}` | 36px | 39.5px | normal | 700 | Section heads | `h1.title` |
| `{type.heading.md}` | 34px | 43.6px | normal | 700 | Section subheads | `h2` |
| `{type.heading.sm}` | 22px | 26.4px | normal | 700 | Card titles | `h3` |
| `{type.body.lg}` | 18px | 30px | normal | 400 | Testimonial text | `p.wpsm_testi_description` |
| `{type.body.md}` | 16px | 34px | normal | 500 | Navigation links | `a.no_link` |
| `{type.button.huge}` | 15px | 54px | 1px | 800 | Primary CTAs | `a.qodef-btn.qodef-btn-huge` |
| `{type.caption}` | 10px | 10px | normal | 500 | Utility labels | `div#:0.targetLanguage` |

### Principles
1. **Boldness as Hierarchy**: Weights of 700+ are preferred for all interactive and structural elements.
2. **Generous Line Height**: Display type uses line heights ~1.4x size to maintain readability at scale.
3. **Uppercase Utility**: Montserrat is used in uppercase for header utility links and small labels.

## Spacing
**Base unit:** 4px (approximated from 20px/8px clusters)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 15px | 8 |
| `{space.md}` | 20px | 20 |
| `{space.lg}` | 35px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Default for sections, cards, and inputs | 274 occurrences |
| `{radius.sm}` | 3px | Primary buttons, small UI containers | 43 occurrences |
| `{radius.full}` | 9999px | Social icons, pill buttons, badges | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.flat}` | none | Default for all cards and buttons | Standard component spec |
| `{shadow.soft}` | `rgb(128, 128, 128) 0px 0px 5px 0px` | Rare card hover or focus | `Card` component (2 occurrences) |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary page action (e.g., Get Started)
**Pages observed:** Homepage, About
**Spec:** Background: `#3cbce5` / Text: `#ffffff` / Border: none / Radius: `3px` / Padding: `0px 42px` / Typography: `{type.button.huge}`
**States observed:** Default | Hover: Not captured

#### Pill Button
**Role:** Secondary outline action
**Pages observed:** Homepage, About
**Spec:** Background: `transparent` / Text: `#000000` / Border: `1px solid #000000` / Radius: `9999px` / Padding: `15px` / Typography: `14px/500`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Testimonial Card
**Role:** Social proof display
**Pages observed:** Homepage, About
**Spec:** Background: `#3cbce5` / Text: `#ffffff` / Border: none / Radius: `6px` / Padding: `15px 10px` / Typography: `14px/500`
**States observed:** Default | Active: Not captured

#### Social Link
**Role:** Footer social connectivity
**Pages observed:** Homepage, About
**Spec:** Background: `#0d66c4` (LinkedIn) / Text: `#ffffff` / Border: none / Radius: `9999px` / Padding: `0px` / Typography: `24px/500`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Dark Surface Section
**Role:** Footer or high-contrast content band
**Pages observed:** Homepage, About
**Spec:** Background: `#202020` / Text: `#797979` / Border: none / Radius: `0px` / Padding: `0px` / Typography: `14px/500`
**States observed:** Default

#### Teal Accent Card
**Role:** Decorative or featured content
**Pages observed:** Homepage, About
**Spec:** Background: `#00c1cf` / Text: `#b5b5b5` / Border: `3px solid #00c1cf` / Radius: `50%` / Padding: `0px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1440px (desktop) |
| Section Padding | 14px 0px (vertical) |
| Grid | Multi-column flex for cards |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked card layouts, reduced display type size |
| Desktop | 1440px | Multi-column grids, full-width hero imagery |

## Imagery & decoration
Sourceknowledge uses high-detail photographic backgrounds in hero sections, often overlaid with semi-transparent color washes. Decorative elements include circular "dots" or badges using the accent palette (`#efc404`, `#00c1cf`) to break the rigid 0px grid.

## Do's
- Use `#3cbce5` for all primary interactive elements.
- Set display headings to Lato 700 with a minimum size of 34px.
- Maintain sharp 0px corners for major layout sections.
- Use `#202020` for footer backgrounds to anchor the page.
- Apply 1px letter spacing to large buttons (`{type.button.huge}`).

## Don'ts
- **Wrong:** Using `#0693e3` (Vivid Cyan Blue) as a primary button background. **Right:** Use `#3cbce5`. **Reason:** `#0693e3` is a WordPress preset token, not the brand's resolved primary.
- Do not use shadows on primary buttons; keep them flat.
- Do not use light weights (300 or below) for headings.
- Do not mix rounded corners (3px) with sharp corners (0px) within the same component group.

## Similar brands
- Taboola
- Outbrain
- DigitalOcean
- LinkedIn (Marketing Solutions)

## Quick start

### CSS Custom Properties
```css
:root {
  --sk-primary: #3cbce5;
  --sk-accent-yellow: #efc404;
  --sk-bg-white: #ffffff;
  --sk-bg-dark: #202020;
  --sk-text-main: #797979;
  --sk-font-heading: 'Lato', sans-serif;
  --sk-radius-sm: 3px;
  --sk-radius-pill: 9999px;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "primary": { "value": "#3cbce5" },
    "foundation": {
      "white": { "value": "#ffffff" },
      "charcoal": { "value": "#202020" }
    }
  },
  "font": {
    "family": { "heading": { "value": "Lato" } }
  }
}
```

## Agent prompt examples
- "Generate a primary CTA button using Sourceknowledge cyan #3cbce5, Lato 800 at 15px, and a 3px border radius."
- "Create a footer section with a #202020 background and #797979 text using 14px Lato."
- "Design a hero H1 heading using Lato 700 at 65px with a line height of 92px."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Specific mobile-only typography tokens were not fully isolated from desktop overrides.
- Form validation (Success/Error) states were not present in the analyzed pages.

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