Rig

---
version: alpha
name: Rig
description: Everything local. Own your AI.
colors:
  primary: "#000000"
  secondary: "#612219"
  tertiary: "#22c55e"
  neutral: "#ffffff"
  border: "#ed462d"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Chalet
    fontSize: 74px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.04em
  headline-md:
    fontFamily: Chalet
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: -0.028em
  headline-sm:
    fontFamily: Chalet
    fontSize: 37px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: -0.012em
  headline-xs:
    fontFamily: Instrument Sans
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.19
  body-md:
    fontFamily: Instrument Sans
    fontSize: 18.4px
    fontWeight: 600
    lineHeight: 1.6
rounded:
  sm: 6px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 40px
  xl: 64px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 16px 32px
    height: 52px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 16px 32px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#0a0a0a"
    textColor: "#f0ede6"
    rounded: "{rounded.sm}"
    padding: 28px 32px
---

# Rig: Alarm-Red Hero and Square, No-Radius Actions

## Overview

Rig speaks to professional engineers who value control and privacy. The voice is assertive, technical, and minimal—heavy headline hierarchy over spacious cards. Density is medium: large headlines and compact body copy separated by deliberate, repeatable spacing. When tokens do not specify, prefer strong contrast, square actions, and red accents to signal focus areas.

## Colors

