# Supplychainwizard Design System

> Deep purple and aged gold architecture for high-stakes pharmaceutical logistics.

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

## TL;DR
Supplychainwizard utilizes a high-contrast "monochrome" system that pairs a deep, regal purple (`#1e1030`) with a sophisticated palette of metallic golds and warm parchment tones. The interface is characterized by heavy, ultra-bold Montserrat headlines (weight 900) set against ivory and cream surfaces, creating a feeling of established authority. Interactive elements rely on pill-shaped geometry and subtle elevation, often using the primary purple for high-voltage actions and gold for secondary emphasis. The layout is structured around generous vertical spacing (up to 112px) and a mix of sharp and soft-rounded (24px) containers.

## Signature DNA
1. **Regal Contrast** (The pairing of Deep Purple `#1e1030` and Gold `#8c734b` across all pages to signal premium consulting authority.)
2. **Heavyweight Typography** (Montserrat at weight 900 for display and headings, often with negative letter-spacing, creating a "stamped" or "engraved" visual weight.)
3. **Parchment Layering** (The use of `#f5efe4` and `#fffdf8` instead of pure white for section backgrounds to soften the high-contrast purple text.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--warm-white` | `#ffffff` | Primary canvas and card background | 223 | 1 | Computed Style |
| `--parchment` | `#f5efe4` | Section backgrounds and borders | 82 | 1 | CSS Variable |
| `--charcoal` | `#54565a` | Secondary body text | 79 | 1 | CSS Variable |
| `--ivory` | `#fffdf8` | Subtle surface backgrounds | 44 | 1 | CSS Variable |
| `--cream` | `#faf6ef` | Alternate section backgrounds | 33 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--purple-deep` | `#1e1030` | Primary text, brand headers, and deep surfaces | 273 | 1 | CSS Variable |
| `--gold` | `#8c734b` | Secondary buttons, icons, and decorative borders | 159 | 1 | CSS Variable |
| `--gold-bright` | `#c49a52` | High-visibility borders and accents | 76 | 1 | Computed Style |
| `--purple` | `#301a4b` | Primary button backgrounds and shadows | 42 | 1 | CSS Variable |
| `--sand` | `#ede3d0` | Decorative surface background only | 2 | 1 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Montserrat | 300, 400, 500, 600, 700, 800, 900 | Display, Headings, UI | Montserrat (Google Fonts) | OFL |
| Hind | 800, 900 | Alternative Display | Hind (Google Fonts) | OFL |
| Open Sans | 300 | Body (Legacy/Masthead) | Open Sans (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-mega}` | 58px | 63.36px | -1.764px | 900 | Brand Hero H1 | `span.hw-h1-brand` |
| `{type.display-xl}` | 50px | 55.44px | -1.764px | 900 | Standard Hero H1 | `h1.hw-h1` |
| `{type.display-lg}` | 43px | 47.52px | -1.296px | 900 | Section Headings | `h2.hw-h2` |
| `{type.heading-md}` | 32px | 40px | normal | 800 | Sub-section heads | `h2.au-h2` |
| `{type.heading-sm}` | 20px | 28px | -0.4px | 900 | Card titles | `h3` |
| `{type.body-lead}` | 16px | 27.936px | normal | 300 | Lead paragraphs | `p.au-lead` |
| `{type.body-md}` | 15px | 27.36px | normal | 300 | Standard body | `p.hw-body` |
| `{type.caption-bold}` | 12px | 19.456px | 1.4592px | 900 | Eyebrow labels | `span.hw-belt-name` |

### Principles
1. **Extreme Weight for Authority:** Display text must use Montserrat 900.
2. **Negative Tracking on Display:** All headings above 40px must use negative letter-spacing (approx -3%) to maintain visual density.
3. **Parchment Readability:** Body text uses a lighter weight (300) to balance the heavy headings and ensure legibility on off-white backgrounds.

## Spacing
**Base unit:** 4px (derived)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 31 |
| `{space.sm}` | 16px | 26 |
| `{space.md}` | 32px | 33 |
| `{space.lg}` | 72px | 30 |
| `{space.section}` | 112px | 18 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers | 652 occurrences |
| `{radius.card}` | 16px | Standard content cards | 19 occurrences |
| `{radius.panel}` | 24px | Feature/Pricing cards | 44 occurrences |
| `{radius.pill}` | 9999px | Buttons and tags | 40 occurrences |
| `{radius.circle}` | 50% | Icon backplates | 42 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.subtle}` | `rgba(48, 26, 75, 0.08) 0px 1px 4px 0px` | Standard Cards | 32 occurrences |
| `{shadow.gold}` | `rgba(140, 115, 75, 0.1) 0px 3px 14px 0px` | Gold-themed Cards | 12 occurrences |
| `{shadow.deep}` | `rgba(48, 26, 75, 0.13) 0px 6px 28px 0px` | Floating UI/Modals | 12 occurrences |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call to action (e.g., "Book a Meeting")
**Pages observed:** 2
**Spec:** Background: `#301a4b` | Text: `#ffffff` | Radius: `9999px` | Padding: `14px 32px` | Font: Montserrat 800 (12.16px)
**States observed:** Default | Hover: Captured (darker purple/gold shift)

#### Secondary Pill Button
**Role:** Alternative actions (e.g., "Contact Us")
**Pages observed:** 2
**Spec:** Background: `transparent` | Text: `#ffffff` | Border: `1px solid #ffffff` | Radius: `9999px` | Padding: `14px 33px`
**States observed:** Default | Hover: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying services or case studies
**Pages observed:** 3
**Spec:** Background: `#fffdf8` | Text: `#1e1030` | Border: `1px solid rgba(140, 115, 75, 0.14)` | Radius: `24px` | Shadow: `{shadow.subtle}`
**States observed:** Default | Hover: Not captured

#### Service Card (Parchment)
**Role:** Grid items for service lists
**Pages observed:** 2
**Spec:** Background: `#f5efe4` | Text: `#1e1030` | Radius: `13px` | Shadow: `{shadow.gold}`
**States observed:** Default

### Tier 3: Surface-specific

#### Circular Icon Plate
**Role:** Decorative background for service icons
**Pages observed:** 2
**Spec:** Background: `rgba(48, 26, 75, 0.8)` | Border: `1px solid rgba(196, 154, 82, 0.28)` | Radius: `50%` | Shadow: `{shadow.deep}`
**States observed:** Default

#### Pricing Card (Elevated)
**Role:** Highlighting specific plans
**Pages observed:** 2
**Spec:** Background: `#ffffff` | Border: `1px solid rgba(140, 115, 75, 0.14)` | Radius: `24px` | Padding: `32px 28px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px |
| Section Vertical Padding | 112px |
| Card Grid Gap | 24px - 32px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Desktop | 1440px | 3-up or 4-up grids; 112px section spacing |
| Mobile | 390px | 1-up stacking; reduced heading sizes (e.g., 58px to 32px); 72px section spacing |

## Do's
- Use Montserrat 900 for all primary section headings.
- Set display headings with negative letter-spacing (`-1.764px`).
- Use `#f5efe4` (Parchment) for large background sections to reduce eye strain.
- Apply `9999px` (Pill) radius to all interactive buttons.
- Ensure all cards have a subtle shadow using the purple-tinted token `#301a4b`.

## Don'ts
- Never use pure black for text; use Deep Purple `#1e1030` for primary and Charcoal `#54565a` for secondary.
- Do not use sharp corners for cards; maintain a minimum radius of `13px`.
- Avoid using Gold `#8c734b` for long-form body text; it is reserved for accents and UI labels.
- **Wrong:** Using a bright sub-brand blue for a primary button. **Right:** Use Deep Purple `#301a4b`. **Reason:** This is a monochrome-system parent brand.

## Quick start

```css
/* CSS Variables */
:root {
  --purple-deep: #1e1030;
  --purple-mid: #301a4b;
  --gold-primary: #8c734b;
  --parchment: #f5efe4;
  --ivory: #fffdf8;
  --charcoal: #54565a;
  
  --radius-card: 16px;
  --radius-pill: 9999px;
  
  --shadow-subtle: rgba(48, 26, 75, 0.08) 0px 1px 4px 0px;
}
```

## Known gaps
- Hover states for secondary navigation items were not fully captured in the automated run.
- The specific transition timing for button hover states was not recorded.
- Form input validation states (Error/Success) were not present on the analyzed pages.

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