# Panthernails Design System

> Corporate blue precision meets high-contrast utility on a crisp white canvas.

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

## TL;DR
Panthernails utilizes a high-contrast palette dominated by Dodger Blue (#1e90ff) and deep Navy (#003366) against a pure white (#ffffff) background. The system relies on a heavy typographic hierarchy using system-ui fonts, with display weights reaching 900 for maximum impact. UI elements are characterized by a mix of sharp corners and extreme pill-shaped radii (9999px) for primary actions. Layouts are structured with a base 8px grid, often featuring generous vertical spacing and centered content blocks for enterprise authority.

## Signature DNA
1. **The Power Blue Accent** (#1e90ff is used consistently for primary CTAs, text highlights, and borders to signal interactivity and brand presence across all pages).
2. **Heavyweight Display Type** (The use of 900-weight system-ui text at sizes up to 96px creates a "milestone" aesthetic that emphasizes scale and stability).
3. **Pill-Shaped Action Buttons** (Primary interactive elements use a 9999px radius, contrasting against the sharp 0px or 4px radius used for structural containers and inputs).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | #ffffff | Page background, text on dark surfaces | 12 | 1.0 | computed_style |
| `{color.ghost-white}` | #f7fafc | Secondary text, button labels | 101 | 0.8 | computed_style |
| `{color.black}` | #000000 | Primary text, footer background | 74 | 0.8 | computed_style |
| `{color.slate-light}` | #e2e8f0 | Section backgrounds, input fills | 7 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | #1e90ff | Primary CTA background, active text | 42 | 0.8 | computed_style |
| `{color.navy}` | #003366 | Secondary headings, branding | 29 | 0.8 | computed_style |
| `{color.steel}` | #7c8ba1 | Muted text, secondary labels | 17 | 0.8 | computed_style |
| `{color.slate-dark}` | #1a202c | High-emphasis body text | 7 | 0.6 | computed_style |
| `{color.cool-gray}` | #718096 | Descriptive body text | 6 | 0.6 | computed_style |
| `{color.border-muted}` | #cbd5e0 | Input borders, decorative lines | 4 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | #07bc0c | Success icons and progress bars |
| `{color.error}` | #e74c3c | Error states and toast notifications |
| `{color.warning}` | #f1c40f | Warning alerts |
| `{color.info}` | #3498db | Informational notifications |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| system-ui | 400, 500, 600, 700, 900 | All roles (Heading, Body, UI) | Inter | System Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-hero}` | 96px | 144px | normal | 900 | Milestone numbers | `span.TwoColWithStat__NumberContent` |
| `{type.display-lg}` | 64px | 64px | normal | 900 | Hero headings | `h1.FallbackLoading__Heading` |
| `{type.display-md}` | 48px | 60px | 1.2px | 900 | Section headings | `h1.Headings__SectionHeading` |
| `{type.heading-lg}` | 30px | 37.5px | 0.75px | 900 | Sub-section headings | `h1.Headings__DynamicHeading` |
| `{type.heading-md}` | 24px | 36px | normal | 900 | Navigation logo, card titles | `a.light__LogoLink` |
| `{type.heading-sm}` | 20px | 30px | normal | 600 | FAQ questions | `span.SimpleWithSideImageChangeOnHover` |
| `{type.body-lg}` | 18px | 29.25px | normal | 500 | Feature descriptions | `p.TwoColWithStat__Description` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body text | `div.sc-efBctP` |
| `{type.body-sm}` | 14px | 21px | normal | 500 | Footer links | `li.FiveColumnWithInputForm__LinkListItem` |
| `{type.caption}` | 12px | 18px | 1.2px | 700 | Labels, positions | `span.position` |

### Principles
1. **Extreme Weight for Impact:** Use 900 weight for all primary numerical data and main hero headers to convey strength.
2. **Wide Tracking on Headers:** Large display type (48px+) utilizes 1.2px letter spacing to maintain legibility at scale.
3. **Tight Vertical Rhythm:** Component-level headings (20px) use a 1:1 line-height ratio for compact grouping.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|---|---|---|
| `{space.xxs}` | 4px | 59 |
| `{space.xs}` | 8px | 12 |
| `{space.sm}` | 12px | 61 |
| `{space.md}` | 16px | 27 |
| `{space.lg}` | 24px | 10 |
| `{space.xl}` | 32px | 18 |
| `{space.xxl}` | 48px | 6 |
| `{space.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Structural containers, primary buttons | 211 occurrences |
| `{radius.sm}` | 4px | Inputs, small cards | 35 occurrences |
| `{radius.md}` | 8px | Feature cards, interactive surfaces | 11 occurrences |
| `{radius.pill}` | 9999px | High-priority CTAs, badges | 10 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.none}` | none | Standard cards and buttons | Default state |
| `{shadow.floating}` | 0px 10px 15px -3px rgba(0,0,0,0.1) | Hovered cards, floating CTAs | Card component |

## Components

### Tier 1: Foundational

#### Button
**Role:** Primary action trigger
**Pages observed:** https://panthernails.com, https://panthernails.com/about
**Spec:** Background: #2b6cba / Text: #f7fafc / Radius: 0px / Padding: 12px 32px / Typography: 14px (500)
**States observed:** Default | Hover: captured | Active: captured

#### Text Input
**Role:** Form data entry
**Pages observed:** https://panthernails.com, https://panthernails.com/about
**Spec:** Background: #e2e8f0 / Text: #000000 / Border: 2px solid #cbd5e0 / Radius: 4px / Padding: 12px 24px

### Tier 2: Patterns

#### Pill / Badge
**Role:** Status indicators or secondary CTAs
**Pages observed:** https://panthernails.com, https://panthernails.com/about
**Spec:** Background: transparent / Text: #f7fafc / Border: 1px solid #a0aec0 / Radius: 9999px / Padding: 20px 40px

#### Feature Card
**Role:** Displaying service or product highlights
**Pages observed:** https://panthernails.com, https://panthernails.com/about
**Spec:** Background: #1e90ff / Text: #f7fafc / Radius: 4px / Padding: 12px 32px / Shadow: none

### Tier 3: Surface-specific

#### Dark Surface Section
**Role:** High-contrast footer or content break
**Pages observed:** https://panthernails.com, https://panthernails.com/about
**Spec:** Background: #414243 / Text: #f7fafc / Radius: 0px / Padding: 48px 32px

#### Milestone Card
**Role:** Displaying company statistics
**Pages observed:** https://panthernails.com, https://panthernails.com/about
**Spec:** Background: #243e63 / Text: #000000 / Radius: 8px / Padding: 32px 0px

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Gap | 80px |
| Grid System | 12-column flex |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Stacked columns, 32px section padding |
| Desktop | 1440px | Multi-column layouts, 80px section gaps |

## Imagery & decoration
Panthernails uses flat, corporate-style illustrations with a limited palette of blue, purple, and orange. Decorative elements include dashed borders (1px #1e90ff) for feature containers and large, semi-transparent background shapes to break up white space.

## Do's
- Use #1e90ff for all primary interactive elements.
- Set milestone numbers to 900 weight at 96px.
- Maintain a minimum of 80px vertical spacing between major sections.
- Use 9999px border-radius for "Get Started" style CTAs.
- Ensure text on #1e90ff backgrounds is #f7fafc for contrast.

## Don'ts
- Do not use #1e90ff for large background areas without high-contrast text.
- Do not apply shadows to standard structural cards; keep them flat.
- Do not use serif fonts; stick strictly to system-ui.
- Do not mix 0px and 9999px radii within the same component group.
- Do not use #003366 for body text; reserve it for headings.

## Similar brands
- Salesforce (Corporate blue, system-ui focus)
- IBM (High-contrast utility, heavy weights)
- Microsoft Azure (Enterprise blue palette, flat surfaces)

## Quick start

### CSS Custom Properties
```css
:root {
  --pn-color-primary: #1e90ff;
  --pn-color-navy: #003366;
  --pn-color-bg: #ffffff;
  --pn-color-dark: #414243;
  --pn-radius-pill: 9999px;
  --pn-font-display: 900 system-ui;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #1e90ff;
  --color-navy: #003366;
  --font-display: "system-ui";
  --spacing-section: 80px;
}
```

## Agent prompt examples
- "Create a hero section with a 64px heading in weight 900 and a pill-shaped CTA using #1e90ff."
- "Design a 3-column feature grid where each card has a 4px radius and a dashed #1e90ff border."
- "Generate a statistic component with a 96px number in weight 900 and a 16px label."

## Known gaps
- Hover state transitions were not explicitly defined in the token set.
- Mobile-specific font scale overrides for display sizes were not fully captured.

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