# PowerDMS Design System

> High-contrast utility anchored by technical blues and rigid 4px geometry.

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

## TL;DR
PowerDMS utilizes a monochrome-leaning utility aesthetic that prioritizes legibility and functional hierarchy. The system is built on a pure white `#ffffff` canvas, using a primary technical blue `#196fb3` for interactive text and a lighter sky blue `#208dca` for focus states and borders. Typography is dominated by **Roboto**, specifically leveraging a light weight (300) for primary headers to create an authoritative but modern feel. Component geometry is strictly defined by 4px border radii and 1px hairlines, with depth only appearing during active input states via a specific light blue glow shadow.

## Signature DNA
1. **The Roboto 300 Header** (Roboto at weight 300 is used for primary titles like `h2.userLogin_title`, creating a clean, high-legibility display style that contrasts with the 700-weight functional buttons.)
2. **Technical Blue Accents** (The use of `#196fb3` for links and `#208dca` for input borders provides a "government-tech" or "compliance" aesthetic that feels secure and standardized.)
3. **Rigid 4px Geometry** (All interactive elements, from cards to text inputs and buttons, share a uniform 4px radius, ensuring a consistent modular grid.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary background and surface color | 6 | 0.6 | computed_style |
| `{color.text.primary}` | `#666666` | Default body text and secondary labels | 21 | 0.8 | computed_style |
| `{color.border.default}` | `#e5e5e5` | Button backgrounds and light dividers | 6 | 0.6 | computed_style |
| `{color.border.strong}` | `#cacaca` | Card outlines and structural dividers | 3 | 0.6 | computed_style |
| `{color.ink}` | `#000000` | High-contrast button text | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#196fb3` | Primary action text and brand links | 6 | 0.6 | computed_style |
| `{color.primary.light}` | `#208dca` | Active input borders and focus indicators | 3 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| **Roboto** | 300, 400, 700 | Display, Headings, UI Labels | N/A (Google Font) | Apache 2.0 |
| **PowerDMS** | 400 | Iconography and brand-specific glyphs | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 30px | normal | normal | 300 | Primary Page Titles | `h2.userLogin_title` |
| `{type.heading.md}` | 20px | normal | normal | 400 | Section Headings | `h3.siteObtainer_heading` |
| `{type.body.md}` | 14px | normal | normal | 400 | Default UI Text | `section.userLogin` |
| `{type.body.bold}` | 14px | 20px | normal | 700 | Primary Button Text | `input#btnContinue` |
| `{type.icon.sm}` | 14px | normal | normal | 400 | Inline UI Icons | `span.pow-fc.fa` |

### Principles
1. **Weight Contrast:** Use 300 weight for large headers and 700 weight for small interactive labels to create hierarchy without changing font families.
2. **Standardized Sizing:** 14px is the workhorse size for all body, label, and button text.
3. **Icon Integration:** The custom `PowerDMS` font is used for iconography, mapped to the same 14px baseline as body text.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xxs}` | 1px | 6 |
| `{space.xs}` | 2px | 3 |
| `{space.sm}` | 6px | 6 |
| `{space.md}` | 10px | 9 |
| `{space.lg}` | 20px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp containers / layout blocks | 21 occurrences |
| `{radius.md}` | 4px | Buttons, Inputs, Cards | 9 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.focus}` | `rgb(179, 226, 250) 0px 0px 2px 1px` | Active text input focus state | Text Input component |

## Components
### Tier 1: Foundational

#### Text Input
**Role:** Primary data entry for site keys and credentials.
**Pages observed:** All analyzed pages.
**Spec:** Background `#ffffff` / Text `#666666` / Border `#208dca` / Radius `4px` / Padding `1px 2px` / Shadow `rgb(179, 226, 250) 0px 0px 2px 1px`
**States observed:** Default, Focus.

#### Rounded Button
**Role:** Secondary actions and "Continue" flows.
**Pages observed:** All analyzed pages.
**Spec:** Background `#e5e5e5` / Text `rgba(0, 0, 0, 0.38)` / Border `#e5e5e5` / Radius `4px` / Padding `7px 19px` / Typography `{type.body.bold}`
**States observed:** Default, Disabled.

### Tier 2: Patterns

#### Card
**Role:** Centralized login and content containers.
**Pages observed:** All analyzed pages.
**Spec:** Background `#ffffff` / Text `#666666` / Border `#208dca` / Radius `4px` / Padding `0px` / Shadow `none`
**States observed:** Default.

## Layout
| Property | Value |
|------|-------|
| Max-width | 1440px (Desktop) |
| Container Alignment | Centered |
| Header Height | 64px (approx based on logo scale) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Card expands to 100% width; background watermark hidden. |
| Desktop | 1440px | Card centered with large background watermark. |

## Imagery & decoration
The brand uses a large, low-opacity "Power" icon watermark in the background of login screens. It avoids photography, relying on flat iconography and the technical blue palette to convey utility.

## Do's
- Use **Roboto 300** for all primary page headers.
- Apply a **4px border radius** to all interactive components.
- Use `#196fb3` for text-based links and primary navigation.
- Ensure the focus shadow `rgb(179, 226, 250) 0px 0px 2px 1px` is applied to all active inputs.
- Maintain a pure white `#ffffff` background for all content cards.

## Don'ts
- **Don't** use rounded corners on main layout containers (keep at 0px).
- **Don't** use bold weights for display headers; stick to weight 300.
- **Don't** introduce secondary accent colors; the system is strictly blue/gray/white.
- **Don't** use the sub-brand orange (if applicable) for parent-level primary buttons.
- **Don't** apply shadows to cards; use 1px borders for elevation.

## Similar brands
- Microsoft Azure (Portal UI)
- Okta (Admin Dashboard)
- Zendesk (Classic UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #196fb3;
  --color-primary-light: #208dca;
  --color-canvas: #ffffff;
  --color-text-main: #666666;
  --radius-md: 4px;
  --shadow-focus: 0px 0px 2px 1px rgb(179, 226, 250);
  --font-display: 'Roboto', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #196fb3;
  --color-primary-light: #208dca;
  --font-roboto: "Roboto";
  --radius-md: 4px;
  --shadow-focus: 0 0 2px 1px #b3e2fa;
}
```

## Agent prompt examples
- "Create a login card using a 1px border of #208dca, a 4px border radius, and a Roboto weight 300 header."
- "Design a primary button with a #e5e5e5 background, 14px Roboto Bold text, and 7px 19px padding."
- "Generate a text input field that uses a 1px border of #208dca and shows a light blue glow shadow on focus."

## Known gaps
- Hover states for primary buttons were not captured in the automated crawl.
- Error state colors (Semantic Red) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|-------------|--------------|
| Login | https://powerdms.com | 1440x900 | 2026-06-06 |
| Pricing | https://powerdms.com/pricing | 1440x900 | 2026-06-06 |
| About | https://powerdms.com/about | 390x844 | 2026-06-06 |