# Traice Design System

> High-contrast financial intelligence anchored by deep navy typography and vibrant magenta action signals on a clean white canvas.

**Source:** https://traice.io | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Traice utilizes a high-contrast "monochrome-plus" palette where a pure white canvas (#ffffff) supports deep navy text (#10374d) and secondary surfaces in pale sky blue (#eef6ff). The brand voltage is concentrated in a single high-saturation magenta (#eb467e) used exclusively for primary CTAs and status badges. Typography is a sophisticated pairing of Spinnaker for geometric headlines and Poppins for high-legibility body content. Layouts are structured around generous vertical spacing and rounded containers (10px to 50px) that soften the analytical nature of the risk-monitoring product.

## Signature DNA
1. **The Magenta Punctuation** (The use of #eb467e as the sole high-energy color against a cold navy and white base to drive conversion. Seen on all "Schedule a demo" and "Login" actions.)
2. **Geometric Sans Pairing** (The interplay between Spinnaker's wide apertures in headings and Poppins' circular efficiency in UI labels. Evidence: `h4.font_4` vs `span.wixui-rich-text__text`.)
3. **Softened Data Surfaces** (Risk monitoring cards and inputs use a consistent 10px to 15px radius, avoiding the "sharp" edges typical of legacy financial software. Evidence: `radii.control` and `radii.card`.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.canvas}` | `#ffffff` | Primary page background and button text | 113 | 1 | `--wst-color-fill-background-primary` |
| `{colors.ink-primary}` | `#10374d` | Primary headings and titles | 233 | 1 | `--wst-color-title` |
| `{colors.ink-secondary}` | `#1e2b51` | Subtitles and secondary text | 57 | 1 | `--wst-color-subtitle` |
| `{colors.surface-soft}` | `#eef6ff` | Section backgrounds and subtle cards | 11 | 0.8 | `computed_style` |
| `{colors.neutral-dark}` | `#303030` | Default body text | 159 | 0.8 | `--wst-color-text-primary` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.action-primary}` | `#eb467e` | Primary CTA background, badges | 5 | 0.6 | `computed_style` |
| `{colors.action-secondary}` | `#2fa4e7` | Secondary buttons, borders, and links | 6 | 1 | `--wst-color-action` |
| `{colors.highlight}` | `#d4d200` | Decorative text / emphasis | 33 | 1 | `--wst-color-custom-8` |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{colors.success}` | `#2fa4e7` | Positive metrics and progress indicators |
| `{colors.disabled}` | `#b8b8b8` | Inactive states and placeholders |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| Spinnaker | 400, 700 | Display and Headings | Montserrat | Licensed |
| Poppins | 400, 500, 700 | Body, UI Labels, Buttons | Poppins (Google Fonts) | OFL |
| Arial | 400 | System fallback | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 55px | 60.5px | normal | 700 | Hero Headlines | `h4.font_4` |
| `{type.h1}` | 45px | normal | normal | 700 | Section Headers | `h5.font_5` |
| `{type.h2}` | 32px | normal | normal | 700 | Feature Titles | `h5.font_5` |
| `{type.h3}` | 28px | 39.2px | normal | 700 | Sub-section Headers | `h6.font_6` |
| `{type.h4}` | 25px | 35px | normal | 400 | Card Titles | `span.wixui-rich-text__text` |
| `{type.body-lg}` | 18px | 25.2px | normal | 700 | Lead Paragraphs | `h6.font_6` |
| `{type.body}` | 15px | normal | normal | 500 | Standard Body | `span.wixui-rich-text__text` |
| `{type.caption}` | 13px | 18.2px | normal | 400 | Small labels / Footer | `p.font_8` |

