# Goboon Design System

> A vibrant, high-contrast HR tech canvas where deep navy ink meets energetic spring green and amber highlights on a pure white floor.

**Source:** [https://goboon.co](https://goboon.co) | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Goboon utilizes a high-contrast "monochrome-plus" system where a deep navy base (`#0e1c32`) provides professional weight against a pure white background. The brand injects high-voltage energy through two primary action colors: a vibrant spring green (`#1ccb7c`) for primary CTAs and a warm amber (`#ffc107`) for secondary highlights and community-focused accents. Typography is strictly **Roobertpro**, using medium weights (500) for headlines to maintain a friendly yet tech-forward posture. Visual depth is achieved through extremely soft, large-radius shadows (`rgba(102, 85, 217, 0.15)`) and pill-shaped geometry that softens the corporate HR utility.

## Signature DNA
1. **High-Contrast Highlight Strips** (Amber `#ffc107` or Green `#1ccb7c` background strips behind specific keywords like "community" or "diversity" to create an analog "highlighter" effect on digital type).
2. **The Ultra-Pill** (Extreme border-radii of `1440px` applied to buttons, cards, and even large section containers to create a friendly, approachable "bubbly" aesthetic).
3. **Soft Lavender Depth** (The use of a purple-tinted shadow `rgba(102, 85, 217, 0.15)` instead of neutral gray to lift cards, providing a subtle brand "glow").

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.ink}` | `#0e1c32` | Primary text, dark surfaces, and button hover states | 241 | 1 | `--swatch--brand-text` |
| `{color.white}` | `#ffffff` | Page background, primary surface, and button text | 87 | 1 | Computed Style |
| `{color.border.light}` | `#f3f3f3` | Subtle section dividers and card outlines | 81 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.green}` | `#1ccb7c` | Primary CTA background and brand signature color | 10 | 1 | `--swatch--brand` |
| `{color.amber}` | `#ffc107` | Secondary CTA background and highlight accents | 14 | 1 | `--colors--yellow` |
| `{color.blue.dark}` | `#3431ac` | Deep blue decorative surfaces and text | 10 | 1 | `--colors--dark-blue` |
| `{color.blue.light}` | `#e5f2ff` | Soft background washes for cards and badges | 11 | 1 | `--colors--bg-blue` |
| `{color.purple}` | `#6655d8` | Decorative only — used in shadow tints | 2 | 0.6 | `--colors--purple` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| **Roobertpro** | 400, 500, 600, 700 | All headlines, body, and UI labels | Inter | Custom / Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 112px | 145.6px | -3.36px | 500 | Hero Display | `div.u-text-style-display` |
| `{type.display.xl}` | 64px | 74.2px | -1.92px | 500 | Page Headers | `h1.home_hero_heading` |
| `{type.display.lg}` | 56px | 72.8px | -1.68px | 500 | Section Headers | `h2.home_perk_header` |
| `{type.display.md}` | 40px | 44px | normal | 600 | Quote Titles | `p.quote-title` |
| `{type.heading.md}` | 32px | 41.6px | normal | 500 | Sub-section Heads | `div.u-text-style-h4` |
| `{type.heading.sm}` | 24px | 31.2px | normal | 500 | Card Titles | `div.u-text-style-h5` |
| `{type.body.lg}` | 20px | 30px | normal | 500 | Feature Tags | `div.u-text-style-large` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `section.header_4_wrap` |
| `{type.button}` | 16px | 16px | normal | 700 | CTA Labels | `div.btn_main_wrap` |

