# Myclientshare Design System

> High-contrast enterprise blue anchored by a high-voltage magenta pulse and ultra-heavy Inter display type.

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

## TL;DR
Myclientshare utilizes a "Deep Navy and Neon" palette to distinguish its B2B CX platform. The system is anchored by a primary navy `#203878` used for headings and dark-mode surfaces, contrasted against a high-saturation magenta `#e5007e` reserved for primary actions. Typography is exclusively sans-serif, leaning on **Inter** at a maximum weight of 900 for display headlines to create a sense of industrial stability. Layouts alternate between pure white `#ffffff` and soft blue-tinted foundations `#f4f6fc`, using generous 100px pill-radius geometry for buttons and inputs to soften the heavy typographic presence.

## Signature DNA
1. **Ultra-Heavy Display Type** (Inter at weight 900 is used for all primary H1 and H2 headings, creating a "blocky" and authoritative information hierarchy across the homepage and about pages.)
2. **The Magenta Pulse** (The color `#e5007e` is used strictly for conversion points—Demo buttons and "Go Home" actions—providing a singular high-contrast focal point against navy or white backgrounds.)
3. **Pill-Form UI Components** (A consistent 50px to 100px border radius is applied to both primary CTAs and form inputs, creating a unified "capsule" language for all interactive elements.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | 126 | 0.8 | Computed |
| `{color.canvas.alt}` | `#f4f6fc` | Subtle section backgrounds | 31 | 0.8 | Computed |
| `{color.navy}` | `#203878` | Primary text, headings, dark surfaces | 316 | 1.0 | `--primary` |
| `{color.border.light}` | `#cccccc` | Decorative dividers | 6 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.magenta}` | `#e5007e` | Primary CTA background, active borders | 12 | 1.0 | `--secondary` |
| `{color.teal}` | `#21d09c` | Tertiary accents, success indicators | 4 | 1.0 | `--tertiary` |
| `{color.blue.muted}` | `#c4cde1` | Decorative surface backgrounds | 4 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Inter** | 400, 500, 600, 700, 900 | Heading & UI | Inter (Google Fonts) | SIL OFL |
| **Poppins** | 500, 600 | Body (Secondary) | Poppins (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 60px | 78px | normal | 900 | Hero H1 | `h1` |
| `{type.display.md}` | 48px | 59px | normal | 500 | Sub-hero display | `span` |
| `{type.h2}` | 33px | 42.9px | normal | 900 | Section Heading | `h2` |
| `{type.h3}` | 32px | 41.6px | normal | 900 | Component Heading | `h3` |
| `{type.h4}` | 24px | 31.2px | normal | 700 | Small Heading | `h4` |
| `{type.body.lg}` | 20px | 26px | normal | 400 | Lead paragraph | `h6` |
| `{type.body}` | 16px | 24px | normal | 500 | Default body | `p` |
| `{type.button}` | 15px | 18.75px | normal | 500 | CTA Label | `a.button` |
| `{type.caption}` | 14px | 14px | normal | 400 | Input labels | `input` |

### Principles
1. **Weight as Hierarchy:** Use weight 900 for all major section transitions; do not use bold (700) for primary headlines.
2. **Navy for Readability:** All primary body text on light backgrounds must use `#203878`, never pure black.
3. **Leading for Density:** Maintain a 1.3x to 1.5x line-height ratio for body text to balance the heavy font weights.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 6 |
| `{space.sm}` | 16px | 52 |
| `{space.md}` | 30px | 24 |
| `{space.lg}` | 40px | 16 |
| `{space.xl}` | 60px | 5 |
| `{space.section}` | 97px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Layout containers | 344 occurrences |
| `{radius.sm}` | 8px | Content cards | Card component |
| `{radius.pill}` | 50px | Text inputs | Input component |
| `{radius.full}` | 100px | Primary buttons | Button component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 8px 24px 0px` | Standard feature cards | Card component |
| `{shadow.glow}` | `rgba(32, 56, 120, 0.18) 0px 0px 30px 0px` | Interactive hover states | Card (observed_once) |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call-to-action (Demo, Submit)
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `#e5007e` / Text: `#ffffff` / Border: 2px `#e5007e` / Radius: `100px` / Padding: `10px 30px` / Typography: `15px 500`
**States observed:** Default | Hover: Not captured | Active: Captured

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** Homepage, About
**Spec:** Background: `#f4f6fc` / Text: `#203878` / Border: 1px `#f4f6fc` / Radius: `50px` / Padding: `9px 10px` / Typography: `14px 400`
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Rounded Button (Outline)
**Role:** Secondary actions (Log In)
**Pages observed:** Homepage, About
**Spec:** Background: `transparent` / Text: `#203878` / Border: 2px `#203878` / Radius: `100px` / Padding: `10px 30px` / Typography: `15px 500`
**States observed:** Default | Hover: Not captured

#### Card
**Role:** Feature highlights and testimonials
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` / Text: `#203878` / Border: 0px / Radius: `8px` / Padding: `40px` / Shadow: `0px 8px 24px rgba(0,0,0,0.1)`
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Surface Section
**Role:** Footer and high-impact content bands
**Pages observed:** Homepage, About
**Spec:** Background: `#203878` / Text: `#ffffff` / Border: 0px / Radius: `0px` / Padding: `40px 20px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Section Spacing | 97px |
| Max Content Width | ~1200px (inferred) |
| Card Grid Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 20px. |
| Desktop | 1440px | Multi-column grid for feature cards. |

## Imagery & decoration
Myclientshare uses high-fidelity software screenshots and professional headshots of speakers/partners. Decorative elements include subtle navy-tinted shadows and the use of the teal `#21d09c` for small UI indicators.

## Do's
- Use **Inter 900** for all primary page headlines.
- Apply the **100px pill radius** to all primary buttons.
- Use `#e5007e` exclusively for high-priority conversion points.
- Set body text to `#203878` on light backgrounds for better brand alignment than pure black.
- Maintain a minimum of **97px** vertical spacing between major content sections.

## Don'ts
- **Wrong:** Using `#e5007e` for body text or large background areas. **Right:** Use it only for buttons and small accents. **Reason:** High saturation causes eye strain and dilutes CTA effectiveness.
- **Wrong:** Using sharp corners for buttons. **Right:** Always use `{radius.full}`. **Reason:** The brand identity relies on the "capsule" geometry to offset heavy type.
- **Wrong:** Using pure black `#000000` for text. **Right:** Use Navy `#203878`. **Reason:** Navy is the primary brand identifier and provides sufficient contrast (11.1:1).

## Similar brands
- **Slack** (Heavy sans-serif, rounded UI)
- **Zendesk** (Enterprise blue, clean typography)
- **Segment** (High-contrast accents, structured layout)

## Quick start

### CSS Custom Properties
```css
:root {
  --primary: #203878;
  --secondary: #e5007e;
  --tertiary: #21d09c;
  --canvas: #ffffff;
  --canvas-alt: #f4f6fc;
  --radius-pill: 50px;
  --radius-full: 100px;
  --font-main: 'Inter', sans-serif;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-navy: #203878;
  --color-magenta: #e5007e;
  --color-teal: #21d09c;
  --font-inter: "Inter";
  --radius-pill: 50px;
  --radius-full: 100px;
  --shadow-card: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Create a primary button using Myclientshare's magenta `#e5007e`, with a 100px border radius and Inter 500 font at 15px."
- "Design a feature card with a white background, 8px border radius, and a subtle 24px blur shadow using `#0000001a`."
- "Generate a hero section with a Navy `#203878` background, white Inter 900 text at 60px, and a magenta primary CTA."

## Known gaps
- Hover and focus states for buttons and inputs were not explicitly captured in the rendered evidence.
- The specific mobile breakpoint for the navigation toggle was not defined in the token set.

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