### Principles
1. **Bold Display Hierarchy**: All display and heading levels (H1-H3) strictly use weight 700 to maintain authority.
2. **Generous Leading**: Body text at 18px uses a 1.4x line-height (25.2px) to ensure readability in data-heavy contexts.
3. **Spaced Buttons**: Button labels (`{type.body}`) often employ a 0.9px letter-spacing to increase "clickability" perception.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 3px | 11 |
| `{space.sm}` | 6px | 4 |
| `{space.md}` | 18px | 17 |
| `{space.section}` | 223px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Default containers | 680 occurrences |
| `{radius.md}` | 10px | Text inputs | `Text Input` component |
| `{radius.lg}` | 15px | Content cards | `Surface` component |
| `{radius.pill}` | 50px | Primary buttons | `Rounded Button` component |
| `{radius.circle}` | 300px | Decorative avatars/icons | `Card` component |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.6) 0px 0px 4px 0px` | Floating cards on light blue | `Surface` component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action (Schedule a demo, Login)
**Pages observed:** https://traice.io
**Spec:** Background: `#eb467e` | Text: `#ffffff` | Radius: `50px` | Padding: `10px 24px` (inferred) | Typography: `Poppins 700`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Text Input
**Role:** Lead capture and search
**Pages observed:** https://traice.io
**Spec:** Background: `#ffffff` | Text: `#000000` | Border: `1px solid #ffffff` | Radius: `10px` | Padding: `3px 18px`
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying risk monitoring categories
**Pages observed:** https://traice.io
**Spec:** Background: `#ffffff` | Border: `1px solid #2fa4e7` | Radius: `0px` | Shadow: `none`
**States observed:** Default

#### Resource Card
**Role:** Blog and Case Study previews
**Pages observed:** https://traice.io
**Spec:** Background: `#eef6ff` | Text: `#10374d` | Radius: `0px` | Shadow: `subtle`
**States observed:** Default

### Tier 3: Surface-specific

#### Status Badge
**Role:** Categorizing resources (Blog, Case Study)
**Pages observed:** https://traice.io
**Spec:** Background: `#eb467e` | Text: `#ffffff` | Radius: `15px` | Typography: `Poppins 13px`
**States observed:** Default

#### Value Plate
**Role:** Icon containers for "Our Values" section
**Pages observed:** https://traice.io
**Spec:** Background: `transparent` | Border: `1px solid #80bfff` | Radius: `0px`
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max-width | 1200px |
| Section Padding | 223px (Vertical) |
| Column Gap | 18px |

## Imagery & decoration
Traice uses technical illustrations with thin-line "circuit" motifs and data visualization gradients. It avoids stock photography of people in favor of abstract representations of "Business Loan Monitoring" and "Cyber Security."

## Do's
- Use `#eb467e` for the primary conversion button on every page.
- Set all main section titles in Spinnaker Bold (`weight: 700`).
- Use `#eef6ff` as a background for alternating content bands to reduce eye strain.
- Apply a `10px` radius to all form input fields.
- Maintain a minimum vertical section gap of `160px` to `223px`.

## Don'ts
- **Wrong:** Using `#2fa4e7` (Action Secondary) for a primary "Sign Up" button. **Right:** Use Magenta `#eb467e`. **Reason:** Magenta is the high-priority conversion signal.
- **Wrong:** Labeling a sub-brand accent color as the parent primary. **Right:** The parent primary is `#000000` (achromatic) with `#10374d` (Navy) as the lead brand color.
- Do not use sharp `0px` corners on interactive input elements.
- Do not use Poppins for display headers larger than `40px`; use Spinnaker.

## Similar brands
- Stripe (High-contrast typography and clean surfaces)
- Plaid (Financial data visualization style)
- Chainalysis (Technical, navy-heavy security aesthetic)

## Quick start

```css
/* CSS Variables */
:root {
  --traice-navy: #10374d;
  --traice-magenta: #eb467e;
  --traice-sky: #eef6ff;
  --traice-white: #ffffff;
  --traice-font-display: 'Spinnaker', sans-serif;
  --traice-font-body: 'Poppins', sans-serif;
  --traice-radius-pill: 50px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Traice Magenta #eb467e with white Poppins text and a 50px border radius."
- "Create a content section with a #eef6ff background, featuring an H2 title in Spinnaker Bold #10374d."
- "Design a card component with a 1px border in #2fa4e7 and a white background."

## Known gaps
- Hover and Active states for buttons were not captured in the static trace.
- Mobile-specific navigation transitions were not fully documented.
- The specific gradient stops for the "Risk Index" gauge were not extracted as individual tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|------|-------------|
| Homepage | https://traice.io | 1440x900 | 2026-06-06T05:23Z |
| Homepage (Mobile) | https://traice.io | 390x844 | 2026-06-06T05:24Z |