# Zwayam Design System

> High-contrast monochrome foundation punctuated by deep navy surfaces and geometric Manrope typography.

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

## TL;DR
Zwayam utilizes a "monochrome plus one" strategy, where the primary canvas is a stark white (#ffffff) with high-contrast black (#000000) or near-black (#171717) text. The system introduces depth through a secondary navy palette (#010c1f, #283d63) used for hero sections and primary interactive surfaces. Typography is anchored by Manrope, heavily utilizing its extra-bold (800) and bold (700) weights for clear information hierarchy. Geometry is varied, ranging from sharp 0px corners on foundational surfaces to ultra-soft 9999px pill radii for CTAs and specific feature badges.

## Signature DNA
1. **The Navy Anchor** (Deep navy #010c1f is used as the primary alternative to white, creating a "dark mode" hero experience that transitions into a clean white content body.)
2. **Manrope Weight Extremes** (The system relies on the contrast between Manrope 800 for display headings and 400 for body text, often skipping intermediate weights to maintain a technical, automated feel.)
3. **Pill-to-Sharp Transition** (Primary actions are strictly pill-shaped `{radii.pill}`, while the main page structure remains sharp `{radii.sharp}`, creating a clear distinction between the container and the interaction.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--background` | `#ffffff` | Primary page canvas and card background | 72 | 1.0 | Computed |
| `--foreground` | `#171717` | Primary body text and button labels | 98 | 1.0 | CSS Variable |
| `--color-black` | `#000000` | High-emphasis headings and footer text | 66 | 1.0 | CSS Variable |
| `--color-zinc-700` | `#4b4b4b` | Secondary text and decorative borders | 12 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-navy-deep` | `#010c1f` | Hero background and primary headings | 7 | 0.6 | Computed |
| `--color-blue-brand` | `#265df5` | Primary button surface and link text | 5 | 0.6 | Computed |
| `--color-navy-soft` | `#283d63` | Secondary surface backgrounds | 4 | 0.6 | Computed |
| `--color-lavender` | `#eeaff5` | Decorative borders (decorative_only) | 7 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Manrope | 400, 500, 600, 700, 800 | Primary Display & UI | Manrope (Google Fonts) | OFL |
| Arial | 400 | Fallback Body | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 36px | 40px | normal | 800 | Main section heads | `h3.text-4xl.font-extrabold` |
| `{text.h2}` | 32px | 36px | normal | 700 | Subsection heads | `h2.text-[#000]` |
| `{text.h2-alt}` | 32px | 52px | -1px | 700 | Hero sub-headlines | `h2.text-[#010C1F]` |
| `{text.button}` | 24px | 32px | normal | 700 | Large CTA text | `button.px-6` |
| `{text.h4}` | 22px | 33px | normal | 800 | Card titles | `h4.text-[22px]` |
| `{text.body-lg}` | 20px | 30px | normal | 600 | Emphasized body | `h3.whitespace-pre-line` |
| `{text.body}` | 16px | 24px | normal | 400 | Standard prose | `section.relative` |
| `{text.caption}` | 14px | 20px | normal | 500 | Small descriptors | `div.itemDesc` |

### Principles
1. **Extrabold Emphasis:** Use weight 800 for all major section entry points to signal a transition in content.
2. **Tight Display Tracking:** Hero headings at 32px use -1px letter spacing to increase visual density.
3. **Achromatic Body:** All long-form text must be #171717 or #4b4b4b; never use brand navy for prose.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 17 |
| `{space.sm}` | 16px | 51 |
| `{space.md}` | 24px | 31 |
| `{space.lg}` | 40px | 16 |
| `{space.xl}` | 96px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Main page sections, footer | 202 occurrences |
| `{radius.md}` | 12px | Feature cards | 17 occurrences |
| `{radius.lg}` | 16px | Testimonial/Content cards | 13 occurrences |
| `{radius.pill}` | 9999px | Primary Buttons, Badges | 15 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.card}` | 0px 10px 15px -3px rgba(0,0,0,0.1) | Floating UI cards | 12 occurrences |
| `{shadow.glow}` | 0px 3px 10.1px 0px rgb(127,177,194) | Active state/Featured cards | 5 occurrences |

## Components

### Tier 1: Foundational

#### Surface
**Role:** Base container for all page content.
**Pages observed:** All
**Spec:** Background #ffffff / Text #171717 / Border 0px / Radius 0px
**States observed:** Default: captured

#### Text Input
**Role:** Lead generation and contact forms.
**Pages observed:** https://zwayam.com
**Spec:** Background #ffffff / Text #171717 / Border 1px #4b4b4b / Radius 5px / Padding 12px
**States observed:** Default: captured | Focus: not captured

### Tier 2: Patterns

#### Primary Button
**Role:** Main call to action (Request Demo).
**Pages observed:** All
**Spec:** Background #265df5 / Text #ffffff / Radius 9999px / Padding 8px 20px / Font Manrope 700
**States observed:** Default: captured | Hover: not captured

#### Feature Card
**Role:** Displaying solution highlights.
**Pages observed:** https://zwayam.com/about
**Spec:** Background #ffffff / Text #171717 / Radius 16px / Shadow {shadow.glow} / Padding 16px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site navigation and legal.
**Pages observed:** All
**Spec:** Background transparent / Text #171717 / Border-top 1px / Radius 0px / Padding 48px 0px
**States observed:** Default: captured

#### Solution Tab
**Role:** Switching between product views (Hire vs Amplify).
**Pages observed:** https://zwayam.com
**Spec:** Background #ffffff / Text #171717 / Radius 8px / Padding 0px / Font 14px 500
**States observed:** Active: captured (Background #eeaff5)

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1280px |
| Section Gap | 96px |
| Grid | 12-column desktop |

## Do's
- Use Manrope 800 for section headings to maintain brand authority.
- Apply `{radius.pill}` to all interactive buttons.
- Ensure 96px vertical spacing between major content blocks.
- Use #010c1f for high-impact hero backgrounds.
- Maintain a 21:1 contrast ratio for primary text on white.

## Don'ts
- **Wrong:** Using #265df5 for body text. **Right:** Use #171717. **Reason:** Saturated blues are reserved for actions and accents only.
- **Wrong:** Rounding section containers. **Right:** Keep sections sharp (0px). **Reason:** The brand uses sharp containers to ground the "automated" identity.
- **Wrong:** Mixing Manrope with other sans-serifs like Inter. **Right:** Stick to Manrope. **Reason:** Typography is the primary brand signal.

## Quick start

```css
:root {
  --color-navy: #010c1f;
  --color-blue: #265df5;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text: #171717;
  --radius-pill: 9999px;
  --radius-card: 16px;
  --font-main: 'Manrope', sans-serif;
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the static trace.
- Mobile navigation menu transition logic is missing from the evidence.
- Error states for the contact form were not triggered during analysis.