### Principles
1. **Medium Weight Dominance.** Headlines almost exclusively use weight 500 (Medium) rather than Bold to maintain a modern, approachable feel.
2. **Tight Display Tracking.** As font size increases, letter spacing tightens significantly (up to -3.36px at 112px).
3. **High-Contrast Text.** Primary text always maintains a minimum 17:1 contrast ratio against white backgrounds.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 46 |
| `{space.sm}` | 16px | 32 |
| `{space.md}` | 24px | 56 |
| `{space.lg}` | 32px | 17 |
| `{space.xl}` | 48px | 8 |
| `{space.section}` | 64px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 220 occurrences |
| `{radius.card}` | 20px | Standard feature cards | `20px` |
| `{radius.panel}` | 32px | Large UI panels | `32px` |
| `{radius.pill}` | 1440px | Buttons, badges, and rounded cards | `1440px` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.brand}` | `rgba(102, 85, 217, 0.15) 8px 8px 70px 0px` | Floating feature cards | 75 occurrences |
| `{shadow.soft}` | `rgba(24, 49, 73, 0.2) 0px 6px 10px 0px` | Interactive elements | 18 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Book a Demo")
**Pages observed:** [https://goboon.co](https://goboon.co), [https://goboon.co/about](https://goboon.co/about)
**Spec:** Background `{color.green}` (#1ccb7c) / Text `{color.white}` (#ffffff) / Radius `{radius.pill}` (1440px) / Typography `{type.button}` (16px/700)
**States observed:** Default | Hover: `{color.ink}` (#0e1c32) | Active: Captured

#### Secondary Button
**Role:** Alternative actions (e.g., "Learn More")
**Pages observed:** [https://goboon.co](https://goboon.co)
**Spec:** Background `{color.amber}` (#ffc107) / Text `{color.ink}` (#0e1c32) / Radius `{radius.pill}` (1440px) / Typography `{type.button}` (16px/700)
**States observed:** Default | Hover: Captured | Active: Captured

### Tier 2: Patterns

#### Feature Badge
**Role:** Categorization labels (e.g., "Employee Referrals")
**Pages observed:** [https://goboon.co](https://goboon.co)
**Spec:** Background `{color.blue.light}` (#e5f2ff) / Text `{color.ink}` (#0e1c32) / Radius `{radius.pill}` (1440px) / Padding 16px 18px / Typography `{type.body.lg}` (20px/500)
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Floating Feature Card
**Role:** Benefit and testimonial cards
**Pages observed:** [https://goboon.co](https://goboon.co)
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.border.light}` (#f3f3f3) / Radius `{radius.pill}` (1440px) / Shadow `{shadow.brand}`
**States observed:** Default: Captured

#### Highlighted Text
**Role:** Emphasis on key value propositions
**Pages observed:** [https://goboon.co](https://goboon.co)
**Spec:** Background `{color.amber}` (#ffc107) / Text `{color.ink}` (#0e1c32) / Radius 4px / Padding 0px 4px
**States observed:** Static: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 64px (Vertical) |
| Grid Gutter | 24px |

## Do's
- Use **Roobertpro Medium (500)** for all primary headlines.
- Apply the **1440px pill radius** to all buttons and primary feature cards.
- Use **Amber (#ffc107)** as a background highlight for exactly one keyword in a headline.
- Ensure all body text is set to **Navy (#0e1c32)** on white for maximum legibility.
- Use the **Lavender-tinted shadow** for cards to create brand-aligned depth.

## Don'ts
- **Wrong:** Using a generic gray shadow for cards. **Right:** Use `rgba(102, 85, 217, 0.15)`. **Reason:** The purple tint is a core brand identifier.
- **Wrong:** Setting headlines in Bold (700) by default. **Right:** Use Medium (500). **Reason:** Maintains the friendly, modern aesthetic.
- **Wrong:** Using the sub-brand blue (#2f8cf3) as a primary button color. **Right:** Use Green (#1ccb7c). **Reason:** Green is the reserved color for primary conversion.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --goboon-ink: #0e1c32;
  --goboon-green: #1ccb7c;
  --goboon-amber: #ffc107;
  --goboon-white: #ffffff;
  --goboon-shadow-brand: 8px 8px 70px 0px rgba(102, 85, 217, 0.15);
  --goboon-radius-pill: 1440px;
  --goboon-font-primary: 'Roobertpro', sans-serif;
}
```

## Known gaps
- Form input focus states were not captured in the analyzed pages.
- Mobile navigation transition patterns were not fully documented.
- Error and Success semantic states (e.g., form validation) were not present in the source evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | [https://goboon.co](https://goboon.co) | Desktop 1440 | 2026-06-06 |
| About Page | [https://goboon.co/about](https://goboon.co/about) | Desktop 1440 | 2026-06-06 |
| Homepage (Mobile) | [https://goboon.co](https://goboon.co) | Mobile 390 | 2026-06-06 |