# Humanitix Design System

> High-impact social enterprise ticketing anchored by warm peach accents, heavy black Satoshi typography, and rounded geometric containers.

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

## TL;DR
Humanitix utilizes a high-contrast "monochrome-plus-one" system where a primary peach accent `#ffb08f` punctuates a foundation of deep carbon `#1b1b1b` and pure white `#ffffff`. The typography is dominated by **Satoshi**, specifically leveraging a "Display Black" weight (900) for hero headlines to create a sense of grounded authority. Layouts rely on generous 88px section padding and a mix of sharp and rounded (12px to 36px) corners. The visual language balances the professionalism of a SaaS platform with the warmth of a non-profit through soft-tinted surfaces like `#f5f0ee` and `#ffdbcc`.

## Signature DNA
1. **The Peach Pulse:** Use of `#ffb08f` as the singular chromatic driver for primary CTAs, progress bars (`--bprogress-color`), and decorative flourishes (arrows/stars), often paired with black text for legibility.
2. **Heavyweight Satoshi:** Headlines are consistently set in Satoshi at weight 900, creating a "blocky" and impactful information hierarchy that feels stable and modern.
3. **Hybrid Radii:** A systematic mix of tight 4px-12px radii for functional UI components (cards/inputs) contrasted against 36px "pill-lite" corners for brand-heavy hero elements.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.ink}` | `#1b1b1b` | Primary text, high-contrast borders | 197 | 1.0 | `--text-high` |
| `{color.canvas}` | `#ffffff` | Page background, card surfaces | 152 | 1.0 | `--cc-bg` |
| `{color.carbon}` | `#151414` | Secondary text, button labels | 70 | 0.8 | Computed |
| `{color.sand}` | `#f5f0ee` | Subtle section backgrounds (About) | 1 | 1.0 | `--beige-low-default` |
| `{color.charcoal}` | `#363338` | Dark mode surfaces, footer bands | 8 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#ffb08f` | Primary CTA bg, progress bars, accents | 20 | 1.0 | `--bprogress-color` |
| `{color.primary.soft}` | `#ffdbcc` | Hover states, secondary borders | 5 | 0.6 | Computed |
| `{color.link}` | `#0000ee` | Legacy inline text links | 22 | 0.8 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Satoshi | 400, 500, 600, 700, 900 | All headlines, body, and UI | Inter (Google Fonts) | Proprietary (Fontshare) |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 42px | 50.4px | normal | 900 | Main Hero H1 | `h1.sc-225c3114-0` |
| `{type.h2}` | 36px | 44px | normal | 700 | Section Headers | `h2.sc-c84e897f-0` |
| `{type.h4}` | 24px | 30px | normal | 700 | Sub-section titles | `h4.sc-6b6a9ec4-0` |
| `{type.h5}` | 20px | 28px | normal | 700 | Card titles | `h5.sc-1df5379f-0` |
| `{type.body.lg}` | 18px | 21.6px | normal | 500 | Intro paragraphs | `p.sc-1747ba4d-0` |
| `{type.body}` | 16px | 19.2px | normal | 500 | Default body text | `span:nth-of-type(1)` |
| `{type.body.sm}` | 14px | 16.8px | normal | 500 | UI labels, secondary text | `section.sc-386fb36e-0` |
| `{type.caption}` | 12px | 14.7px | normal | 500 | Footer links, small notes | `a.sc-b84df00d-0` |

