# Senpiper Design System

> Deep indigo canvases meet crisp white utility, punctuated by high-contrast amber highlights and sharp geometric layouts.

**Source:** [https://senpiper.com](https://senpiper.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Senpiper utilizes a "Dark Mode by Default" hero strategy, anchoring the brand in a deep indigo `#1c0732` and navy `#202337` palette. The system relies on **Open Sans** across all hierarchies, favoring a bold 700 weight for display titles to establish enterprise authority. High-contrast white surfaces `#ffffff` are used for content-heavy sections, creating a clear rhythmic distinction between brand storytelling (dark) and functional information (light). Accent colors are sparse, primarily appearing as amber `#ffb55b` text highlights within headlines to draw focus to key value propositions.

## Signature DNA
1. **The Indigo Anchor** (Deep indigo `#1c0732` backgrounds used for primary hero sections and global footers to create a sophisticated enterprise atmosphere).
2. **Amber Emphasis** (Strategic use of `#ffb55b` within `h1` and `h2` tags to highlight specific words, breaking the monochrome text flow).
3. **Sharp Geometric Containers** (A preference for `0px` border-radius on major section containers and surfaces, signaling a precise, engineering-led aesthetic).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas.white}` | `#ffffff` | Primary surface, button text, and background | 39 | 1.0 | Computed Style |
| `{color.ink.navy}` | `#202337` | Primary text and dark surface elements | 9 | 0.6 | Computed Style |
| `{color.ink.grey}` | `#626472` | Secondary body text and button labels | 81 | 0.8 | Computed Style |
| `{color.ink.black}` | `#000000` | High-emphasis text | 30 | 0.8 | Computed Style |
| `{color.canvas.soft}` | `#f5f5fc` | Subtle section backgrounds | 6 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.indigo}` | `#1c0732` | Hero and Footer background surfaces | 6 | 0.6 | Computed Style |
| `{color.accent.amber}` | `#ffb55b` | Headline text highlights (decorative_only) | 3 | 0.6 | Computed Style |
| `{color.border.muted}` | `#d2d3d7` | Section dividers and borders | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Open Sans | 400, 600, 700 | All (Display, Heading, Body, Nav) | Open Sans (Google Fonts) | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.xl}` | 42px | 52px | normal | 700 | Main Hero H1 | `h1.text-lilac.text-mhd3` |
| `{text.heading.sm}` | 20px | 30px | normal | 400 | Hero sub-copy | `p.text-lilac-white-70.text-left` |
| `{text.body.md}` | 16px | 24px | normal | 400 | Navigation, general body | `nav.z-50.fixed` |
| `{text.body.md.bold}` | 16px | 26px | normal | 600 | Primary UI links | `a.bg-white.text-blue-grey` |
| `{text.body.sm}` | 14px | 24px | normal | 400 | Button labels, footer links | `p.lg:text-tbtn.xl:text-btn` |
| `{text.body.sm.bold}` | 14px | 24px | normal | 700 | Inline links | `a` |

### Principles
1. **Bold Display Hierarchy:** Display titles always use weight 700 to contrast against the dark backgrounds.
2. **Generous Line Height:** Body text maintains a 1.5x to 1.7x ratio (e.g., 14px/24px) to ensure legibility in dense enterprise contexts.
3. **Color-Coded Type:** Light text (`#ffffff`) is reserved for dark indigo surfaces; dark text (`#202337`) is used on white surfaces.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 6px | 6 |
| `{space.sm}` | 8px | 78 |
| `{space.md}` | 12px | 12 |
| `{space.lg}` | 24px | 9 |
| `{space.xl}` | 32px | 3 |
| `{space.section.sm}` | 100px | 3 |
| `{space.section.lg}` | 120px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, primary surfaces | 156 occurrences |
| `{radius.sm}` | 4px | Cards, form inputs | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Standard sections | `Surface` components |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0) 0px 0px 1px 0px` | Interactive cards | `Card` components |

## Components

### Tier 1: Foundational

#### Surface (Dark)
**Role:** Primary brand container for Hero and Footer sections.
**Pages observed:** Home, Pricing, About.
**Spec:** Background: `#1c0732` | Text: `#ffffff` | Radius: `0px` | Padding: `100px 0px`
**States observed:** Default: captured

