# Design System: RegDesk

## 1. Visual Theme & Atmosphere

RegDesk's visual identity is built on a foundation of authoritative trust and energetic optimism — the design language of a company that makes complex regulatory compliance feel navigable. The primary canvas is clean white (`#ffffff`) with deep navy (`#005594`) as the commanding brand anchor. This isn't a minimalist design for its own sake; it's precision-engineered clarity that says "we understand the complexity so you don't have to."

The signature element is the **gradient stripe** — a flowing ribbon from mid-blue (`#466ab1`) through sky (`#76cadd`), amber (`#fbc624`), to red (`#e71f20`) — that appears at section boundaries, hero bottoms, and the footer top. This gradient acts as a kinetic brand signal, evoking movement, global reach, and the multi-stage nature of regulatory pathways.

Typography is exclusively **Arial** — a deliberate choice of universality over personality. In the regulatory world, trust is built through clarity and accessibility. Arial reads the same on a 4K monitor as it does on a printed FDA submission cover. It's not a design compromise; it's a compliance statement.

The color accent system is deliberately limited: navy for authority, amber for action. The amber CTA (`linear-gradient(to right, #f2c630, #f49926)`) is the single warm accent in an otherwise cool-anchored palette — creating a focal point that guides users to primary actions without visual noise.

**Key Characteristics:**
- Light-mode-native: white canvas (`#ffffff`), navy authority (`#005594`), ice blue surfaces (`#f1fafc`)
- Arial exclusively — universal, accessible, compliant across all platforms and print
- Amber gradient CTA (`#f2c630 → #f49926`) as the sole warm action color — one primary action per screen
- Signature gradient stripe (`#466ab1 → #76cadd → #fbc624 → #e71f20`) at section edges
- Border-radius: 8px buttons, 12px cards, 100px pills — rounded but professional
- Generous spacing (12/24/48/60/96px scale) — white space as a premium signal
- Box shadows with navy-tinted opacity for depth without noise
- Lucide icons exclusively — 2px stroke, 24px grid, navy fill
- Status chips: green (cleared/success), red (deficiency/error), navy (in review/info), amber (pending/warning)

---

## 2. Color Palette & Roles

### Primary Brand
- **Navy Blue** (`#005594`): The cornerstone brand color. Primary CTAs, link text, nav backgrounds, active states, section headers. Conveys authority and trustworthiness in the regulatory space.
- **Sky Blue** (`#76cadd`): Mid-gradient position. Used in gradient stripe, decorative wave, light surface tinting. Creates a sense of global reach and calm confidence.
- **Mid Blue** (`#466ab1`): Gradient start. Bridge between navy authority and sky openness. Used in gradient stripe anchor.

### Action & Highlight
- **Amber** (`#fbc624`): Primary CTA background. The single warm accent in the system — drives attention to the most important action. Used as `linear-gradient(to right, #f2c630, #f49926)` for depth.
- **Yellow** (`#ffb200`): Amber hover variant — slightly deeper, used for pressed/hover CTA states.
- **Orange** (`#F16F12`): Warm accent for secondary highlights, decorative elements, gradient end-warmth.

### Status
- **Red** (`#e71f20`): Gradient stripe end · Deficiency alerts · Error states. Not used for primary destructive actions — reserved for regulatory urgency and brand gradient.
- **Success Green** (`#1a8040`): Compliance confirmed, cleared status, success states. Text on `#f0faf4` background.
- **Warning** (Amber `#fbc624`): Pending review, caution states.
- **Error** (Red `#e71f20`): Deficiency detected, rejection states.

### Neutral & Surface
- **Near Black / Charcoal** (`#1d1c1d`): Primary body text. Warm near-black — readable without the harshness of pure black.
- **White** (`#ffffff`): Page background, card surfaces, inverted text on dark backgrounds.
- **Ice Blue** (`#f1fafc`): Section backgrounds, feature card surfaces, form input backgrounds. Creates subtle visual separation without harsh contrast.
- **Light Blue** (`#c0d9e7`): Border tinting on ice surfaces, secondary dividers.
- **Border Gray** (`#e1e1e1`): Standard card borders, horizontal rules, table lines.
- **Medium Gray** (`#666666`): Secondary body text, descriptions, metadata.
- **Light Gray** (`#888888`): Placeholder text, de-emphasized labels, hex color codes.
- **Very Light Gray** (`#aaa`): Section labels, overlines, subtle metadata.