- **primary (#000000):** Core ink for body copy, headings, and UI glyphs.
- **secondary (#612219):** Deep rust accent for muted tags or subdued backgrounds.
- **tertiary (#22c55e):** Terminal-style success and performance highlights.
- **neutral (#ffffff):** Base surface for light mode sections.
- **border (#ed462d):** Alarm red for dividers, tickers, and emphasis rules.
- **surface (#ffffff):** Standard page background when no hero treatment applies.
- **on-surface (#000000):** Default text color on light surfaces.

## Typography

- Headlines (lg/md/sm): Chalet at 74/52/37px, weight 700 with tight negative tracking. Chalet is a custom, self-hosted display family and not freely loadable by agents. Use obtainable substitutes with similar geometry and x-height: Inter (Google) Bold/Black, Archivo (Google) Bold, or Space Grotesk (Google) Bold.
- Headline-xs: Instrument Sans 26px, 600, for card titles and section subheads.
- Body: Instrument Sans 18.4px, 600, 1.6 line height for paragraphs and list content. Instrument Sans is Google-hosted and can be loaded directly.
- Monospace/terminal samples: Chivo Mono (Google) is available in sources and is appropriate for CLI blocks and code-like readouts when needed.

## Layout

- Spacing scale: 8, 16, 28, 40, 64. Build vertical rhythm on 28px steps; use 64px for section breaks and 40px for major intra-section groups.
- Grid: 12-column flexible grid with 16–28px gutters; cards commonly lay out in 2–3 columns on desktop and stack on mobile.
- Content width: keep text lines compact; headings may span wider but clamp body to comfortable measure using the spacing scale for side paddings.
- Marquee/strips use full-bleed width with a 1px border color divider at top and bottom.

## Elevation & Depth

Depth is conveyed primarily through tonal shifts and borders. Cards use a dark surface (#0a0a0a) with off-white text and may apply the measured md shadow for subtle lift. Buttons stay flat and square; states rely on color and border rather than heavy elevation. Where no shadow is used, rely on the alarm-red border and whitespace to establish layers.

## Shapes

- Buttons are strictly square (0px radius) to emphasize decisiveness.
- Cards and contained modules use a light softening only at rounded.sm (6px) for approachability inside otherwise angular layouts.
- Avoid mixing radii on the same row; use 0px for interactive controls, 6px only for containers.

## Components

- Buttons
  - Primary: text color #000000, 0px radius, 52px height, 16px 32px padding. Use for main CTAs such as "Join Waitlist".
  - Secondary: same geometry as primary; deploy for alternate flows like "Our Approach".
  - Link: text-only, 0px radius; reserve for inline navigational actions.
- Card
  - Background #0a0a0a, text #f0ede6, radius 6px, padding 28px 32px. Use for problem statements, capability callouts, and metrics.

### Alarm-Red Hero
- Headline uses headline-lg (74px) with tight tracking; body copy in body-md. Apply border #ed462d to rules and micro-labels; keep actions square at 52px.

### Scrolling Marquee
- Full-bleed strip with repeated value props separated by bullets. Type set in Instrument Sans body-md; top/bottom 1px rules in #ed462d and 16–28px vertical padding.

### Problem Grid (4-up)
- Four cards in a 2x2 or 4x1 responsive grid. Each card: label row, headline-xs (26px) subhead, body-md text. Card background #0a0a0a, radius 6px, 28px padding, md shadow optional.

### Severed Diagram
- Two columns labeled "Cloud servers / Your machine" with thin connectors visually cut; use #ed462d for connector strokes and labels; spacing lg between columns.

### Capabilities List [01–06]
- Numbered items with bracketed indices. Use headline-xs for titles, body-md for detail, and border #ed462d for dividers between items.

### Terminal Block
- Monospace Chivo Mono, medium–bold. Container uses card spec with inner shadow for CRT depth; include prompt and system readouts in stacked lines separated by 8–16px.

### Metrics Badges
- Inline stat list (Latency, Privacy, Cost, Uptime). Use body-md with tertiary (#22c55e) for positive values; separate items with subtle #ed462d dividers.

### FAQ Accordion
- Question rows set in body-md 600, 28–40px vertical padding, 1px divider in #ed462d; answers in body-md with 16px top padding.

## Do's and Don'ts

- Do keep buttons square at 0px radius and 52px height; mixing rounded buttons undermines the system's tone.
- Do use #ed462d sparingly for rules, labels, and marquee strips—not as a paragraph text color.
- Do maintain headline tracking as specified; compressing headlines is part of the brand voice.
- Don't add heavy drop shadows to buttons; use borders and contrast instead.
- Don't mix more than one body family; stick to Instrument Sans for paragraphs.
- Don't round cards beyond 6px; the 6px token is the maximum in this system.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #ed462d
- Accent: #22c55e

1) Build the hero block
- Container: background #ffffff, 64px top/bottom padding.
- Headline: Instrument Sans 700, 74px, line-height 1.2, letter-spacing -0.04em; color #000000.
- Subhead/body: Instrument Sans 600, 18.4px, line-height 1.6; color #000000; max-width 640px.
- CTA buttons: height 52px, padding 16px 32px, border-radius 0px; text color #000000; 16px gap between buttons; add a 1px rule in #ed462d below the block.

2) Create a four-card "Problem" grid
- Grid: 12-col, 40px row gap, 28px column gap; cards span 3 cols on desktop, stack on mobile.
- Card: background #0a0a0a, text #f0ede6, padding 28px 32px, border-radius 6px.
- Card title: Instrument Sans 600, 26px.
- Body: Instrument Sans 600, 18.4px.
- Optional shadow: rgba(240,237,230,0.04) 0px 2px 0px, rgba(0,0,0,0.5) 0px -1px 0px, rgba(0,0,0,0.4) 0px 20px 60px 0px.

3) Implement a scrolling marquee strip
- Full-width section with 16px top/bottom padding; top and bottom borders 1px solid #ed462d.
- Text: Instrument Sans 600, 18.4px, uppercase tracking optional; color #000000.
- Items separated by • characters; continuous leftward animation.

4) Terminal / CLI block
- Wrapper uses card spec (background #0a0a0a, text #f0ede6, radius 6px, padding 28px 32px) with inset shadow rgba(0,0,0,0.5) 0px 2px 8px inset.
- Font: Chivo Mono 600, 18.4px for output; 26px for command prompts.
- Use #22c55e for success ticks or status glyphs.

5) Early-access CTA row
- Layout: two columns (copy + actions) with 40px vertical padding.
- Headline: Instrument Sans 700, 37px; body: Instrument Sans 600, 18.4px.
- Primary/secondary buttons: 52px height, 16px 32px padding, radius 0px; text #000000; 16px gap; add a 1px top border in #ed462d to separate from previous content.

## Similar Brands

- Cursor: similarly loud, developer-centric marketing with terminal cues; Cursor leans darker overall and uses cyan accents where Rig uses alarm red.
- Warp: high-contrast, code-first messaging with square components; more purple/blue accenting and softer radii than Rig's 0px buttons.
- Replit: terminal aesthetic and grid of capability cards; more playful tone and brighter multi-color palette compared with Rig's single-hue focus.
- Modal: bold engineering pitch with red accents and minimal shadows; Modal's typography runs lighter and less condensed than Rig's pressed headlines.

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #612219;
  --color-tertiary: #22c55e;
  --color-neutral: #ffffff;
  --color-border: #ed462d;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 74px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.04em;
  --text-headline-md-size: 52px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1.19;
  --text-headline-md-tracking: -0.028em;
  --text-headline-sm-size: 37px;
  --text-headline-sm-weight: 700;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: -0.012em;
  --text-headline-xs-size: 26px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 18.4px;
  --text-body-md-weight: 600;
  --text-body-md-leading: 1.6;
  --font-chalet: "Chalet";
  --font-instrument-sans: "Instrument Sans";

  /* Rounded */
  --radius-sm: 6px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: 0px;
  --button-primary-padding: 16px 32px;
  --button-primary-height: 52px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: 0px;
  --button-secondary-padding: 16px 32px;
  --button-secondary-height: 52px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #0a0a0a;
  --card-text-color: #f0ede6;
  --card-rounded: var(--radius-sm);
  --card-padding: 28px 32px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Everything local. Own your AI.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.38,
          0.133,
          0.098
        ],
        "hex": "#612219"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.133,
          0.773,
          0.369
        ],
        "hex": "#22c55e"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.929,
          0.275,
          0.176
        ],
        "hex": "#ed462d"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 64,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Chalet",
        "fontSize": {
          "value": 74,
          "unit": "px"
        },
        "fontWeight": 700,
        "letterSpacing": {
          "value": -0.04,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Chalet",
        "fontSize": {
          "value": 52,
          "unit": "px"
        },
        "fontWeight": 700,
        "letterSpacing": {
          "value": -0.028,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Chalet",
        "fontSize": {
          "value": 37,
          "unit": "px"
        },
        "fontWeight": 700,
        "letterSpacing": {
          "value": -0.012,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Instrument Sans",
        "fontSize": {
          "value": 26,
          "unit": "px"
        },
        "fontWeight": 600
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Instrument Sans",
        "fontSize": {
          "value": 18.4,
          "unit": "px"
        },
        "fontWeight": 600
      }
    }
  }
}