### Principles
1. **Weight as Hierarchy:** Jump from 500 (body) to 900 (display) to create immediate visual impact.
2. **Tight Line Heights:** Most display and heading styles use a 1.2x multiplier (e.g., 42px/50.4px) to keep heavy type compact.
3. **No Letter Spacing:** Satoshi is consistently set at `normal` tracking across all observed sizes.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 95 |
| `{space.sm}` | 12px | 19 |
| `{space.md}` | 16px | 58 |
| `{space.lg}` | 24px | 16 |
| `{space.section}` | 88px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, full-width bands | 331 occurrences |
| `{radius.sm}` | 4px | Pricing cards, small inputs | Pricing page cards |
| `{radius.md}` | 12px | Feature cards, category tiles | Homepage "Nearby" cards |
| `{radius.lg}` | 36px | Primary buttons, hero image containers | Hero "Read More" button |
| `{radius.full}` | 100px | Avatars, circular icons | About page surfaces |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(50, 41, 61, 0.13) 0px 8px 16px 0px` | Pricing tier cards | Pricing page |
| `{shadow.overlay}` | `rgba(0, 0, 0, 0.25) 0px 8px 32px 0px` | Modals and dropdowns | Global UI |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{color.primary}` (#ffb08f) | Text `{color.carbon}` (#151414) | Radius 36px | Padding 10px 24px | Type Satoshi 700
**States observed:** Default | Hover (darker tint) | Active: captured

#### Ghost Button
**Role:** Secondary actions
**Pages observed:** Homepage, Pricing
**Spec:** Background transparent | Text `{color.ink}` (#1b1b1b) | Border 1px `{color.ink}` | Radius 36px
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Category Card
**Role:** Navigation by event type
**Pages observed:** Homepage
**Spec:** Background `{color.canvas}` (#ffffff) | Border 1px `rgba(27, 27, 27, 0.14)` | Radius 12px | Padding 16px
**States observed:** Default | Hover (subtle shadow): captured

#### Pricing Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background `{color.canvas}` (#ffffff) | Border 8px `{color.primary.soft}` (#ffdbcc) | Radius 4px | Shadow `{shadow.card}`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Search Bar
**Role:** Global event discovery
**Pages observed:** Homepage, Mobile
**Spec:** Background `#f7f7f7` | Radius 100px | Padding 12px 20px | Icon `{color.ink}`
**States observed:** Default | Focus: captured

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** Pricing
**Spec:** Background transparent | Border-bottom 1px `{color.ink}` | Typography Satoshi 600 16px
**States observed:** Default | Expanded: captured

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

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Search bar expands to full width; Nav menu collapses to hamburger; Section padding reduces to 40px. |
| Desktop | 1440px | 12-column grid; Horizontal nav visible. |

## Imagery & decoration
- **Hand-drawn accents:** Uses peach-colored (`#ffb08f`) sketched arrows and asterisks to highlight key text.
- **Polaroid Motif:** Event images often feature a "clothespin and polaroid" border style on the homepage hero.
- **High-Saturation Photography:** Real-world event photography with high contrast, often featuring people and crowds.

## Do's
- Use Satoshi 900 for all H1 and H2 headlines to maintain brand weight.
- Apply `#ffb08f` to the primary action on every page.
- Use 88px vertical spacing between major content sections.
- Pair `#ffb08f` surfaces with `#151414` text for optimal brand-compliant legibility.
- Use 12px radius for standard UI cards.

## Don'ts
- **Wrong:** Using `#0000ee` for primary buttons. **Right:** Use `#ffb08f`. **Reason:** Blue is reserved for legacy text links, not primary actions.
- **Wrong:** Setting display type at weight 400. **Right:** Use 900. **Reason:** The brand identity relies on the "heavy" display look.
- **Wrong:** Using sharp 0px corners for buttons. **Right:** Use 36px. **Reason:** Buttons must remain rounded to contrast with the sharp grid.

## Quick start

### CSS Variables
```css
:root {
  --color-primary: #ffb08f;
  --color-primary-soft: #ffdbcc;
  --color-ink: #1b1b1b;
  --color-canvas: #ffffff;
  --font-main: 'Satoshi', sans-serif;
  --radius-md: 12px;
  --radius-lg: 36px;
  --shadow-card: 0px 8px 16px 0px rgba(50, 41, 61, 0.13);
}
```

## Agent prompt examples
- "Create a primary CTA button using the Humanitix style: peach background #ffb08f, dark text #151414, 36px border radius, and Satoshi Bold font."
- "Design a feature card with a white background, 12px border radius, and a 1px border using #1b1b1b at 14% opacity."
- "Generate a section header using Satoshi Black (900) at 36px with a line height of 44px."

## Known gaps
- Hover states for secondary navigation items were not fully captured in the computed style logs.
- Mobile-specific typography tokens for H1 were inferred from viewport scaling rather than explicit CSS variables.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://humanitix.com | 1440x900 | 2026-06-06 |
| Pricing | https://humanitix.com/pricing | 1440x900 | 2026-06-06 |
| About | https://humanitix.com/about | 1440x900 | 2026-06-06 |