### Interactive States
- **Navy Hover** (`#003d6e`): Darker navy for secondary button hover.
- **Ice Hover** (`#e8f4f8`): Subtle background shift for ghost/outline button hover.

### Gradient System
- **Signature Stripe**: `linear-gradient(to right, #466ab1 0%, #76cadd 33%, #fbc624 66%, #e71f20 100%)`
  — Use at: section bottom edges, hero base stripe, footer top band, card accent bars.
- **CTA Gradient**: `linear-gradient(to right, #f2c630, #f49926)`
  — Use on: GET STARTED buttons, primary CTAs.
- **Hero Background**: `linear-gradient(135deg, #005594 0%, #076ab5 50%, #76cadd 100%)`
  — Use on: hero sections, marketing page headers.
- **Navy Gradient Card**: `linear-gradient(45deg, #005594 0%, #76cadd 200%)`
  — Use on: dark CTA cards, elevated promo sections.

---

## 3. Typography Rules

### Font Family
- **Primary**: `Arial, sans-serif` — used for ALL text across all contexts
- **Fallback**: `sans-serif`
- **No web fonts, no Google Fonts**: Arial is the mandated brand typeface. Do not import or use any other typeface.
- **Monospace (code only)**: `monospace` — only for code blocks in technical documentation

### Hierarchy

| Role | Weight | Size | Line Height | Letter Spacing | Transform | Notes |
|------|--------|------|-------------|----------------|-----------|-------|
| H1 / Hero | Bold (700) | 56px | 62px | 0 | — | Hero headlines, page titles |
| H2 | Regular (400) | 46px | 50px | 0 | — | Section headings |
| H3 | Semi-Bold (600) | 34px | 42px | 0 | — | Subsection titles, feature headings |
| H4 | Regular (400) | 24px | 30px | 0 | — | Card headings, sub-headings |
| H5 | Bold (700) | 18px | 24px | 0 | — | Compact headings, nav labels |
| Body Large | Regular (400) | 18px | 26px | 0 | — | Lead paragraphs, intro text |
| Body Default | Regular (400) | 16px | 24px | 0 | — | Standard paragraph text |
| Body Small | Regular (400) | 14px | 20px | 0 | — | Secondary content, descriptions |
| Label / Caption | Bold (700) | 14px | 18px | 0.5px | UPPERCASE | Section labels, overlines, button text |
| Micro | Regular (400) | 12px | 16px | 0 | — | Fine print, timestamps, metadata |
| Code | — | 12px | 1.7 | 0 | — | Code blocks only |

### Principles
- **Arial only**: No other typeface. Ever. This is a compliance requirement — Arial renders identically across platforms, in print, and in regulatory submissions.
- **Weight as hierarchy**: 700 (bold) for headings, 600 for sub-headings, 400 for body. No intermediate weights.
- **No letter-spacing on body text**: Only labels and captions use letter-spacing — 0.5px with UPPERCASE transform.
- **Uppercase for labels**: Section labels, overlines, button text, and component titles use `text-transform: uppercase` with `letter-spacing: 0.5px` or `2px`.
- **Line-height for scanning**: Generous line-height (1.6–1.7 for body) supports the regulatory professional's scanning pattern.

---

## 4. Component Stylings

### Buttons

**Primary CTA (GET STARTED)**
- Background: `linear-gradient(to right, #f2c630, #f49926)`
- Text: `#1d1c1d` (near-black)
- Font: Arial Bold · 14px · 20px line-height · UPPERCASE · letter-spacing: 0.5px
- Padding: 12px 24px
- Border-radius: 8px
- Border: none
- Hover: `linear-gradient(to right, #f0be20, #f08820)` + `text-decoration: underline`
- Use: Primary page action, hero CTA, most important conversion point per screen

**Secondary Navy (LEARN MORE)**
- Background: `#005594`
- Text: `#ffffff`
- Font: Arial Bold · 14px · UPPERCASE · letter-spacing: 0.5px
- Padding: 12px 24px
- Border-radius: 8px
- Hover: background `#003d6e` + `text-decoration: underline`
- Use: Secondary actions, "Learn More", navigation CTAs

