Standard Bots

---
version: alpha
name: Standard Bots
description: AI-native robots for serious manufacturing—fast, safe, high-ROI.
colors:
  primary: "#ffffff"
  secondary: "#7c7c7c"
  tertiary: "#e04f1b"
  neutral: "#000000"
  border: "#374151"
  brand-green-waterloo: "#2c2c25"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Mikro
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.19
  headline-md:
    fontFamily: Mikro
    fontSize: 49px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.003em
  headline-sm:
    fontFamily: Mikro
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: -0.013em
  headline-xs:
    fontFamily: Mikro
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.74
    letterSpacing: -0.028em
  body-md:
    fontFamily: Mikro
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.01em
rounded:
  sm: 8px
  md: 26px
spacing:
  xs: 8px
  sm: 20px
  md: 44px
  lg: 70px
  xl: 86px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#fffdfa"
    rounded: "{rounded.md}"
    padding: 10px 16px
    height: 52px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "#fffdfa"
    rounded: "{rounded.md}"
    padding: 10px 16px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Standard Bots: Industrial dark mode with pill-orange CTAs

## Overview

A single-accent, dark-mode system for industrial robotics. Tone is confident, technical, and American-made. Layouts feel spacious and cinematic, with oversized headlines and simple grids that prioritize clear decisions: book a call, watch a demo, choose a robot. Use generous spacing and keep color minimal to preserve the brand's authority.

## Colors

