# Traildsoftware Design System

> Corporate fintech precision meets fluid organic motion, anchoring deep plum and technical blue against a stark white canvas.

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

## TL;DR
Traildsoftware utilizes a high-contrast palette of deep plum `#4c1034` and technical blue `#386cc7` to establish a professional yet modern fintech atmosphere. The system relies on **Oktah** for bold, geometric display headings and **Instrument Sans** for highly legible body and UI elements. Layouts are defined by generous 120px section spacing and distinctive organic "swoosh" background graphics in orange `#ff934f` and light blue `#e3f2ff`. Components favor a "pill" geometry for interactive elements, while content containers use a soft 16px radius.

## Signature DNA
1. **The Traild Swoosh** (Curved, multi-colored background ribbons in `#ff934f` and `#e3f2ff` that transition between sections, providing organic movement to a rigid grid).
2. **Plum-to-Blue Contrast** (The interplay between the deep primary border/surface color `#4c1034` and the primary action color `#386cc7`).
3. **Geometric Pill Geometry** (Buttons and badges consistently use `9999px` radii to soften the technical nature of the ERP integration content).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Primary surface, text on dark backgrounds | 69 | 1 | Computed |
| `{colors.black}` | `#000000` | Primary text, footer icons | 121 | 1 | Computed |
| `{colors.off-white}` | `#f2f2f2` | Inverted secondary text | 1 | 0.8 | `--text-secondary-invert` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.blue}` | `#386cc7` | Primary CTA, links, borders | 58 | 1 | `--cta-primary-surface` |
| `{colors.plum}` | `#4c1034` | Section backgrounds, primary borders | 54 | 1 | `--border-primary` |
| `{colors.dark-brown}` | `#230e0e` | Primary body text | 39 | 1 | `--text-primary` |
| `{colors.muted-purple}` | `#64515d` | Secondary body text | 38 | 1 | `--text-secondary` |
| `{colors.orange}` | `#ff934f` | Decorative swooshes, badges | 12 | 1 | `--surface-accent-secondary` |
| `{colors.sky}` | `#e3f2ff` | Card borders, background accents | 9 | 1 | `--surface-tertiary` |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{colors.success}` | `#008a17` | Success states |
| `{colors.error}` | `#ae0f0f` | Error validation |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Oktah | 500 | Display & Headings | Montserrat | Proprietary |
| Instrument Sans | 400, 500 | Body, UI, Buttons | Instrument Sans (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 44px | 48px | normal | 500 | Hero H1 | `h2.typography-h2` |
| `{type.h2}` | 28px | 36px | normal | 500 | Section Headings | `span.typography-h4` |
| `{type.h3}` | 24px | 36px | normal | 400 | Testimonials | `span.jw-tile-testimonial__description` |
| `{type.body-lg}` | 18px | 28px | normal | 500 | Large Body/CTA | `span.cta-contained__label--primary` |
| `{type.body}` | 16px | 24px | normal | 400 | Standard Body | `a.jw-cta.jw-cta__primary` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Captions/Labels | `span.typography-caption` |

### Principles
1. **Heading Geometry:** Headings use Oktah with a geometric, low-contrast stroke for a modern fintech feel.
2. **Body Clarity:** Instrument Sans is used for all functional text to maintain high legibility at 16px.
3. **No Bold Display:** Display type relies on size and font-family weight (500) rather than heavy bolding (700+).

## Spacing
**Base unit:** 8px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 34 |
| `{space.sm}` | 16px | 13 |
| `{space.md}` | 24px | 5 |
| `{space.xl}` | 48px | 3 |
| `{space.section}` | 120px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Layout containers | 153 occurrences |
| `{radius.card}` | 16px | Feature cards, testimonials | 21 occurrences |
| `{radius.panel}` | 24px | Large UI panels | 5 occurrences |
| `{radius.pill}` | 9999px | Buttons, badges | 93 occurrences |

## Components
### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call to action
**Pages observed:** https://traildsoftware.com
**Spec:** Background: `#386cc7` / Text: `#ffffff` / Border: `none` / Radius: `9999px` / Padding: `8px 24px` / Typography: `Instrument Sans 500`
**States observed:** Default | Hover: `#386cc7` (captured)

#### Secondary Pill Button
**Role:** Ghost/Outline actions
**Pages observed:** https://traildsoftware.com
**Spec:** Background: `transparent` / Text: `#000000` / Border: `1px solid #386cc7` / Radius: `9999px` / Padding: `8px 24px`
**States observed:** Default | Hover (captured)

### Tier 2: Patterns

#### Feature Card
**Role:** Product and integration highlights
**Pages observed:** https://traildsoftware.com
**Spec:** Background: `#ffffff` / Text: `#000000` / Border: `1px solid #e3f2ff` / Radius: `16px` / Padding: `12px`
**States observed:** Default (captured)

#### Status Badge
**Role:** Small labels for "Explore Products"
**Pages observed:** https://traildsoftware.com
**Spec:** Background: `transparent` / Text: `#000000` / Border: `1px solid #ff934f` / Radius: `9999px` / Padding: `4px 12px`
**States observed:** Default (captured)

### Tier 3: Surface-specific

#### Dark Section Container
**Role:** High-impact brand messaging (e.g., "Discover the Traild Difference")
**Pages observed:** https://traildsoftware.com
**Spec:** Background: `#4c1034` / Text: `#ffffff` / Radius: `0px` / Padding: `120px vertical`
**States observed:** Default (captured)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px |
| Section Padding | 120px (Vertical) |
| Grid | 12-column desktop |

## Do's
- Use `#386cc7` for all primary interactive elements.
- Apply `{radius.pill}` to all buttons and badges.
- Use Oktah only for headings and display text.
- Maintain 120px vertical spacing between major content sections.
- Use `#4c1034` for full-width high-contrast section backgrounds.

## Don'ts
- Do not use `#ff934f` (Orange) for primary buttons; it is a decorative/badge color only.
- Do not use sharp corners for cards; always use `{radius.card}` (16px).
- Do not mix Oktah and Instrument Sans within the same text block.
- Do not use saturated colors for body text; stick to `#230e0e` or `#64515d`.

## Quick start

```css
:root {
  --color-primary: #386cc7;
  --color-plum: #4c1034;
  --color-text-main: #230e0e;
  --color-text-muted: #64515d;
  --color-accent-orange: #ff934f;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --font-display: 'Oktah', sans-serif;
  --font-body: 'Instrument Sans', sans-serif;
}
```

## Known gaps
- Hover states for navigation links were not explicitly captured in the token set.
- Mobile-specific typography scale (breakpoints) not fully defined in evidence.
- Shadow tokens were not detected in the computed styles, suggesting a flat design approach.