# Braintoy Design System

> High-contrast geometric blocks of deep plum and vibrant coral anchored by clean, rounded sans-serif typography.

**Source:** https://braintoy.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Braintoy utilizes a bold, high-contrast palette of Deep Plum (#492b70) and Coral (#e64b38) to create a structured, professional AI identity. The system relies on large, monochromatic section blocks and a rounded typography scale (Nunito) to soften the technical nature of the product. Layouts are defined by significant vertical spacing (50px to 100px) and a mix of sharp-edged section containers paired with soft, rounded UI elements (10px to 50px radii). The visual language is functional and high-impact, avoiding gradients in favor of flat, saturated color surfaces.

## Signature DNA
1. **Chromatic Blocking** (Large alternating sections of #492b70 and #e64b38 create a rhythmic, high-energy scroll on the homepage and about page.)
2. **Rounded Display Type** (Nunito at weights 600-800 provides a friendly, accessible counterpoint to the aggressive color palette, seen in all primary headers.)
3. **Geometric Depth** (The use of subtle shadows `rgba(36, 36, 36, 0.1) 0px 3px 40px` on white cards creates a floating effect against the flat, saturated background blocks.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#ffffff` | Page background, card surfaces, primary text | 144 | 1.0 | computed_style |
| `{color.ink}` | `#545454` | Default body text | 92 | 0.8 | computed_style |
| `{color.ink.strong}` | `#000000` | Labels, form borders, headings | 18 | 1.0 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#e64b38` | Coral: Primary CTA background, section fills, accent text | 39 | 0.8 | computed_style |
| `{color.secondary}` | `#492b70` | Plum: Secondary buttons, dark section fills, footer | 29 | 0.8 | computed_style |
| `{color.muted}` | `#69727d` | Slate: De-emphasized text, icons | 8 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `{color.error}` | `#d63637` | Form validation error text |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Nunito | 300, 400, 500, 600, 700, 800 | Primary Display & UI | Nunito (Google Fonts) | SIL Open Font |
| Kanit | 600 | Navigation | Kanit (Google Fonts) | SIL Open Font |
| Manrope | 400, 600, 700 | Secondary Headings | Manrope (Google Fonts) | SIL Open Font |
| Montserrat | 300 | Button Labels | Montserrat (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.xl}` | 60px | 60px | normal | 600 | Hero Display | `h2.elementor-heading-title` |
| `{type.display.lg}` | 52px | 62.4px | normal | 700 | Animated Headlines | `h3.elementor-headline` |
| `{type.h2}` | 35px | 35px | normal | 700 | Section Headers | `h2.elementor-heading-title` |
| `{type.h3}` | 32px | 32px | normal | 600 | Sub-section Headers | `h2.elementor-heading-title` |
| `{type.body.lg}` | 18px | 32.4px | normal | 400 | Primary Body Copy | `section.elementor-section` |
| `{type.nav}` | 18px | 20px | normal | 600 | Header Navigation | `a.elementor-item-active` |
| `{type.body}` | 16px | 25.6px | normal | 300 | Secondary Body | `p` |
| `{type.button}` | 15px | 15px | normal | 600 | Primary Buttons | `a.elementor-button-link` |
| `{type.caption}` | 12px | 12px | normal | 400 | Small labels | `span.elementor-heading-title` |

### Principles
1. **Header Weight Dominance:** Display type never drops below 600 weight; bold Nunito is the primary brand identifier.
2. **Generous Body Leading:** Body text at 18px uses a 1.8x line-height (32.4px) for high readability on saturated backgrounds.
3. **Sans-Serif Only:** No serifs are permitted; the brand maintains a modern, technical feel through geometric sans-serifs.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 10px | 34 |
| `{space.sm}` | 20px | 20 |
| `{space.md}` | 24px | 13 |
| `{space.lg}` | 50px | 20 |
| `{space.xl}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Primary Buttons, Section Containers | Button components |
| `{radius.sm}` | 5px | Feature Cards | White content cards |
| `{radius.md}` | 10px | Interactive Controls | Card components |
| `{radius.lg}` | 25px | Rounded Buttons, Pill Surfaces | Secondary buttons |
| `{radius.full}` | 50px | Decorative Plates | Accent surfaces |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.soft}` | `rgba(36, 36, 36, 0.1) 0px 3px 40px 0px` | Feature Cards on White | Card component |
| `{shadow.hard}` | `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px` | Floating Buttons | Rounded Button component |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Explore Our Brain")
**Pages observed:** https://braintoy.ai, https://braintoy.ai/about
**Spec:** Background: `#e64b38` | Text: `#ffffff` | Radius: `0px` | Padding: `10px 20px` | Type: `14px Nunito`
**States observed:** Default: Captured | Hover/Active: Not captured

#### Rounded Button
**Role:** Secondary actions and navigation links
**Pages observed:** https://braintoy.ai, https://braintoy.ai/about
**Spec:** Background: `#492b70` | Text: `#ffffff` | Radius: `3px` | Padding: `17px 35px` | Type: `15px Nunito`
**States observed:** Default: Captured | Hover/Active: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform benefits or news items
**Pages observed:** https://braintoy.ai, https://braintoy.ai/about
**Spec:** Background: `#ffffff` | Text: `#545454` | Radius: `5px` | Shadow: `rgba(36, 36, 36, 0.1) 0px 3px 40px` | Type: `18px Nunito`
**States observed:** Default: Captured

#### Social Icon Card
**Role:** Footer and social proofing
**Pages observed:** https://braintoy.ai, https://braintoy.ai/about
**Spec:** Background: `transparent` | Border: `#69727d` | Radius: `10%` | Type: `25px Nunito`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Dark Section Surface
**Role:** High-impact content blocks
**Pages observed:** https://braintoy.ai, https://braintoy.ai/about
**Spec:** Background: `#492b70` | Text: `#ffffff` | Padding: `100px 0px 50px`
**States observed:** Default: Captured

#### Accent Section Surface
**Role:** Testimonial and transition bands
**Pages observed:** https://braintoy.ai, https://braintoy.ai/about
**Spec:** Background: `#e64b38` | Text: `#ffffff` | Padding: `50px 0px`
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1140px (standard Elementor container) |
| Section Gap | 50px - 100px |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Section padding reduces to 20px; font sizes for display drop ~30%. |
| Desktop | 1440px | Full 100px section spacing; horizontal multi-column grids. |

## Do's
- Use `#e64b38` for primary "Get Started" or "Explore" actions.
- Pair Nunito Bold (700+) with large display sizes (50px+) for section headers.
- Maintain a minimum of 50px vertical padding between different colored section blocks.
- Use `#ffffff` cards with soft shadows when placing content over white backgrounds.
- Keep primary buttons sharp-edged (`0px` radius) to maintain the geometric brand feel.

## Don'ts
- **Wrong:** Using `#007cba` (WP Admin Blue) for public-facing buttons. **Right:** Use `#e64b38`. **Reason:** Admin colors are not part of the Braintoy brand identity.
- Do not use gradients on section backgrounds; stick to flat `#492b70` or `#e64b38`.
- Do not use serif fonts for any UI or body copy.
- Do not place `#545454` text on `#492b70` backgrounds; use `#ffffff` for contrast.

## Similar brands
- DigitalOcean (Geometric blocking)
- GitLab (High-contrast saturated secondary colors)
- Databricks (Technical sans-serif focus)

## Quick start

### CSS Custom Properties
```css
:root {
  --braintoy-coral: #e64b38;
  --braintoy-plum: #492b70;
  --braintoy-white: #ffffff;
  --braintoy-ink: #545454;
  --braintoy-slate: #69727d;
  --font-main: 'Nunito', sans-serif;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-primary: #e64b38;
  --color-secondary: #492b70;
  --color-neutral-strong: #545454;
  --font-sans: 'Nunito';
  --shadow-feature: 0 3px 40px 0 rgba(36, 36, 36, 0.1);
}
```

## Agent prompt examples
- "Generate a hero section with a `#492b70` background, white Nunito text at 60px, and a sharp-edged `#e64b38` button."
- "Create a feature grid using white cards with a 5px border radius and the `rgba(36, 36, 36, 0.1) 0px 3px 40px` shadow."
- "Build a footer using the `#492b70` background and `#ffffff` Nunito text at 15px."

## Known gaps
- Hover and active states for buttons were not captured in the source evidence.
- Mobile-specific navigation menu transitions were not fully documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://braintoy.ai | 1440x900 | 2026-06-06 |
| About | https://braintoy.ai/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://braintoy.ai | 390x844 | 2026-06-06 |