# Rippey Design System

> High-contrast monochrome architecture punctuated by deep oceanic accents and ultra-soft pill geometry.

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

## TL;DR
Rippey utilizes a high-density monochrome foundation where deep charcoal `#495057` and slate gray `#666666` anchor a pure white canvas. The system is defined by extreme geometric contrasts: sharp 0px edges for structural containers paired with ultra-soft 46px radii for content cards. A single oceanic blue `#0e659e` serves as the primary chromatic signal, used exclusively for text-based emphasis and interactive highlights. Typography is unified under the Mulish family, ranging from heavy 800-weight display headers to light 300-weight utility text.

## Signature DNA
1. **The 46px Radius Card** (Large-format content containers featuring a signature 46px corner radius and 39px internal padding, creating a "soft-box" effect against the sharp grid.)
2. **Mulish Weight Extremes** (The juxtaposition of Extra Bold 800 for titles and Light 300 for body/metadata, creating clear hierarchy without changing typefaces.)
3. **Oceanic Text Accents** (The use of `#0e659e` as a functional color for key industry terms and interactive links within a strictly achromatic layout.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Background, button text, surfaces | 37 | 1.0 | `--white` |
| `{color.ink.primary}` | `#495057` | Primary display text | 16 | 0.8 | Computed |
| `{color.ink.secondary}` | `#666666` | Body text, card borders | 15 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.blue}` | `#0e659e` | Text emphasis, links (decorative_only) | 10 | 0.6 | Computed |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--yellow` | `#ffc107` | Warning (declared only) |
| `--green` | `#28a745` | Success (declared only) |
| `--red` | `#dc3545` | Error (declared only) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Mulish | 300, 400, 500, 600, 700, 800 | Universal | Mulish (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.lg}` | 48px | 76.8px | 0.1px | 600 | Hero display | `span.text-white` |
| `{text.display.md}` | 46px | 69px | 0.1px | 800 | Section titles | `div.section-title` |
| `{text.heading.sm}` | 22px | 35px | 0.1px | 800 | Card titles | `div.customer-name` |
| `{text.body.lg}` | 18px | 35px | 0.1px | 600 | Featured body | `span.message` |
| `{text.body.sm}` | 15px | 22.5px | 0.1px | 600 | Metadata/Dates | `div.date` |
| `{text.utility}` | 14px | 26.04px | normal | 300 | Technical body | `div#webgl_wave` |
| `{text.link}` | 14px | 10.5px | 0.1px | 400 | Inline actions | `a.read-more` |
| `{text.caption}` | 14px | 0px | normal | 300 | Micro-copy | `span` |

### Principles
1. **Heavyweight Headers:** Section titles must use Mulish at weight 800 to maintain brand authority.
2. **Lightweight Utility:** Technical descriptions and metadata default to weight 300 for maximum contrast with headers.
3. **Consistent Tracking:** A standard 0.1px letter spacing is applied across almost all typographic tiers to ensure legibility.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 15 |
| `{space.sm}` | 20px | 10 |
| `{space.md}` | 39px | 8 |
| `{space.lg}` | 71px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, site-wide structural blocks | 60 occurrences |
| `{radius.panel}` | 46px | Customer testimonial cards, feature cards | 8 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All components observed | Component spec |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Schedule a demo)
**Pages observed:** https://rippey.ai
**Spec:** Background `#007bff` (declared) / Text `#ffffff` / Radius 46px (derived from panel) / Typography Mulish 600.
**States observed:** Default captured.

#### Secondary Button
**Role:** Ghost action (Contact Us)
**Pages observed:** https://rippey.ai
**Spec:** Background transparent / Text `#ffffff` / Border 1px `#ffffff` / Radius 46px / Typography Mulish 600.
**States observed:** Default captured.

### Tier 2: Patterns

#### Testimonial Card
**Role:** Social proof container
**Pages observed:** https://rippey.ai
**Spec:** Background `#ffffff` / Text `#666666` / Radius 46px / Padding 39px / Shadow none.
**States observed:** Default captured.

#### Blog Card
**Role:** Content feed item
**Pages observed:** https://rippey.ai
**Spec:** Background image-led / Text `#ffffff` / Radius 0px / Typography Mulish 300.
**States observed:** Default captured.

### Tier 3: Surface-specific

#### Technology Hub
**Role:** Interactive feature diagram
**Pages observed:** https://rippey.ai
**Spec:** Central icon node with radial satellite links / Border 1px dotted `#0e659e`.
**States observed:** Default captured.

#### Chat Widget
**Role:** Support interface
**Pages observed:** https://rippey.ai
**Spec:** Background `#ffffff` / Radius 16px (estimated) / Text `#495057`.
**States observed:** Default captured.

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding | 71px (vertical) |
| Card Grid Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; section titles scale to 32px; 1-column card stacking. |
| Desktop | 1440px | Multi-column grids; 48px display type enabled. |

## Imagery & decoration
Rippey uses dark-themed hero backgrounds featuring "WebGL waves" or data-point constellations to signal AI/Logistics connectivity. It avoids vibrant photography, preferring desaturated or blue-tinted industrial imagery.

## Do's
- Use Mulish 800 for all primary section titles.
- Apply the 46px radius to all white content cards on the homepage.
- Use `#0e659e` sparingly for text emphasis within paragraphs.
- Maintain a 39px internal padding for large cards.
- Ensure all structural section backgrounds are either pure white or near-black.

## Don'ts
- **Wrong:** Using `#007bff` (declared primary) for text. **Right:** Use `#0e659e`. **Reason:** Evidence shows the rendered accent color is a specific oceanic blue, not the standard Bootstrap blue.
- Do not use drop shadows on content cards; Rippey relies on flat geometry and borders.
- Do not use intermediate border radii (e.g., 8px or 12px); stick to 0px or 46px.
- Do not center-align body text exceeding three lines.

## Similar brands
- Flexport (Logistics/Tech mix)
- Samsara (Industrial IoT/Dark UI)
- Scale AI (Technical/Achromatic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --rippey-canvas: #ffffff;
  --rippey-ink-primary: #495057;
  --rippey-ink-secondary: #666666;
  --rippey-accent: #0e659e;
  --rippey-radius-panel: 46px;
  --rippey-font-main: 'Mulish', sans-serif;
}
```

## Agent prompt examples
- "Create a testimonial card for Rippey using a white background, no shadow, a 46px border radius, and Mulish 800 for the name."
- "Generate a hero section with a dark background, white Mulish 600 text at 48px, and a ghost button with a 46px radius."
- "Design a data grid using `#495057` for headers and Mulish 300 for the body rows."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Error and Success state UI components (inputs/toasts) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://rippey.ai | 1440x900 | 2026-06-06 |
| Mobile Home | https://rippey.ai | 390x844 | 2026-06-06 |