# Batonsimulations Design System

> Corporate enterprise clarity anchored by high-contrast slate typography and punctuated by a single high-voltage safety-yellow accent.

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

## TL;DR
The Batonsimulations identity is a structured, monochrome-first system designed for enterprise authority. It utilizes a foundation of Slate Grey (#42474d) and Charcoal (#5c6065) against a pure white canvas to establish a professional, "consultancy-grade" atmosphere. The system’s primary visual energy is derived from a single high-contrast primary color: a bright yellow (#fdca00) used exclusively for high-priority CTAs and brand-mark accents. Typography is strictly dual-font, pairing the geometric stability of Lato for headers with the high-legibility humanist traits of Libre Franklin for dense body copy.

## Signature DNA
1. **The Safety-Yellow Punctuation:** High-saturation yellow (#fdca00) is used as a surgical strike against an otherwise achromatic layout, reserved for primary buttons and the "i" dot in the wordmark.
2. **Slate-on-White Contrast:** Eschewing pure black for body text, the system uses #42474d to maintain a softer but still authoritative 9.4:1 contrast ratio.
3. **Geometric Header Tracking:** Lato headlines are consistently tracked at +1px, creating a wide, airy display style that balances the dense, 1.5x line-height body copy.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.slate}` | `#42474d` | Primary text, wordmark, button labels | 53 | 0.8 | computed_style |
| `{color.charcoal}` | `#5c6065` | Secondary text, section backgrounds | 47 | 0.8 | computed_style |
| `{color.white}` | `#ffffff` | Page canvas, card backgrounds, button text | 32 | 1.0 | `--ld-color-system-white` |
| `{color.black}` | `#000000` | Deep shadows, card borders | 4 | 1.0 | `--wp--preset--color--black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#fdca00` | Primary CTA background, brand accent | 7 | 0.6 | computed_style |
| `{color.teal}` | `#4c947b` | Decorative text (quotes/emphasis) | 5 | 0.6 | decorative_only |
| `{color.navy}` | `#0c264c` | Footer/Header link hover (observed) | 3 | 0.6 | decorative_only |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | `#2f8351` | Validation success |
| `{color.error}` | `#db0000` | Validation error |
| `{color.warning}` | `#f3b33e` | Alert warning |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Lato | 500, 600, 700 | Headings, Display | Lato (Google Fonts) | OFL |
| Libre Franklin | 400, 500, 600 | Body, Navigation | Libre Franklin (Google Fonts) | OFL |
| Rubik | 400, 700 | Secondary Body | Rubik (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.h1}` | 36px | 36px | 1px | 500 | Hero headlines | `h1:nth-of-type(1)` |
| `{text.h2}` | 24px | 24px | 1px | 600 | Section headers | `h2.et_pb_module_heading` |
| `{text.h3}` | 20px | 20px | 1px | 500 | Subsection titles | `h3:nth-of-type(1)` |
| `{text.h4}` | 20px | 20px | 1px | 700 | Card titles | `h4.title` |
| `{text.body.lg}` | 17px | 25.5px | normal | 700 | Featured quotes | `div#n2-ss-10item3` |
| `{text.body}` | 16px | 22.4px | normal | 400 | Standard body | `p.text-dark` |
| `{text.nav}` | 15px | 14px | normal | 600 | Top navigation | `a` |
| `{text.caption}` | 14px | 14px | normal | 400 | Footer links | `article#post-14694` |

### Principles
1. **Wide Header Tracking:** All Lato headings (h1-h3) must use a minimum of 1px letter spacing.
2. **Achromatic Hierarchy:** Use Slate (#42474d) for primary readability and Charcoal (#5c6065) for secondary descriptive text.
3. **Pill-less Buttons:** Buttons are strictly rectangular or slightly rounded (10px), never full pills.

## Spacing
**Base unit:** 10px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 6 |
| `{space.sm}` | 10px | 41 |
| `{space.md}` | 20px | 4 |
| `{space.lg}` | 30px | 11 |
| `{space.xl}` | 40px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default sections, sharp cards | 119 occurrences |
| `{radius.md}` | 10px | Interactive cards, primary buttons | 4 occurrences |
| `{radius.lg}` | 50px | Large decorative containers | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.13) 0px 1px 10px 0px` | Floating content cards | Component: Card |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** https://batonsimulations.com
**Spec:** Background `{color.primary}` (#fdca00) / Text `{color.slate}` (#42474d) / Radius 0px / Padding 10px 30px / Font `{text.nav}`
**States observed:** Default | Hover: captured (#0e2a90 observed in tokens)

### Tier 2: Patterns
#### Testimonial Card
**Role:** Social proof sections
**Pages observed:** https://batonsimulations.com
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.charcoal}` (#5c6065) / Radius 10px / Shadow `{shadow.card}` / Padding 40px 10px 30px
**States observed:** Default: captured

#### Feature Surface
**Role:** Content grouping
**Pages observed:** https://batonsimulations.com
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.slate}` (#42474d) / Radius 0px / Padding 10px 30px
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Video Overlay Card
**Role:** Hero media interaction
**Pages observed:** https://batonsimulations.com
**Spec:** Background `rgba(0, 0, 0, 0.67)` / Text `{color.white}` (#ffffff) / Radius 50px / Padding 5px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1080px (approx) |
| Section Padding | 50px |
| Column Gap | 30px |

## Do's
- Use `#fdca00` only for primary actions and brand-mark accents.
- Track Lato headlines at exactly `1px`.
- Use `#42474d` for all primary body text to ensure high contrast.
- Apply `{shadow.card}` to white cards sitting on light grey backgrounds.
- Maintain a `1.5` line-height for `Libre Franklin` body text.

## Don'ts
- **Wrong:** Using `#235af3` (Brand Primary Token) as the main background for parent brand buttons. 
  **Right:** Use `#fdca00`. 
  **Reason:** The parent brand uses yellow as its primary visual signal; blue is a sub-brand/system token.
- Do not use pill-shaped (9999px) radii for buttons; stick to sharp or 10px corners.
- Do not use pure black (#000000) for long-form body text.
- Do not remove the 1px tracking from Lato headlines.

## Similar brands
- SAP (Enterprise structure, similar partner ecosystem)
- McKinsey & Company (Consultancy-grade typography and spacing)
- Deloitte (Monochrome foundation with high-contrast accent)

## Quick start

```css
/* CSS Variables */
:root {
  --baton-primary: #fdca00;
  --baton-slate: #42474d;
  --baton-charcoal: #5c6065;
  --baton-white: #ffffff;
  --baton-shadow: rgba(0, 0, 0, 0.13) 0px 1px 10px 0px;
  --font-heading: 'Lato', sans-serif;
  --font-body: 'Libre Franklin', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using #fdca00 background and #42474d text, with 0px border radius and 10px 30px padding."
- "Generate a section header using Lato at 24px with 1px letter spacing and #42474d color."
- "Design a white card with a 10px border radius and a subtle shadow of rgba(0,0,0,0.13) 0px 1px 10px."

## Known gaps
- Hover states for navigation items were not explicitly captured in the rendered styles, though `--ld-color-semantic-text-link-hover` exists in tokens.
- Mobile-specific breakpoint transitions for the 3-column testimonial grid were not fully detailed in the evidence.

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