**Ghost / Outline (VIEW DEMO)**
- Background: transparent
- Text: `#005594`
- Font: Arial Bold · 14px · UPPERCASE · letter-spacing: 0.5px
- Padding: 12px 24px
- Border-radius: 8px
- Border: 2px solid `#005594`
- Hover: background `#f1fafc` + `text-decoration: underline`
- Use: Tertiary actions, demo links, non-critical paths

**Small Variant**
- Same styles as above, padding: 10px 20px · font-size: 13px
- Use: CTA inside cards, constrained-space actions

**Amber Inline**
- Background: `#fbc624`
- Text: `#1d1c1d`
- Font: Arial Bold · 13px · UPPERCASE · letter-spacing: 0.5px
- Padding: 12px 24px
- Border-radius: 6px
- Hover: background `#e0a800`
- Use: Secondary CTA inside light card contexts

### Cards & Containers

**Standard Card**
- Background: `#ffffff`
- Border: `1px solid #e1e1e1`
- Border-radius: 12px
- Padding: 32px
- Shadow: `0 4px 24px rgba(0,85,148,0.13)` — navy-tinted for brand coherence

**Feature Card (Ice)**
- Background: `#f1fafc`
- Border: `1px solid #c0d9e7`
- Border-radius: 12px
- Padding: 24px
- Shadow: none
- Use: Feature highlights, "why us" sections

**Article Card (Vertical)**
- Background: `#ffffff`
- Border-radius: 12px
- Overflow: hidden
- Shadow: `0 4px 24px rgba(0,85,148,0.13)`
- Image height: 160px, `object-fit: cover`
- Body padding: 20px
- Read link: Amber (`#fbc624`) · Bold · Uppercase · with `→` chevron

**Article Card (Horizontal)**
- Background: `#ffffff`
- Border-radius: 12px
- Overflow: hidden
- Shadow: `0 4px 24px rgba(0,85,148,0.13)`
- Image: 160px × 100% height, `object-fit: cover`, left-anchored
- Max-height: 200px
- Title: 16px, weight 400, navy (`#005594`), 4-line clamp
- Read link: Amber, right-aligned in body

**Gradient Header Card**
- Header: `linear-gradient(135deg, #005594 0%, #76cadd 100%)` · 18px white bold title · 18px 24px padding
- Body: white background · 20px 24px padding
- Border-radius: 12px
- Shadow: `0 4px 24px rgba(0,85,148,0.13)`
- Use: Country regulation cards, feature summary cards

**CTA Card (Dark)**
- Background: `linear-gradient(45deg, #005594 0%, #76cadd 200%)`
- Text: white
- Padding: 24px 28px
- Border-radius: 10px
- Accent bar: 4px gradient stripe at bottom
- Use: Promotional sections, upsell blocks

**CTA Card (Light / Gradient Border)**
- Background: white padding-box + gradient border-box
- Border: `2px solid transparent` with `linear-gradient(to right, #466ab1, #76cadd, #fbc624, #e71f20)` border-image
- Padding: 32px 36px
- Border-radius: 10px
- Text-align: center
- Use: Email capture, demo request sections

### Inputs & Forms

**Text Input**
- Background: `#f1fafc`
- Border: `1px solid #c0d9e7`
- Border-radius: 8px
- Padding: 10px 14px
- Font: Arial · 16px · `#1d1c1d`
- Placeholder: `#aaa`
- Focus: border `#005594` · box-shadow `0 0 0 2px rgba(0,85,148,0.15)`
- Error: border `#e71f20` · text `#e71f20` below input

**Select / Dropdown**
- Same visual as text input
- Chevron: Lucide `chevron-down` 14px, navy, right-aligned

**Form Label**
- Font: Arial Bold · 14px · UPPERCASE · letter-spacing: 0.5px
- Color: `#1d1c1d`
- Margin-bottom: 8px

**Form Group Spacing**
- Between fields: 24px (sm)
- Between sections: 48px (md)

### Tags & Badges

**510(k) Tag**
- Background: `#f1fafc` · Border: `1px solid #c0d9e7` · Text: `#005594`
- Font: Arial Bold · 12px · UPPERCASE · padding: 5px 12px · border-radius: 100px

**FDA Tag**
- Background: `#fbc624` · Text: `#1d1c1d`

**PMA Tag**
- Background: `#005594` · Text: `#ffffff`