#### Surface (Light)
**Role:** Standard content section container.
**Pages observed:** Home, Pricing, About.
**Spec:** Background: `#f5f5fc` | Text: `#000000` | Radius: `0px` | Padding: `120px 0px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Card
**Role:** Feature highlights and pricing tiers.
**Pages observed:** Home, Pricing, About.
**Spec:** Background: `#ffffff` | Text: `#202337` | Radius: `4px` | Padding: `6px 24px` | Shadow: `0px 0px 1px 0px rgba(0,0,0,0)`
**States observed:** Default: captured

#### Bordered Section
**Role:** Content grouping with visual separation.
**Pages observed:** Home, Pricing, About.
**Spec:** Background: transparent | Border: 1px solid `#d2d3d7` | Radius: `0px` | Padding: `24px 0px`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Section Padding (Vertical) | 120px |
| Hero Padding (Horizontal) | 100px |
| Max Content Width | Not explicitly captured (fluid) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; Padding reduces. |
| Desktop | 1440px | Horizontal navigation visible; 2-column hero layout (text left, image right). |

## Imagery & decoration
Senpiper uses high-fidelity software mockups with clean, white UI frames to demonstrate product capability. Decorative elements include the use of the amber `#ffb55b` highlight on text. The brand avoids rounded corners on large layout blocks, maintaining a "sharp" enterprise feel.

## Do's
- Use `#1c0732` for full-width hero backgrounds.
- Highlight exactly one or two keywords in headlines using `#ffb55b`.
- Maintain `120px` vertical spacing between major white-canvas sections.
- Use Open Sans 700 for all display headings (`h1`, `h2`).
- Ensure all cards use a subtle `4px` radius to distinguish them from the `0px` layout grid.

## Don'ts
- **Wrong:** Using `#3b82f6` (system ring color) as a primary brand accent. **Right:** Use the indigo/navy palette. **Reason:** `#3b82f6` is a utility token, not a brand color.
- **Wrong:** Applying large border-radii (>4px) to cards. **Right:** Keep corners sharp (`0px`) or minimally rounded (`4px`).
- **Wrong:** Using amber `#ffb55b` for body text. **Right:** Reserve it for headline highlights only.
- Do not mix dark and light surfaces within the same horizontal band.
- Do not use shadows on foundational surface containers.

## Similar brands
- Palantir (Dark enterprise aesthetic)
- IBM (Open Sans usage and grid-heavy layout)
- ServiceNow (Indigo-focused enterprise SaaS)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #202337;
  --color-indigo: #1c0732;
  --color-amber: #ffb55b;
  --color-surface-soft: #f5f5fc;
  --font-main: 'Open Sans', sans-serif;
  --radius-card: 4px;
  --space-section: 120px;
}
```

```javascript
/* Style Dictionary JSON */
{
  "color": {
    "brand": {
      "navy": { "value": "#202337" },
      "indigo": { "value": "#1c0732" },
      "amber": { "value": "#ffb55b" }
    },
    "surface": {
      "white": { "value": "#ffffff" },
      "soft": { "value": "#f5f5fc" }
    }
  }
}
```

## Agent prompt examples
- "Create a hero section with a deep indigo `#1c0732` background, using Open Sans 700 for the title and highlighting the word 'Low-code' in amber `#ffb55b`."
- "Design a feature card with a white background, a 4px border radius, and 16px Open Sans body text in `#626472`."
- "Generate a pricing section using a light grey `#f5f5fc` background with 120px vertical padding."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the token evidence.
- Specific mobile breakpoint pixel values for the hamburger menu transition were not declared in CSS variables.
- Iconography set was not identified by family name.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://senpiper.com | 1440x900 | 2026-06-06 |
| Pricing | https://senpiper.com/pricing | 1440x900 | 2026-06-06 |
| About | https://senpiper.com/about | 1440x900 | 2026-06-06 |