# Orbiseed Design System

> Deep plum canvases anchored by sharp geometric blocks and high-contrast teal accents.

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

## TL;DR
Orbiseed utilizes a high-contrast, monochrome-adjacent system dominated by a deep plum primary color (#4b0c62). The interface relies on sharp, 0px border radii for all structural elements, creating a rigid and professional architectural feel. Visual interest is driven by large-scale typography using the Chivo family and vibrant accent blocks in teal (#56c5d0) and magenta (#b41e8e). Layouts alternate between stark white canvases and full-bleed plum sections, using strict 8px-based spacing to maintain a clean, document-like rhythm.

## Signature DNA
1. **The Plum Anchor** (The color #4b0c62 serves as the primary brand identifier, appearing as hero backgrounds, primary text, and button fills across all analyzed pages).
2. **Zero-Radius Geometry** (Structural elements, including buttons and form inputs, maintain a 0px border radius, reinforcing a precise, industrial aesthetic).
3. **Chromatic Sectioning** (The use of full-width background floods in teal #56c5d0 and plum #4b0c62 to separate narrative beats on the homepage).

## Family Map
Not captured in source (no sub-brands identified).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, inverted text | 25 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Primary body text, footer text | 41 | 0.8 | Computed Style |
| `{color.gray.light}` | `#f0efef` | Secondary surface background | 2 | 0.6 | Observed Surface |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#4b0c62` | Hero background, primary headings, primary buttons | 15 | 0.8 | Computed Style |
| `{color.accent.teal}` | `#56c5d0` | Secondary hero background, primary CTA button | 10 | 0.6 | Computed Style |
| `{color.accent.magenta}` | `#b41e8e` | Decorative text highlights | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Chivo | 400, 700 | Heading, Display, Body | Chivo (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 61px | 64.78px | normal | 400 | Main Hero H2 | `h2` |
| `{type.h3}` | 26px | 29.98px | normal | 400 | Section Headings | `h3` |
| `{type.h3.bold}` | 26px | 29.98px | normal | 700 | Emphasized Headings | `strong` |
| `{type.body.lg}` | 21px | 29.12px | normal | 400 | Article Body | `article#sections` |
| `{type.body.lg.bold}` | 21px | 29.12px | normal | 700 | Emphasized Body | `strong` |
| `{type.h5}` | 16px | 22.4px | normal | 700 | Small Subheadings | `h5` |
| `{type.body.sm}` | 16px | 22.4px | normal | 400 | Small Body/Caption | `p.sqsrte-small` |
| `{type.nav}` | 20.8px | normal | normal | 400 | Navigation Links | `Surface` |

### Principles
1. **Heading Dominance:** Display sizes exceed 60px to establish clear information hierarchy.
2. **Weight Contrast:** Bold (700) is used sparingly for semantic emphasis within 400-weight blocks.
3. **Tight Leading:** Headings use a tight line-height (~1.06x) to maintain visual density.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.md}` | 16px | 24 |
| `{space.xl}` | 32px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All buttons, inputs, and containers | `radii` array (80 occurrences) |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elev.flat}` | none | All cards and surfaces | `observed_once` Surface data |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Request Demo)
**Pages observed:** https://orbiseed.com, https://orbiseed.com/pricing
**Spec:** Background `{color.accent.teal}` (#56c5d0) / Text `{color.white}` (#ffffff) / Radius `{radius.none}` (0px) / Typography `{type.h5}` (16px/700)
**States observed:** Default | Hover: not captured

#### Inverted Button
**Role:** Secondary action on dark backgrounds
**Pages observed:** https://orbiseed.com
**Spec:** Background `{color.primary}` (#4b0c62) / Text `{color.white}` (#ffffff) / Radius `{radius.none}` (0px) / Typography `{type.h5}` (16px/700)
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Navigation Bar
**Role:** Global site navigation
**Pages observed:** https://orbiseed.com, https://orbiseed.com/about
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.primary}` (#4b0c62) / Height: Not explicitly tokenized / Typography `{type.nav}` (20.8px)
**States observed:** Default | Hover: not captured

#### Newsletter Signup
**Role:** Footer lead generation
**Pages observed:** https://orbiseed.com, https://orbiseed.com/pricing
**Spec:** Input Background `{color.white}` (#ffffff) / Button Background `{color.white}` (#ffffff) / Button Text `{color.primary}` (#4b0c62) / Radius `{radius.none}` (0px)
**States observed:** Default | Focus: not captured

### Tier 3: Surface-specific

#### Content Section (Plum)
**Role:** High-impact narrative block
**Pages observed:** https://orbiseed.com
**Spec:** Background `{color.primary}` (#4b0c62) / Text `{color.white}` (#ffffff) / Padding: `{space.xl}` (32px)
**States observed:** N/A

#### Content Section (Teal)
**Role:** Closing CTA block
**Pages observed:** https://orbiseed.com
**Spec:** Background `{color.accent.teal}` (#56c5d0) / Text `{color.primary}` (#4b0c62) / Padding: `{space.xl}` (32px)
**States observed:** N/A

## Layout
| Property | Value |
|----------|-------|
| Max Width | Not captured in source |
| Column Grid | Single column centered (Mobile), Multi-column feature grids (Desktop) |
| Section Padding | 32px (vertical) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; multi-column grids stack vertically. |
| Desktop | 1440px | Horizontal navigation; side-by-side image/text splits. |

## Imagery & decoration
Orbiseed uses flat, vector-style illustrations with a specific palette of plum, teal, and magenta. Imagery often features human characters in professional settings combined with abstract UI elements (graphs, nodes). The system avoids photography and drop shadows.

## Do's
- Use `#4b0c62` for all primary structural backgrounds.
- Maintain `0px` border radius on all interactive elements.
- Set display headings in `Chivo` at `61px`.
- Use `#56c5d0` for primary "Request Demo" actions.
- Ensure high contrast (13.7:1) for plum text on white backgrounds.

## Don'ts
- **Wrong:** Using rounded corners on buttons. **Right:** Use `0px` radius. **Reason:** Brand identity is built on sharp, geometric precision.
- **Wrong:** Using generic blue for CTAs. **Right:** Use `#56c5d0`. **Reason:** Teal is the specific secondary brand accent.
- **Wrong:** Applying drop shadows to cards. **Right:** Use flat borders or background floods. **Reason:** The system is strictly 2D/flat.
- **Wrong:** Using sub-brand colors as parent primary. **Right:** Use `#4b0c62`. **Reason:** Plum is the validated parent primary across all pages.

## Similar brands
- Stripe (for typography-led sectioning)
- Asana (for vector illustration style)
- Retool (for industrial, sharp-cornered UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #4b0c62;
  --color-accent-teal: #56c5d0;
  --color-accent-magenta: #b41e8e;
  --color-white: #ffffff;
  --color-black: #000000;
  --font-family-heading: 'Chivo', sans-serif;
  --radius-none: 0px;
  --space-base: 8px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #4b0c62;
  --color-teal: #56c5d0;
  --font-chivo: "Chivo";
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a hero section with a #4b0c62 background, white Chivo text at 61px, and a 0px radius button in #56c5d0."
- "Design a feature grid using 16px spacing and Chivo 700 for subheadings at 16px."
- "Generate a footer with a #4b0c62 background and a white input field with 0px border radius."

## Known gaps
- Hover and Active states for buttons were not captured in the evidence.
- Exact container max-widths for desktop layouts were not explicitly measured.
- Typography letter-spacing tokens were recorded as "normal" but may have specific tracking in CSS not captured by computed styles.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://orbiseed.com | 1440px | 2026-06-06 |
| Pricing | https://orbiseed.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://orbiseed.com | 390px | 2026-06-06 |