**Cleared / Success**
- Background: `#f0faf4` · Border: `1px solid #aee0be` · Text: `#1a8040`

**Deficiency / Error**
- Background: `#fff5f5` · Border: `1px solid #ffc9c9` · Text: `#c0392b`

**In Review / Info**
- Background: `#f1fafc` · Border: `1px solid #c0d9e7` · Text: `#005594`

**Pending / Warning**
- Background: `#fffbf0` · Border: `1px solid #fde68a` · Text: `#92400e`

### Navigation

**Primary Nav Bar**
- Background: `#ffffff`
- Border-bottom: `1px solid #e1e1e1`
- Height: 64px
- Position: sticky, top: 0
- Z-index: 100
- Logo: 52px height
- Nav label: 13px · letter-spacing: 2px · uppercase · opacity 0.6 · navy
- Dropdown: white · border `#e1e1e1` · border-radius 10px · shadow `0 4px 20px rgba(0,0,0,0.08)`

### Icons

**System**: Lucide icons exclusively
**Stroke-width**: 2px (standard) / 1.5px (decorative)
**Grid**: 24px × 24px
**Color**: `#005594` (navy) for standard icons · `#fbc624` (amber) for action icons
**Never use emoji** as icons in product or marketing UI

**Core icon set**:
- `flask-conical` — Lab / Medical Device
- `file-text` — Document / Submission
- `globe` — Global / Regulatory
- `shield-check` — Compliance
- `git-branch` — Workflow
- `bar-chart-3` — Analytics
- `zap` — Speed / Efficiency
- `clipboard-list` — Checklist / Audit
- `calendar` — Deadline / Timeline
- `users` — Team / Collaboration
- `alert-triangle` — Warning / Deficiency
- `check-circle` — Success / Cleared
- `search` — Search / Research
- `arrow-right` — Navigation / CTA

---

## 5. Layout & Spacing

### Content Width
- **Max content width**: 1248px (`--rd-content-width`)
- Centered with `margin: 0 auto`
- Page padding: `0 40px` (desktop) · `0 20px` (mobile)

### Spacing Scale

| Token | Value | Use |
|-------|-------|-----|
| xs | 12px | Icon gaps, tight padding, badge padding |
| sm | 24px | Component internal padding, card gaps |
| md | 48px | Section internal spacing, form groups |
| lg | 60px | Between major components |
| xl | 96px | Full section padding top/bottom |

### Border Radius

| Context | Radius |
|---------|--------|
| Buttons (all types) | 8px |
| Cards, images, containers | 12px |
| Pills, tags, avatar circles | 100px |
| Input fields | 8px |
| Dropdowns, tooltips | 10px |
| Small badges | 6px |

### Breakpoints

| Breakpoint | Value | Notes |
|-----------|-------|-------|
| Mobile | ≤ 768px | Single column, 20px page padding, hamburger nav |
| Tablet | 769–1024px | 2-column grids, 24px gaps |
| Desktop | ≥ 1025px | Full grid, 40px page padding, horizontal nav |
| Wide | ≥ 1200px | Max-width clamp at 1248px |

### Grid Patterns
- **Color grid**: 4-column → 3-column (1200px) → 2-column (768px)
- **Component grid**: 2-column → 1-column (768px)
- **Icon grid**: 8-column → 6-column (1200px) → 4-column (768px)
- **Logo grid**: 2-column → 1-column (768px)
- **Design library**: 3-column → 2-column (1024px) → 1-column (768px)

---

## 6. Shadow & Elevation System

RegDesk uses **navy-tinted shadows** — the blue undertone (`rgba(0,85,148,...)`) ties elevation directly to brand color, making even depth signals feel on-brand.

| Level | Shadow | Use |
|-------|--------|-----|
| Flat | none | Ice surfaces, table rows, tags |
| Card | `0 4px 24px rgba(0,85,148,0.13)` | Standard cards, article cards |
| Modal | `0 8px 48px rgba(0,85,148,0.2)` | Dialogs, overlays |
| Dropdown | `0 4px 20px rgba(0,0,0,0.08)` | Nav dropdowns, popovers |
| Focus ring | `0 0 0 2px rgba(0,85,148,0.15)` | Input focus, button focus |

---

## 7. Motion & Interaction

