# Pascalmetrics Design System

> High-contrast clinical precision anchored by deep navy surfaces, vibrant safety-orange accents, and a rigorous Inter-based typographic hierarchy.

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

## TL;DR
Pascalmetrics utilizes a "monochrome-plus" strategy where a foundational palette of Slate (#334155) and Obsidian (#0f172a) is punctuated by a high-voltage Safety Orange (#ea580c). The system relies on a clean white canvas (#ffffff) for data-heavy sections, transitioning to deep navy backgrounds for high-impact hero and CTA areas. Typography is strictly Inter, leveraging heavy weights (700) for display and medium weights (600) for subheads to maintain a clinical, authoritative presence. Geometry is characterized by a mix of sharp section containers and soft-radius (12px to 16px) interactive cards.

## Signature DNA
1. **The Safety Accent:** Use of #ea580c as a functional signal color for CTAs, icons, and borders, creating a "hazard/safety" visual metaphor appropriate for risk mitigation.
2. **Deep Navy Immersion:** High-impact sections (Hero, Footer, Final CTA) use #0f172a or similar dark surfaces with white text to create a professional, "command center" atmosphere.
3. **Clinical Card System:** Content is grouped into white cards with subtle shadows (rgba(0,0,0,0.1)) and consistent 12px-16px corner radii, often featuring a 4px top border in the accent color.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.canvas}` | `#ffffff` | Primary page background and card surface | 28 | 1.0 | `--content_bg_color` |
| `{colors.slate}` | `#334155` | Primary body text and secondary headings | 85 | 1.0 | `--body_typography-color` |
| `{colors.obsidian}` | `#0f172a` | Display headings and dark section backgrounds | 20 | 1.0 | `--h1_typography-color` |
| `{colors.ghost}` | `#f8fafc` | Subtle section backgrounds and hover states | 11 | 1.0 | `--menu_bg_hover_color` |
| `{colors.chalk}` | `#e2e8f0` | Default borders and dividers | 4 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.safety-orange}` | `#ea580c` | Primary CTA background, icon accents, and active borders | 37 | 1.0 | `--awb-color4` |
| `{colors.royal-blue}` | `#1e3a8a` | Text links and active navigation states | 9 | 1.0 | `--link_color` |
| `{colors.muted-slate}` | `#64748b` | Tertiary text and small labels | 13 | 1.0 | `--h6_typography-color` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.success}` | `#12b878` | Positive outcomes / confirmed signals |
| `{colors.warning}` | `#f1ae2a` | Cautionary UI elements |
| `{colors.danger}` | `#db4b68` | Critical risk / error states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 600, 700 | All roles (Display, Heading, Body, UI) | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 48px | 48px | normal | 700 | Hero display | div:nth-of-type(1) |
| `{text.h2}` | 36px | 39.6px | normal | 600 | Section headers | h2.fusion-responsive |
| `{text.h3}` | 24px | 24px | normal | 700 | Sub-section titles | span |
| `{text.h4}` | 22px | 28.6px | normal | 600 | Card titles | h3.fusion-responsive |
| `{text.body-lg}` | 18px | 28.8px | normal | 400 | Lead paragraph | p:nth-of-type(1) |
| `{text.body}` | 16px | 24px | normal | 400 | Standard prose | section#content |
| `{text.body-bold}` | 16px | 24px | normal | 700 | Inline emphasis | a |
| `{text.label}` | 14px | 19.6px | normal | 600 | Buttons / UI labels | a.product-button |