- **primary (#FFFFFF):** Core text and headline ink on dark surfaces.
- **secondary (#7C7C7C):** Supporting copy and metadata; never for primary actions.
- **tertiary (#E04F1B):** Accent for primary CTAs and active states only.
- **neutral (#000000):** Global surface/background for the site.
- **border (#374151):** Subtle dividers and card outlines on dark.
- **brand-green-waterloo (#2C2C25):** Deep green accent for limited background panels or specialty content.
- **surface ({colors.neutral}):** Application surface; same as neutral.
- **on-surface ({colors.primary}):** Default text color when placed on surface.

## Typography

All typographic roles use Mikro. Sizes are fixed and expressive: headline-lg 72px/1.19 (500) for hero claims; headline-md 49px/1.2 (400) for key section titles; headline-sm 34px/1.21 and headline-xs 23px/1.74 handle subheads and card titles; body-md 16px/1.5 for paragraphs and UI labels.
- Availability: Mikro is custom/self-hosted; agents should not assume it's obtainable via Google Fonts.
- Substitutes: Space Grotesk, Sora, or Archivo deliver a similar geometric, industrial grotesk feel with multiple weights.
- Usage: Tight negative letter-spacing is baked into headings—don't override. Maintain body-md for readability on dark backgrounds.

## Layout

Spacing follows a short, high-contrast scale: xs 8, sm 20, md 44, lg 70, xl 86. Use xl or lg for section padding, md for block gaps within sections, sm for component gutters, and xs for micro spacing inside controls. Compose sections on a simple multi-column grid; keep line lengths moderate and center main content with ample margins to let the dark surface and large type breathe.

## Elevation & Depth

Depth is minimal. Use sm shadow (rgba(0,0,0,0.06) 1px 1px 3px) for subtle lifts on thumbnails. A brand-tinted md shadow (rgba(224,79,27,0.2) 0 8px 16px) can emphasize primary CTAs or active overlays. Large drops are unused; hierarchy is handled by size, spacing, and the orange accent. Where needed, use border #374151 for separation on black.

## Shapes

Two radii define the language: md 26px for primary CTAs and chips (pill-like, friendly but sturdy), and sm 8px for cards, inputs, and images. Keep shapes consistent—mixing radii on the same component weakens the system.

## Components

Buttons and cards are the core primitives.
- Button Primary: background #E04F1B, text #FFFDF A, radius 26px, height 52px, padding 10px 16px. Reserve for conversion actions (Book a call, Request a quote).
- Button Secondary: per tokens, background #FFFFFF, text #FFFDF A, radius 26px, height 52px. Use cautiously on dark surfaces and ensure contrast with borders or overlays.
- Button Link: text #FFFFFF, radius 0; for inline actions like "Watch the video".
- Card: background #000000, text #FFFFFF, radius 8px, padding 16px; add border #374151 when adjacency needs separation.

### Announcement Bar
- Surface #000000 with body-md 16px text and a single link in #E04F1B. Use sm (8px) vertical padding and center align.

### Global Nav with CTA
- Black bar with white links (body-md). Right-aligned primary CTA in #E04F1B at 52px height, radius 26px. Spacing sm 20 between items.

### Hero Masthead
- Background video/photo on #000000. H1 set in headline-lg 72/1.19. Supporting copy in body-md 16. Primary CTA (orange pill) and a secondary action as button-link. Vertical gaps: md 44.

### Trusted Logos Strip
- Monochrome logos on black; equal height inside a card row with sm 20 gutters. Optional border #374151 top and bottom.

### Robots Tier Grid (Spark/Core/Thor/Bolt)
- Four cards, each: title headline-xs 23, description body-md 16, stat blocks in body-md with label caps. CTA links per product. Card radius 8px; internal gaps sm 20.

### Teaching Modes Tabs
- Chip tabs with radius 26px; active tab uses #E04F1B with white text; inactive white text with border #374151. Content area separated by md 44.

### Case Study Thumbnails
- 16:9 images over black cards, radius 8px, sm shadow. Title in headline-xs 23 and body-md summary. Use button-link for "Watch case study".

### Quote Form (Multi-step)
- Card container (radius 8px) with stepper across top (chips, 26px). Inputs full-width on black with border #374151 and white labels. Primary action uses the orange pill; section gaps md 44.

### Support Steps Timeline
- Five-step list; each step uses headline-xs 23 for the number and body-md 16 for the label. Dividers in #374151, vertical spacing md 44.

## Do's and Don'ts

- Do reserve #E04F1B for primary CTAs, active chips, and key highlights; keep one accent per view.
- Do use lg (70px) or xl (86px) vertical padding on section wrappers to maintain the cinematic dark aesthetic.
- Do apply border #374151 to separate adjacent black cards or inputs instead of heavy shadows.
- Don't introduce additional brand colors on product imagery or icons; keep UI chrome monochrome.
- Don't mix radii—CTAs at 26px, structural cards at 8px only.
- Don't reduce body text below 16px on dark surfaces; readability drops quickly.

## Agent Prompt Guide

Quick color reference — Text: #FFFFFF; Background: #000000; Border: #374151; Accent: #E04F1B.

1) Build a hero masthead on black
- Container: background #000000, padding-top/bottom 86px.
- H1: font "Mikro", 72px, weight 500, line-height 1.19, color #FFFFFF.
- Supporting copy: font "Mikro", 16px/1.5, color #FFFFFF at 80% opacity if needed.
- Primary CTA: 52px height, padding 10px 16px, background #E04F1B, text #FFFDF A, border-radius 26px.
- Secondary action: button-link, color #FFFFFF.

2) Create a four-up robots grid
- Section background #000000; grid with 4 cards, gap 20px.
- Card: background #000000, border 1px solid #374151, border-radius 8px, padding 16px.
- Title: "Mikro" 23px/1.74, color #FFFFFF. Body: 16px/1.5.
- CTA link per card in #FFFFFF; optional small arrow icon.

3) Tabs for "Three ways to teach your robot"
- Tablist chips: height 36–40px, border-radius 26px, gap 20px.
- Active tab: background #E04F1B, text #FFFDF A. Inactive: transparent with 1px border #374151, text #FFFFFF.
- Panel content: top padding 44px, headings 34px, body 16px.

4) Case study thumbnail cards
- 16:9 media inside a card (radius 8px), sm shadow rgba(0,0,0,0.06) 1px 1px 3px.
- Title: "Mikro" 23px, body: 16px.
- Link button: text #FFFFFF with underline on hover; keep gaps 20px.

5) Multi-step quote form
- Wrapper card: background #000000, border 1px solid #374151, radius 8px, padding 44px.
- Inputs: 44px height, border 1px solid #374151, text #FFFFFF.
- Primary action: 52px pill, background #E04F1B, text #FFFDF A, radius 26px. Stepper chips use the same 26px radius.

## Similar Brands

- Anduril: Dark, high-contrast military-tech aesthetic with sparing accent color; more dense data tables than Standard Bots' spacious marketing grid.
- Boston Dynamics: Cinematic dark visuals and bold type; relies more on motion and fewer conversion CTAs.
- Universal Robots: Cleaner, lighter palette with blues; similar product-tier storytelling but not full dark mode.
- NVIDIA (AI/Robotics pages): Black surface and neon accents; heavier gradients and effects compared to Standard Bots' flatter, stricter UI.

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #7c7c7c;
  --color-tertiary: #e04f1b;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-green-waterloo: #2c2c25;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 72px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.19;
  --text-headline-md-size: 49px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.003em;
  --text-headline-sm-size: 34px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-sm-tracking: -0.013em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.74;
  --text-headline-xs-tracking: -0.028em;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: -0.01em;
  --font-mikro: "Mikro";

  /* Rounded */
  --radius-sm: 8px;
  --radius-md: 26px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 20px;
  --spacing-md: 44px;
  --spacing-lg: 70px;
  --spacing-xl: 86px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #fffdfa;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 10px 16px;
  --button-primary-height: 52px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: #fffdfa;
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 10px 16px;
  --button-secondary-height: 52px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "AI-native robots for serious manufacturing—fast, safe, high-ROI.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.486,
          0.486,
          0.486
        ],
        "hex": "#7c7c7c"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.878,
          0.31,
          0.106
        ],
        "hex": "#e04f1b"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.255,
          0.318
        ],
        "hex": "#374151"
      }
    },
    "brand-green-waterloo": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.173,
          0.173,
          0.145
        ],
        "hex": "#2c2c25"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 44,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 70,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 86,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 26,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Mikro",
        "fontSize": {
          "value": 72,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Mikro",
        "fontSize": {
          "value": 49,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.003,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Mikro",
        "fontSize": {
          "value": 34,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.013,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Mikro",
        "fontSize": {
          "value": 23,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.028,
          "unit": "em"
        }
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Mikro",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.01,
          "unit": "em"
        }
      }
    }
  }
}