Rabbit

---
version: alpha
name: Rabbit
description: Plug it in, talk or type—r1 carries out tasks for you.
colors:
  primary: "#ebe8e2"
  secondary: "#ffffff"
  tertiary: "#ff5705"
  neutral: "#000000"
  border: "#374151"
  brand-namara-grey: "#7c7c7c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: __powerGroteskFont_859336
    fontSize: 85px
    fontWeight: 700
    lineHeight: 1.2
  headline-md:
    fontFamily: __powerGroteskFont_859336
    fontSize: 67px
    fontWeight: 200
    lineHeight: 1.14
  headline-sm:
    fontFamily: __powerGroteskFont_859336
    fontSize: 52px
    fontWeight: 200
    lineHeight: 1.19
  headline-xs:
    fontFamily: __powerGroteskFont_859336
    fontSize: 41px
    fontWeight: 200
    lineHeight: 1.2
  body-md:
    fontFamily: __powerGroteskFont_859336
    fontSize: 32px
    fontWeight: 200
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 36px
  xl: 80px
components:
  button-primary:
    textColor: "#eae8e3"
    rounded: "{rounded.sm}"
    padding: 16px 32px
    height: 80px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px 32px
    height: 80px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Rabbit: Electric Orange Bar Over a Black Hardware Stage

## Overview

Rabbit's UI skews theatrical and product-first: a black surface, warm off-white type, and a single signal orange used sparingly. The audience is consumer tech buyers and creators; the tone is confident, minimal, and slightly retro-future. Density is low at the section level but headlines run very large, so plan for generous vertical rhythm and centered compositions.

## Colors