### Principles
1. **Tight Display Leading:** Display sizes (48px) use a 1.0 line-height ratio to maintain visual density in heroes.
2. **High Contrast Ratios:** All primary text (#334155 or #0f172a) is set against white or very light gray to ensure clinical legibility.
3. **Weight-Based Hierarchy:** Differentiation between H2 and H4 is primarily driven by weight (600) and size, avoiding excessive tracking or styling.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 7 |
| `{space.sm}` | 12px | 13 |
| `{space.md}` | 20px | 30 |
| `{space.lg}` | 32px | 17 |
| `{space.xl}` | 40px | 10 |
| `{space.section}` | 80px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers / full-width bands | 98 occurrences |
| `{radius.sm}` | 6px | Buttons and small inputs | Rounded Button component |
| `{radius.md}` | 12px | Primary content cards | Card component (Tier 2) |
| `{radius.lg}` | 16px | Elevated feature cards | Card component (Tier 2) |
| `{radius.full}` | 50% | Icon backing and avatars | Card component (Tier 3) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px` | Standard feature cards | Card component |
| `{shadow.elevated}` | `rgba(0, 0, 0, 0.08) 0px 4px 20px 0px` | Hover states or floating panels | Card component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Secondary actions and navigation links.
**Pages observed:** 1
**Spec:** Background: transparent / Text: #1e3a8a / Border: #1e3a8a (0px observed) / Radius: 6px / Padding: 8px 20px / Typography: 14px 600.
**States observed:** Default: captured | Hover: not captured.

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific capabilities or suite products.
**Pages observed:** 1
**Spec:** Background: #ffffff / Text: #334155 / Border: #ea580c (4px top) / Radius: 12px / Padding: 32px 24px / Shadow: `{shadow.card}`.
**States observed:** Default: captured.

#### Elevated Card
**Role:** Results and metrics display.
**Pages observed:** 1
**Spec:** Background: #ffffff / Text: #334155 / Border: #e2e8f0 (1px) / Radius: 16px / Padding: 28px 20px / Shadow: `{shadow.elevated}`.

### Tier 3: Surface-specific

#### Primary CTA Button
**Role:** Main conversion point (e.g., "Contact Us").
**Pages observed:** 1
**Spec:** Background: #ea580c / Text: #ffffff / Border: none / Radius: 8px / Padding: 16px 32px / Typography: 16px 700.

#### Signal Icon Plate
**Role:** Background for category icons.
**Pages observed:** 1
**Spec:** Background: #ea580c / Radius: 50% / Size: variable (padding 0px).

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding | 80px vertical |
| Column Gap | 24px - 32px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Cards stack vertically; text aligns center in heroes; padding reduces to 20px. |
| Desktop | 1440px | 4-column grids for suite products; 5-column for metrics. |

## Imagery & decoration
- **Abstract Geometry:** Uses a triple-ring overlapping circular motif in heroes, rendered in low-opacity white or navy.
- **Iconography:** Solid-fill rounded squares or circles containing white glyphs, primarily in #ea580c.
- **Avoidance:** No photography of people; focuses on abstract data visualizations and clean iconography.

## Do's
- Use #ea580c for all primary interactive elements.
- Maintain 80px vertical spacing between major content sections.
- Apply `{radius.md}` (12px) to all white content cards.
- Ensure all display text uses Inter 700 for maximum authority.
- Use #0f172a for backgrounds when a "command" or "professional" tone is required.

## Don'ts
- **Wrong:** Using #ea580c as a background for large text blocks. **Right:** Use #ea580c for buttons and small accents only. **Reason:** Legibility and brand voltage control.
- **Wrong:** Mixing serif fonts with Inter. **Right:** Stick to the Inter family for all roles. **Reason:** Maintains the clinical, modern identity.
- **Wrong:** Applying shadows to dark-background sections. **Right:** Use flat colors or subtle borders for dark surfaces. **Reason:** Shadows are invisible on #0f172a.

## Similar brands
- Palantir (Clinical, data-heavy, dark mode usage)
- Epic Systems (Healthcare authority, structured layouts)
- Samsara (Industrial safety, orange accent usage)

## Quick start

### CSS Variables
```css
:root {
  --color-safety-orange: #ea580c;
  --color-obsidian: #0f172a;
  --color-slate: #334155;
  --color-canvas: #ffffff;
  --radius-card: 12px;
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px;
  --font-main: 'Inter', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #ea580c;
  --color-secondary: #0f172a;
  --color-neutral-text: #334155;
  --radius-md: 12px;
  --font-sans: "Inter";
}
```

## Agent prompt examples
- "Create a feature card with a 4px top border in #ea580c, a 12px border radius, and a subtle shadow."
- "Generate a hero section with a background of #0f172a, white Inter 700 text at 48px, and an orange primary button."
- "Design a 4-column grid of white cards using 16px padding and 16px border radius on a #f8fafc background."

## Known gaps
- Hover states for primary buttons were not explicitly captured in the token evidence.
- Form input focus states were not observed on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://pascalmetrics.com | Desktop 1440px | 2026-06-06 |
| Homepage Mobile | https://pascalmetrics.com | Mobile 390px | 2026-06-06 |