### Transition System
- **Global transition**: `all .35s` — applied via `--rd-transition` CSS variable
- Use `transition: var(--rd-transition)` on all interactive elements

### Specific Patterns

| Interaction | Transition | Notes |
|------------|------------|-------|
| Button hover | Background color, text-decoration | 0.35s ease |
| Card hover | Box-shadow deepening | 0.35s ease |
| Nav dropdown | `display: block` on `.nav-group:hover` | No animation — instant |
| Link hover | Color shift + underline | 0.2s ease |
| CTA underline on hover | `text-decoration: underline` | Accessibility signal |

### Hover Rules
- All buttons: background darkens + underline appears
- Cards: shadow deepens on hover (optional, if interactive)
- Links: color shift to darker navy + underline
- Nav items: color shifts to `#005594`

---

## 8. Decorative Elements

### Signature Gradient Stripe
A 4–6px horizontal bar using the brand gradient. Appears:
- At the bottom of hero sections (after clause)
- At the top of footer (before clause)
- As an accent bar at the bottom of CTA cards

```css
background: linear-gradient(to right, #466ab1 0%, #76cadd 33%, #fbc624 66%, #e71f20 100%);
height: 4px; /* or 6px */
```

### Footer Wave
A full-width SVG/PNG wave asset using the brand gradient colors (sky → amber → red).
- Position: `absolute; bottom: 0; left: 0; width: 100%`
- Always full-width — never cropped or tiled
- Only on light/white backgrounds
- Colors flow left (sky/teal) → right (amber/red)
- File: `footer-wave.png` in brand assets

### Logo
Two official SVG files:
- **Light backgrounds**: `/branding/regdesk-logo-light.svg` — full color wordmark + phoenix
- **Dark backgrounds**: `/branding/regdesk-logo-dark.svg` — white inverted version
- Minimum size: 38–40px height in nav · 28–32px in footer
- Clear space: equal to height of the "R" on all sides
- Never recreate in CSS or text — always use official file

---

## 9. Voice & Tone

**Brand personality**: Authoritative · Precise · Optimistic · Trustworthy · Energetic

**RegDesk speaks like a trusted senior regulatory strategist** — someone who knows the FDA inside and out, and uses that expertise to make your job easier.

| Do | Don't |
|----|-------|
| "RegDesk clears 510(k)s faster." | "Synergistic compliance ecosystem" |
| Use precise, technical language | Be vague — "helps with regulatory stuff" |
| Lead with benefit, follow with feature | Sound alarming about compliance |
| Keep sentences short | Use emoji in product or formal copy |
| Express optimism: "compliant faster" | Overclaim — "we guarantee FDA approval" |

---

## 10. CSS Variables Reference

```css
:root {
  /* Brand Colors */
  --rd-navy: #005594;
  --rd-blue: #035cfa;
  --rd-mid-blue: #466ab1;
  --rd-sky: #76cadd;
  --rd-light-blue: #c0d9e7;
  --rd-ice: #f1fafc;
  --rd-amber: #fbc624;
  --rd-yellow: #ffb200;
  --rd-red: #e71f20;
  --rd-orange: #F16F12;
  --rd-text: #1d1c1d;
  --rd-border: #e1e1e1;
  --rd-white: #ffffff;

  /* Layout */
  --rd-content-width: 1248px;

  /* Gradient */
  --rd-gradient: linear-gradient(to right, #466ab1 0%, #76cadd 33%, #fbc624 66%, #e71f20 100%);

  /* Motion */
  --rd-transition: all .35s;

  /* Radius */
  --rd-radius-card: 12px;
}
```

---

## 11. Do / Don't Summary

| ✅ Do | ❌ Don't |
|------|---------|
| Use Arial for all text | Use any other typeface |
| Use the official SVG logo files | Recreate logo in CSS or custom text |
| Keep one primary amber CTA per screen | Use multiple amber CTAs competing for attention |
| Use navy-tinted shadows for elevation | Use pure black shadows |
| Use Lucide icons (2px stroke, 24px) | Use emoji as icons in product UI |
| Apply the gradient stripe at section edges | Use gradient stripe as fill or background |
| Use generous whitespace (xl: 96px sections) | Crowd content — whitespace is a feature |
| Code with no inline styles (use CSS classes) | Mix inline styles with class-based styling |
| Staging → review → production for content | Push untested changes directly to production |