# Wiserobot Design System

> A scholarly technical interface where Crimson Text serif headlines meet a structured, achromatic canvas punctuated by industrial orange accents.

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

## TL;DR
Wiserobot utilizes a "monochrome-plus-accent" system that pairs the academic elegance of **Crimson Text** with a utilitarian gray-scale foundation. The primary canvas transitions between pure white `#ffffff` and a light gray `#ececec`, while text depth is managed through a hierarchy of grays ranging from `#333333` to `#808080`. Brand energy is concentrated in a specific orange accent `#f38f1e` used for interactive highlights and a deep blue `#4c63c0` reserved for primary navigation actions. The layout is strictly flat, eschewing shadows in favor of 1px borders and clear typographic spacing.

## Signature DNA
1. **Academic Serif Display:** The use of Crimson Text at 34px for primary section headers (e.g., "Best sellers") creates a high-contrast, editorial feel against the technical product content.
2. **Achromatic Surface Layering:** Sections are differentiated by alternating `#ffffff` and `#ececec` backgrounds rather than elevation or shadows, maintaining a flat, architectural profile.
3. **High-Voltage Accents:** Saturated orange `#f38f1e` is used exclusively for "Out of Stock" badges and "Join" buttons, serving as the primary functional signal against the gray-scale base.

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.text.primary}` | `#333333` | Primary body text and button labels | 82 | 0.8 | computed_style |
| `{color.text.muted}` | `#808080` | Secondary text and footer labels | 54 | 0.8 | computed_style |
| `{color.text.heading}` | `#2e2e2e` | High-contrast heading text | 23 | 0.8 | computed_style |
| `{color.bg.canvas}` | `#ffffff` | Primary page background | 37 | 0.8 | computed_style |
| `{color.bg.surface}` | `#ececec` | Section alternating background | 21 | 0.8 | computed_style |
| `{color.bg.soft}` | `#f6f6f6` | Subtle UI element backgrounds | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.orange}` | `#f38f1e` | Primary interactive accent (buttons, badges) | 73 | 0.8 | computed_style |
| `{color.accent.blue}` | `#4c63c0` | Secondary action color (navigation buttons) | 6 | 0.6 | computed_style |
| `{color.decorative.red}` | `#dd0021` | Offline message indicator (decorative_only) | 1 | 1.0 | brand_page |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Crimson Text | 400, 700 | Primary Display & Body | Crimson Text (Google Fonts) | OFL |
| LatinMM | 400 | UI Labels & Subheadings | Georgia | Custom/Proprietary |
| Envy Code R | 400 | Technical links | JetBrains Mono | OFL |
| FontAwesome | 400 | Icons | FontAwesome | FontAwesome |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.lg}` | 34px | normal | normal | 400 | Main section headers | `span` |
| `{type.display.md}` | 30px | 30px | normal | 400 | Sub-section headers | `span` |
| `{type.heading.md}` | 28px | 42px | normal | 400 | Product category links | `a` |
| `{type.heading.sm}` | 25px | 37.5px | normal | 400 | Product price display | `span#product-price-17` |
| `{type.heading.xs}` | 24px | 36px | normal | 700 | New/Sale item badges | `span.new-item` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Technical navigation | `a` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default body copy | `div.wrapper` |
| `{type.body.sm}` | 13px | 18.2px | normal | 400 | Product names in grids | `h3.product-name` |

### Principles
1. **Serif for Narrative:** Use Crimson Text for all storytelling elements, including testimonials and section titles.
2. **Sans-Serif for Utility:** Use LatinMM or Arial for functional UI elements like prices, buttons, and navigation.
3. **Strict Weighting:** Headlines rely on scale (34px) rather than weight (400) to establish hierarchy.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 21 |
| `{space.sm}` | 10px | 32 |
| `{space.md}` | 15px | 26 |
| `{space.lg}` | 23px | 15 |
| `{space.xl}` | 36px | 30 |
| `{space.section}` | 70px | 15 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default for all surfaces and buttons | 314 occurrences |
| `{radius.sm}` | 5px | Form inputs and search fields | 10 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All components and sections | 0 shadows observed |

## Components
### Tier 1: Foundational
#### Utility Button
**Role:** Secondary actions and search
**Pages observed:** https://wiserobot.com
**Spec:** Background `#ececec` / Text `#333333` / Border `0px` / Radius `0px` / Typography `13px LatinMM`
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Product Badge
**Role:** Status indicators (Sale, New, Out of Stock)
**Pages observed:** https://wiserobot.com
**Spec:** Background `#f38f1e` / Text `#ffffff` / Border `0px` / Radius `0px` / Typography `24px Crimson Text Bold`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Testimonial Block
**Role:** Social proof section
**Pages observed:** https://wiserobot.com
**Spec:** Background `#ececec` / Text `#333333` / Padding `23px 55px 28px` / Radius `0px`
**States observed:** Default: captured

#### Newsletter Signup
**Role:** Lead generation footer
**Pages observed:** https://wiserobot.com
**Spec:** Input Background `#ffffff` / Button Background `#f38f1e` / Button Text `#ffffff` / Radius `5px` (input)
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding | 70px vertical |
| Grid Gutter | 36px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger menu; product grids stack 1-up |
| Desktop | 1440px | 4-column product grids; horizontal top navigation |

## Imagery & decoration
Wiserobot uses complex, technical line-art illustrations (e.g., NetSuite to Magento diagrams) in the hero section. Decorative elements include the "Robot" mascot in the header and footer. The brand avoids photography, opting for product box-shot renders and grayscale partner logos.

## Do's
- Use Crimson Text 400 for display headlines at 34px.
- Alternate section backgrounds between `#ffffff` and `#ececec`.
- Use `#f38f1e` for the primary "Join" or "Action" button in any form.
- Maintain sharp `0px` corners for all content containers.
- Use `#808080` for all footer and metadata text.

## Don'ts
- **Wrong:** Using a drop shadow on a product card. **Right:** Use a 1px border or background shift. **Reason:** The system is strictly flat.
- **Wrong:** Setting a primary headline in bold. **Right:** Use weight 400 at 34px. **Reason:** Crimson Text signature is its light, scholarly appearance.
- **Wrong:** Using `#f38f1e` for body text. **Right:** Reserve for badges and buttons. **Reason:** High-saturation orange is a functional signal, not a typographic color.

## Similar brands
- O'Reilly Media (Technical/Academic mix)
- Magento (Legacy Enterprise UI)
- NetSuite (Industrial ERP aesthetics)

## Quick start
```css
:root {
  --wiserobot-orange: #f38f1e;
  --wiserobot-blue: #4c63c0;
  --wiserobot-gray-dark: #333333;
  --wiserobot-gray-light: #ececec;
  --font-display: 'Crimson Text', serif;
  --font-ui: 'LatinMM', sans-serif;
}
```

## Known gaps
- Hover states for navigation links were not explicitly captured in the token evidence.
- Error states for the newsletter input field were not triggered during analysis.
- The specific font-face source for "LatinMM" was not resolved.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://wiserobot.com | 1440x900 | 2026-06-06T05:26:25Z |