- **primary (#ebe8e2):** Warm off-white for core text and headings on black.
- **secondary (#ffffff):** Pure white for small highlights and high-contrast details.
- **tertiary (#ff5705):** Signal orange for the top nav, key accents, and high-urgency states only.
- **neutral (#000000):** Base background and card surface throughout.
- **border (#374151):** Subtle graphite dividers, outlines, and rings on dark.
- **brand-namara-grey (#7c7c7c):** Muted copy, metadata, and tertiary labels on dark.
- **surface ({colors.neutral}):** Canonical page surface; same as neutral.
- **on-surface ({colors.primary}):** Default text color on surface; same as primary.

## Typography

The interface uses a single custom family, Power Grotesk Font, at extreme sizes and light weights. It is self-hosted (type: custom) and not agent-loadable; use close, obtainable substitutes:
- Primary substitute: Space Grotesk (Google) for wide grotesk shapes and stable numerals.
- Alternates: Manrope (Google) for geometric, open counters; Inter (Google) for neutral body text when legibility is paramount.
Roles:
- Headline LG 85px/1.2, 700: hero claims and marquee numbers.
- Headline MD 67px/1.14, 200: large section headings.
- Headline SM 52px/1.19, 200 and XS 41px/1.2, 200: feature leads and price.
- Body MD 32px/1.5, 200: feature copy, disclaimers, and micro-benefits. Keep tracking normal; rely on size and contrast, not letter-spacing.

## Layout

Spacing follows an 8px base with asymmetric steps: 8, 16, 28, 36, 80. Use xl (80px) to separate major sections on the black stage. Use md (28px) as the default gap between heading and copy or image and caption; sm (16px) for intra-component padding. Buttons are tall (80px), so align vertical rhythm to their height. Content typically centers in wide rows with ample negative space; prefer single-column hero and two- to four-column supporting rows.

## Elevation & Depth

Depth is conveyed primarily by tone: off-white on black, plus spotlight gradients on imagery. Shadows are minimal—use the provided sm shadow ring for subtle separation or focus; larger shadow tokens are none. When more structure is needed, add 1px borders in #374151 or step text down to brand-namara-grey. Whitespace and scale carry hierarchy more than elevation.

## Shapes

Corners are restrained: 4px (sm) for buttons and small controls; 8px (md) for cards and bars. Links are square (0px) when styled as text. The small radii echo the hardware's crisp edges—avoid rounding beyond 8px to keep the industrial feel.

## Components

Buttons
- Primary: text #eae8e3, 80px tall, 16px×32px padding, 4px radius. Use for purchase and high-intent CTAs.
- Secondary: text {colors.primary}, same size and radius; pair with neutral backgrounds and graphite borders.
- Link: text {colors.primary}, 0px radius; inline with arrow glyphs.
Card
- Background {colors.neutral}, text {colors.primary}, 8px radius, 16px padding. Use for notices, cookies, or compact promos.

Distinctive components on this page
### Hero Device Marquee
- Headline LG 85px/700 on black, subhead in Body MD 32px/200. Center a single device render; constrain width and add a soft spotlight.
### Price & CTA Bar
- Price set in Headline SM (52px/200) with currency suffix; buy-now button uses Button Primary, aligned right of price.
### Awards Row
- Two award marks in a low-contrast row beneath the hero; space items with sm (16px) and keep labels in brand-namara-grey.
### Service Guarantees
- Four compact claims ("no subscription", "ships in 3 business days", etc.) in Body MD 32px; stack in a 2×2 or 4-across grid with md (28px) gaps.
### Third-Party Agents Panel
- Section heading in Headline XS 41px/200; one-sentence explainer and a Button Link "learn more →". Include a footnote disclaimer.
### DLAM Promo Block
- Bold kicker "CTRL + ALT + DLAM"; paragraph in Body MD; CTA as link or secondary button to the external playground.
### Magic Recorder Feature
- Short lead ("unlimited recordings...") with a learn-more link. Keep copy compact; use md (28px) gap from heading.
### Creations Gallery Teaser
- Display word "create" oversized; follow with two short lines and a link to the gallery.
### Cookie Consent Bar
- Card at bottom edge, 8px radius, 16px padding; Secondary "decline" and Primary "allow" actions.

## Do's and Don'ts

- Do reserve #ff5705 for the top nav and one or two key CTAs; overuse breaks the noir stage effect.
- Do set most headings at weight 200 on black; use 700 only for the main hero or compact labels.
- Do space major sections with 80px and keep intra-section gaps to 28px or 16px.
- Don't introduce light backgrounds behind large copy; the display weights are tuned for dark mode.
- Don't exceed 8px radii or add heavy drop shadows; separation should come from tone and the sm shadow ring.
- Don't mix additional accent colors; rely on off-white, black, graphite, and signal orange.

## Agent Prompt Guide

Quick palette
- Text: #ebe8e2
- Background: #000000
- Border: #374151
- Accent: #ff5705

1) Build a black hero with oversized heading and CTA
- Background #000000. Heading in Space Grotesk, 85px, weight 700, line-height 1.2, color #ebe8e2. Subhead in Space Grotesk 32px, weight 200, line-height 1.5, color #ebe8e2 at 80% opacity. Place a Primary button 80px tall with 16px 32px padding, 4px radius, text color #eae8e3; add a 1px border #374151.

2) Price + Buy bar aligned right
- Set price in Space Grotesk 52px, weight 200, color #ebe8e2. Place a Primary button (80px tall, 16×32 padding, 4px radius) labeled "buy now →" to the right with md (28px) gap. Keep the row on #000000 with subtle top border #374151.

3) Awards and guarantees row
- Create a card container with background #000000, text #ebe8e2, 8px radius, 16px padding, and a 1px border #374151. Inside, lay out two award badges then four short guarantees in Space Grotesk 32px/200; use sm (16px) gaps.

4) Third-party agents section with disclaimer
- Section title in Space Grotesk 41px/200, color #ebe8e2. One-line description in 32px/200. Add a Button-Link "learn more →" (text #ebe8e2, radius 0). Below, a footnote paragraph in 32px/200, color #7c7c7c, max-width 60ch, top margin md (28px).

5) Cookie consent bar
- Sticky bottom card on #000000 with 8px radius and 16px padding, border #374151. Message in Space Grotesk 32px/200, color #ebe8e2. Actions: Secondary button "decline" (80px tall) and Primary button "allow" (80px tall), spaced by sm (16px).

## Similar Brands

- Apple: Similar theatrical black product stages and oversized type; Rabbit uses warmer off-white text and a bolder accent orange versus Apple's cooler grayscale.
- Nothing: High-contrast hardware storytelling; Rabbit is darker and typographically wider, with fewer textures and a stronger single accent.
- Teenage Engineering: Minimal palettes and playful industrial cues; Rabbit pushes larger headline scales and a more retail-forward CTA pattern.
- Humane: Monochrome, device-as-stage layouts; Rabbit is clearer about price and shipping, with stronger retail affordances like badges and guarantees.

:root {
  /* Colors */
  --color-primary: #ebe8e2;
  --color-secondary: #ffffff;
  --color-tertiary: #ff5705;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-namara-grey: #7c7c7c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 85px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 67px;
  --text-headline-md-weight: 200;
  --text-headline-md-leading: 1.14;
  --text-headline-sm-size: 52px;
  --text-headline-sm-weight: 200;
  --text-headline-sm-leading: 1.19;
  --text-headline-xs-size: 41px;
  --text-headline-xs-weight: 200;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 32px;
  --text-body-md-weight: 200;
  --text-body-md-leading: 1.5;
  --font-powergroteskfont-859336: "__powerGroteskFont_859336";

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

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

  /* Components */
  --button-primary-text-color: #eae8e3;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 16px 32px;
  --button-primary-height: 80px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 16px 32px;
  --button-secondary-height: 80px;
  --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-md);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Plug it in, talk or type—r1 carries out tasks for you.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.922,
          0.91,
          0.886
        ],
        "hex": "#ebe8e2"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.341,
          0.02
        ],
        "hex": "#ff5705"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.255,
          0.318
        ],
        "hex": "#374151"
      }
    },
    "brand-namara-grey": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.486,
          0.486,
          0.486
        ],
        "hex": "#7c7c7c"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.922,
          0.91,
          0.886
        ],
        "hex": "#ebe8e2"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 36,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 80,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "__powerGroteskFont_859336",
        "fontSize": {
          "value": 85,
          "unit": "px"
        },
        "fontWeight": 700
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "__powerGroteskFont_859336",
        "fontSize": {
          "value": 67,
          "unit": "px"
        },
        "fontWeight": 200
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "__powerGroteskFont_859336",
        "fontSize": {
          "value": 52,
          "unit": "px"
        },
        "fontWeight": 200
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "__powerGroteskFont_859336",
        "fontSize": {
          "value": 41,
          "unit": "px"
        },
        "fontWeight": 200
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "__powerGroteskFont_859336",
        "fontSize": {
          "value": 32,
          "unit": "px"
        },
        "fontWeight": 200
      }
    }
  }
}