# Trinetcloud Design System

> Functional utility meets corporate clarity through light-weight serifs and high-contrast sky blue actions.

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

## TL;DR
Trinetcloud utilizes a clean, utility-first aesthetic defined by a stark white foundation (`#ffffff`) and a primary sky blue accent (`#22a9fa`). The system relies on **Source Sans Pro** across all levels, notably using a light weight (300) for headers to create an approachable, professional atmosphere. Interaction points are clearly demarcated by 3px rounded corners and subtle inset shadows on inputs to provide depth without clutter. The palette is predominantly achromatic, using cool grays (`#848c99`, `#67717d`) for text and borders, ensuring the blue primary actions remain the focal point of the user journey.

## Signature DNA
1. **Lightweight Typography** (Source Sans Pro at weight 300 is used for both primary headings and form labels, creating a consistent, airy information hierarchy across all pages).
2. **Sky Blue Primaries** (The use of `#22a9fa` for both button backgrounds and active borders creates a singular, high-visibility path for user conversion).
3. **Soft Inset Depth** (Inputs utilize a specific inset shadow `rgba(0, 0, 0, 0.075) 0px 1px 1px 0px` to distinguish interactive fields from the flat canvas).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page canvas, button text, input background | 9 | 0.6 | Computed Style |
| `{color.border.light}` | `#cacedb` | Default input and panel borders | 6 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#22a9fa` | Primary CTA background, active borders | 6 | 0.6 | Computed Style |
| `{color.text.primary}` | `#848c99` | Default body text, input placeholders | 12 | 0.8 | Computed Style |
| `{color.text.strong}` | `#67717d` | Secondary headings, emphasized text | 12 | 0.8 | Computed Style |
| `{color.text.muted}` | `#596679` | De-emphasized labels | 3 | 0.6 | Computed Style |
| `{color.link.alt}` | `#00aaef` | Inline text links, "Forgot Password" | 6 | 0.6 | Computed Style |
| `{color.error}` | `#f33f27` | Validation messages (decorative_only) | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Source Sans Pro | 300, 400 | All UI, Headings, Inputs | Source Sans 3 (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h3}` | 24px | 33.6px | normal | 300 | Section titles | `h3.title` |
| `{type.button.lg}` | 18px | 24px | normal | 400 | Primary actions | `button.btn.btn-lg` |
| `{type.body.md}` | 16px | 22.8px | normal | 400 | Default container text | `section#wrapper` |
| `{type.label}` | 16px | 22.8px | normal | 300 | Form field labels | `label.control-label` |
| `{type.body.sm}` | 15px | 21.4px | normal | 400 | Error/Helper text | `span.error-msg` |
| `{type.input}` | 16px | 22.8px | normal | 400 | User entry text | `input.form-control` |
| `{type.link}` | 16px | 22.8px | normal | 400 | Navigation/Footer links | `a` |
| `{type.caption}` | 14px | 20px | normal | 400 | Small annotations | Not captured in source |

### Principles
1. **Lightweight Hierarchy:** Use weight 300 for headings to maintain a clean, non-aggressive corporate feel.
2. **Vertical Rhythm:** Line heights are consistently ~1.4x the font size (e.g., 16px/22.8px).
3. **Contrast over Color:** Text relies on gray values (`#848c99` vs `#67717d`) rather than color shifts for hierarchy.

## Spacing
**Base unit:** 4px (approximated from 12px/16px clusters)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 6px | 6 |
| `{space.sm}` | 10px | 6 |
| `{space.md}` | 12px | 6 |
| `{space.lg}` | 16px | 3 |
| `{space.xl}` | 30px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section dividers, containers | 30 occurrences |
| `{radius.sm}` | 3px | Buttons, Text Inputs | 9 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.inset}` | `rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset` | Form inputs | 6 occurrences |

## Components

### Tier 1: Foundational

#### Text Input
**Role:** Standard user data entry field.
**Pages observed:** 3
**Spec:** Background: `#ffffff` | Text: `#848c99` | Border: 1px `#cacedb` | Radius: 3px | Padding: 6px 12px | Shadow: `{shadow.inset}`
**States observed:** Default: Captured | Hover: Not captured | Focus: Not captured | Active: Not captured

#### Rounded Button
**Role:** Primary page action (Login, Submit).
**Pages observed:** 3
**Spec:** Background: `#22a9fa` | Text: `#ffffff` | Border: 1px `#22a9fa` | Radius: 3px | Padding: 10px 16px | Typography: 18px/400
**States observed:** Default: Captured | Active: Captured

### Tier 2: Patterns

#### Form Group
**Role:** Vertical stack of label and input.
**Pages observed:** 3
**Spec:** Label Typography: 16px/300 | Label Color: `#848c99` | Bottom Margin: 15px (approx)

#### Error Message
**Role:** Inline validation feedback.
**Pages observed:** 3
**Spec:** Text: `#f33f27` | Typography: 15px/400 | Position: Below input

## Layout
| Property | Value |
|---|---|
| Max content width | 1170px (Standard Bootstrap container) |
| Section padding | 30px |
| Column gap | 15px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Form groups stack 100% width; padding reduces to 15px |
| Desktop | 1440px | Centered containers with max-width |

## Imagery & decoration
The brand uses a minimalist approach, avoiding photography in the core UI. Decoration is limited to the "Trinetcloud" wordmark and simple horizontal dividers to separate the header from the content body.

## Do's
- Use **Source Sans Pro 300** for all primary headings.
- Apply the **3px border radius** to all interactive components.
- Use `#22a9fa` exclusively for primary call-to-action elements.
- Maintain white backgrounds for all primary content surfaces.
- Ensure inputs have the **inset shadow** to provide tactile depth.

## Don'ts
- Do not use bold weights (700+) for headings; stick to 300/400.
- Do not use `#f33f27` (Red) for anything other than error states.
- Do not use rounded corners larger than 3px.
- Do not use dark backgrounds for content containers.
- Do not use the sky blue accent for non-interactive text.

## Similar brands
- DigitalOcean (Clean, blue-centric utility)
- Zendesk (Soft corporate typography)
- Linode (Functional, high-contrast cloud UI)

## Quick start

### CSS Variables
```css
:root {
  --color-primary: #22a9fa;
  --color-text-main: #848c99;
  --color-text-strong: #67717d;
  --color-border: #cacedb;
  --font-family: 'Source Sans Pro', sans-serif;
  --radius-sm: 3px;
  --shadow-inset: rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset;
}
```

### Tailwind v4
```javascript
@theme {
  --color-sky-blue: #22a9fa;
  --color-slate-gray: #848c99;
  --font-source: "Source Sans Pro";
  --shadow-inner-soft: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  --radius-input: 3px;
}
```

## Agent prompt examples
- "Create a login form using Source Sans Pro 300 for labels and a sky blue (#22a9fa) button with 3px rounded corners."
- "Design a text input field with a 1px #cacedb border and an inset shadow of rgba(0,0,0,0.075) 0px 1px 1px."
- "Generate a section header using Source Sans Pro at 24px and weight 300 in #67717d."

## Known gaps
- Hover and Focus states for buttons and inputs were not explicitly captured in the static evidence.
- Secondary button variants (outline or ghost) were not observed on the primary analyzed pages.
- Mobile navigation menu behavior (hamburger vs. list) was not fully documented.

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