# Crowdz Design System

> Deep midnight canvases anchored by high-contrast crimson actions and geometric Montserrat typography.

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

## TL;DR
Crowdz utilizes a high-contrast, professional aesthetic dominated by a deep midnight navy `#010341` and a vibrant primary red `#cf0000`. The system relies on a "sharp" geometry, with a border-radius of `0px` applied universally to buttons, cards, and containers. Typography is split between **Montserrat** for structured, geometric headings and **Sarabun** for high-legibility body content. Layouts are spacious, often using 50px vertical rhythms and dark-mode hero sections that transition into clean, white foundation surfaces.

## Signature DNA
1. **Midnight Foundation** (The use of `#010341` as a primary brand surface and text color creates a high-authority, financial-tech atmosphere. Observed on `/about` and `/pricing`.)
2. **Sharp-Edge Geometry** (A strict adherence to `0px` radii across all interactive components, rejecting the common SaaS trend of rounded corners. Observed on all analyzed pages.)
3. **Crimson Punctuation** (The use of `#cf0000` is reserved strictly for primary conversion points, providing a high-voltage contrast against both white and midnight backgrounds.)

## Family Map
Not captured in source (no sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text | 141 | 1.0 | Computed style |
| `{color.midnight}` | `#010341` | Hero background, primary text | 49 | 0.8 | Computed style |
| `{color.ink}` | `#333333` | Standard body text | 191 | 0.8 | Computed style |
| `{color.light}` | `#f4f4f4` | Secondary surface background | 11 | 1.0 | CSS variable |
| `{color.gray}` | `#808080` | Borders and muted text | 98 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#cf0000` | Primary CTA background | 20 | 0.8 | Computed style |
| `{color.accent-purple}` | `#8b55e6` | Decorative text / secondary links | 19 | 0.8 | Computed style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--green` | `#28a745` | Success (declared token) |
| `--red` | `#dc3545` | Error (declared token) |
| `--yellow` | `#ffc107` | Warning (declared token) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 300, 400, 500, 600, 700 | Display & Headings | Montserrat (Google Fonts) | OFL |
| Sarabun | 400, 700 | Body & UI Labels | Sarabun (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 40px | 56px | normal | 700 | Main Hero H1 | `h1` |
| `{text.h3}` | 24px | 33.6px | normal | 700 | Section Headings | `h3` |
| `{text.nav-brand}` | 20px | 30px | normal | 300 | Navbar Logo/Brand | `a.navbar-brand` |
| `{text.button-lg}` | 20px | normal | normal | 400 | Large CTA Text | `a.btn2` |
| `{text.subheading}` | 19px | normal | normal | 700 | Feature Subheads | `h3` |
| `{text.body}` | 16px | 22px | normal | 400 | Standard Paragraph | `p` |
| `{text.body-strong}` | 16px | 22px | normal | 700 | Bold Emphasis | `strong` |
| `{text.nav-link}` | 16px | 24px | normal | 300 | Navigation Items | `nav#crowdz-navbar-web` |
| `{text.caption}` | 12px | 22px | normal | 600 | Footer Links | `li#nav_menu-2` |

### Principles
1. **Geometric Headers:** Montserrat is used for all structural hierarchy to maintain a modern, architectural feel.
2. **Light-Weight Navigation:** Navigational elements use Montserrat at weight 300 to prevent visual competition with headings.
3. **High-Contrast Body:** Body text switches to Sarabun for increased legibility in dense content areas.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 62 |
| `{space.sm}` | 15px | 41 |
| `{space.md}` | 20px | 38 |
| `{space.lg}` | 50px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | All buttons, cards, and surfaces | 421 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elev.flat}` | none | All components observed | 0 shadows captured |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Try Now")
**Pages observed:** Homepage, Pricing
**Spec:** Background `{color.primary}` (#cf0000) / Text `{color.white}` (#ffffff) / Border 0px / Radius 0px / Padding 15px-20px / Typography `{text.body}` or `{text.button-lg}`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Top Navigation
**Role:** Global site navigation
**Pages observed:** All pages
**Spec:** Background transparent (on midnight) or `{color.white}` / Text `{color.white}` or `{color.midnight}` / Height 64px (approx) / Typography `{text.nav-link}` (16px / 300)
**States observed:** Default | Active: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or pricing tiers
**Pages observed:** Homepage, Pricing
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.gray}` (#808080) / Radius 0px / Padding 20px
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Pricing Table Header
**Role:** Distinguishing pricing tiers
**Pages observed:** Pricing
**Spec:** Background `{color.midnight}` (#010341) / Text `{color.white}` (#ffffff) / Typography `{text.body-strong}` (16px / 700)
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding | 50px (vertical) |
| Grid Gutter | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Full horizontal navigation, multi-column grids |
| Mobile | 390px | Hamburger menu, single-column stacked cards |

## Imagery & decoration
Crowdz uses a "Midnight Hero" pattern where the top section of the page is flooded with `#010341`. Decorative elements are minimal, limited to simple horizontal lines (e.g., "OUR BEST PERK" label) and high-quality photography of business contexts. The brand avoids rounded corners and soft shadows.

## Do's
- Use `#cf0000` only for the most important action on the page.
- Maintain a strict `0px` border radius on all interactive elements.
- Use Montserrat weight 700 for all H1 and H3 headings.
- Ensure a minimum of 50px vertical spacing between major sections.
- Pair Montserrat headers with Sarabun body text for readability.

## Don'ts
- **Wrong:** Using a rounded button (e.g., 4px radius). **Right:** Use 0px radius. **Reason:** The brand identity is built on sharp, geometric precision.
- **Wrong:** Using `#007bff` (system primary) for buttons. **Right:** Use `#cf0000`. **Reason:** The crimson red is the specific brand signifier for actions.
- **Wrong:** Using Montserrat for long-form body copy. **Right:** Use Sarabun. **Reason:** Sarabun provides better legibility for dense text.

## Similar brands
- Brex (early identity)
- Stripe (typography-first approach)
- Mercury (minimalist fintech aesthetic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-midnight: #010341;
  --color-primary: #cf0000;
  --color-ink: #333333;
  --color-light: #f4f4f4;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Sarabun', sans-serif;
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Crowdz brand specs: #cf0000 background, white text, 0px border radius, and Montserrat 16px font."
- "Design a feature section with a #010341 background and white Montserrat headings at 24px."
- "Generate a pricing card with a 1px #808080 border, 0px radius, and 20px internal padding."

## Known gaps
- Hover and Active states for buttons were not captured in the static analysis.
- Specific mobile breakpoint transitions for typography were not fully detailed in the source.
- Shadow tokens are absent as the brand appears to be entirely flat.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://crowdz.io | 1440px | 2026-06-06 |
| Pricing | https://crowdz.io/pricing | 1440px | 2026-06-06 |
| About | https://crowdz.io/about | 1440px | 2026-06-06 |