# Soulpageit Design System

> A professional data-science canvas defined by high-contrast emerald actions against clean white surfaces and deep obsidian footers.

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

## TL;DR
Soulpageit utilizes a high-energy emerald primary color `#02ad88` to drive all interactive intent across a predominantly white `#ffffff` and light gray `#f8faf9` layout. The system relies on the geometric clarity of **Poppins** for all structural headings and **Open Sans** for legible, high-density body content. Visual hierarchy is established through a dramatic shift from white content areas to a deep `#191919` footer environment. Components are characterized by a consistent 4px border radius and a preference for 1px solid borders in the primary brand emerald.

## Signature DNA
1. **Emerald Action Layer** (The use of `#02ad88` for buttons, icons, and text highlights creates a singular functional thread across all pages.)
2. **Geometric/Humanist Type Pairing** (The juxtaposition of Poppins weight 600/700 for display and Open Sans for long-form prose balances technical authority with accessibility.)
3. **Obsidian Foundation** (The transition to `#191919` for the footer and "Ready to get Started" sections anchors the brand in a "dark mode" technical aesthetic at the close of every journey.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Primary background, button text | 170 | 0.8 | computed_style |
| `{color.gray.medium}` | `#777777` | Default body text | 95 | 0.8 | computed_style |
| `{color.gray.dark}` | `#242424` | Primary text emphasis | 44 | 0.8 | computed_style |
| `{color.obsidian}` | `#191919` | Footer and CTA band background | 4 | 0.6 | computed_style |
| `{color.canvas.soft}` | `#f8faf9` | Subtle section backgrounds | 8 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#02ad88` | Buttons, borders, active text | 53 | 0.8 | computed_style |
| `{color.accent.blue}` | `#4a7497` | Decorative borders (About page) | 10 | 0.6 | computed_style |
| `{color.accent.mint}` | `#48cb8c` | Alternative button text | 4 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 400, 500, 600, 700 | Headings, buttons, nav | Poppins (Google Fonts) | OFL |
| Open Sans | 300, 400, 500, 700 | Body copy, descriptions | Open Sans (Google Fonts) | OFL |
| Lora | 400 | Secondary body | Lora (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.lg}` | 48px | 72px | normal | 600 | Hero headlines | `h2.kc_title` |
| `{text.display.md}` | 41px | 65.6px | normal | 600 | Page titles | `h1.kc_title` |
| `{text.heading.lg}` | 30px | 48px | normal | 700 | Section headers | `h2.kc_title` |
| `{text.heading.md}` | 24px | 38.4px | normal | 500 | Sub-section titles | `h3.kc_title` |
| `{text.body.lg}` | 18px | 32.4px | normal | 400 | Intro paragraphs | `p` |
| `{text.body.md}` | 16px | 30px | normal | 500 | Navigation links | `a.hvr-underline-from-left1` |
| `{text.body.sm}` | 15px | 27px | normal | 400 | Default body text | `header.main-header` |
| `{text.button}` | 14px | 27px | normal | 400 | CTA labels | `a.kc_button` |

### Principles
1. **Heading weight is functional.** Use 600 for primary display and 700 for section-level emphasis.
2. **Body line-height is generous.** Default body text (15px) uses a 27px line height (1.8x) to ensure readability in dense data-science contexts.
3. **Emerald for interaction.** All text-based CTAs and "Read More" links must use `{color.primary}` (#02ad88).

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 132 |
| `{space.sm}` | 20px | 54 |
| `{space.md}` | 35px | 17 |
| `{space.lg}` | 60px | 14 |
| `{space.xl}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Layout containers, footers | 321 occurrences |
| `{radius.sm}` | 4px | Buttons, cards, inputs | 16 occurrences |
| `{radius.lg}` | 16px | Specific surface containers | 2 occurrences |
| `{radius.pill}` | 50% | Circular icon containers | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgb(128, 128, 128) 0px 0px 5px 0px` | Hovered or featured cards | Card component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions (Contact Us, Schedule a call)
**Pages observed:** Home, About
**Spec:**
- **Background:** `{color.primary}` (#02ad88)
- **Text:** `{color.white}` (#ffffff)
- **Border:** 1px solid `{color.primary}` (#02ad88)
- **Radius:** `{radius.sm}` (4px)
- **Padding:** 10px 20px
- **Typography:** `{text.button}` (14px)
**States observed:** Default | Active: captured

#### Surface
**Role:** Standard content sectioning
**Pages observed:** Home, About
**Spec:**
- **Background:** `{color.white}` (#ffffff)
- **Text:** `{color.gray.medium}` (#777777)
- **Padding:** 60px
- **Radius:** `{radius.none}` (0px)

### Tier 2: Patterns

#### Card
**Role:** Feature highlights and blog previews
**Pages observed:** Home, About
**Spec:**
- **Background:** Transparent or `{color.white}`
- **Border:** 1px solid `{color.primary}` (#02ad88)
- **Radius:** `{radius.sm}` (4px)
- **Shadow:** `{shadow.card}` (on specific instances)
- **Padding:** 6px 19px

#### Footer
**Role:** Global site termination
**Pages observed:** Home, About
**Spec:**
- **Background:** `{color.obsidian}` (#191919)
- **Text:** `{color.gray.medium}` (#777777)
- **Border-top:** 1px solid rgba(255, 255, 255, 0.1)
- **Typography:** 15px Poppins

### Tier 3: Surface-specific

#### Icon Plate
**Role:** Social links and decorative indicators
**Pages observed:** Home, About
**Spec:**
- **Background:** Transparent
- **Border:** 1px solid `#858585`
- **Radius:** `{radius.pill}` (50%)
- **Padding:** 0px 0px 10px

#### Ghost Button
**Role:** Secondary actions (Free AI Consultation)
**Pages observed:** Home, About
**Spec:**
- **Background:** Transparent
- **Text:** `{color.white}` (#ffffff)
- **Border:** 1px solid `{color.primary}` (#02ad88)
- **Radius:** `{radius.sm}` (4px)
- **Padding:** 8px 35px

## Layout
| Property | Value |
|---|---|
| Section Padding (Vertical) | 80px - 105px |
| Content Max-Width | ~1170px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px-20px |
| Desktop | 1440px | Multi-column grids (3-up or 4-up) for "Our Customers" and "Resource Center" |

## Do's
- Use `#02ad88` for all primary CTA backgrounds.
- Pair Poppins (headings) with Open Sans (body) for all content-heavy sections.
- Apply a 4px border radius to all interactive elements.
- Maintain a 1.8x line-height ratio for body text to ensure readability.
- Use `#191919` for full-width footer backgrounds.

## Don'ts
- **Wrong:** Using `#4a7497` (Accent Blue) for primary buttons. **Right:** Use `#02ad88`. **Reason:** Blue is reserved for decorative borders on the About page.
- **Wrong:** Applying sharp 0px corners to buttons. **Right:** Use 4px. **Reason:** The brand identity uses soft geometric rounding for interactivity.
- **Wrong:** Using Poppins for long-form body paragraphs. **Right:** Use Open Sans. **Reason:** Open Sans is the designated body face for legibility.

## Similar brands
- Thoughtworks
- Databricks
- Palantir (Foundry)
- Teradata

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #02ad88;
  --color-obsidian: #191919;
  --color-gray-text: #777777;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-standard: 4px;
}
```

## Agent prompt examples
- "Generate a primary button using Soulpageit brand tokens: background #02ad88, text #ffffff, 4px border radius, and Poppins 14px font."
- "Create a feature card with a 1px emerald border (#02ad88), 4px radius, and Poppins weight 600 for the title."
- "Design a footer section with background #191919 and text color #777777 using Open Sans 15px."

## Known gaps
- Hover state transitions were not explicitly captured in the token data.
- Mobile-specific font size overrides for display headings were not fully mapped.
- Form validation states (success/error) were not present in the analyzed pages.

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