# Sparkxyz Design System

> A high-contrast venture ecosystem interface pairing deep navy foundations with energetic brand-blue and orange accents.

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

## TL;DR
Sparkxyz utilizes a professional "monochrome-plus" system where a deep navy foundation `#081445` provides structural authority against a clean white `#ffffff` canvas. The system injects energy through a primary brand blue `#4b68ea` and a secondary functional orange `#f6ad55`, primarily used for high-conversion CTAs. Typography is split between the geometric, friendly **Ilisarniq-regular** for headings and the highly legible **Inter-UI-Regular** for functional body text and interface elements. Components favor soft geometry with a mix of 8px, 28px, and full pill-shaped radii, often supported by deep, soft shadows for elevation.

## Signature DNA
1. **The Navy Anchor** (Deep navy `#081445` is used for all primary text and dark backgrounds, creating a high-contrast 17.6:1 ratio against white surfaces for maximum legibility and authority.)
2. **Functional Orange CTAs** (The use of `#f6ad55` is reserved for secondary "Learn More" and "Sign Up" actions, creating a distinct visual hierarchy against the primary blue buttons.)
3. **Ilisarniq Display** (The use of Ilisarniq-regular for all headings, characterized by generous line heights (~1.5x) and subtle negative tracking on large sizes, defines the brand's modern venture aesthetic.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-white` | `#ffffff` | Page background, button text, card surfaces | 43 | 1 | Computed Style |
| `--color-blue-dark` | `#081445` | Primary text, headings, dark surface text | 111 | 1 | CSS Variable |
| `--color-black` | `#000000` | Footer text, high-contrast button backgrounds | 2 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-brand-blue` | `#4b68ea` | Primary button background, borders, links | 26 | 1 | CSS Variable |
| `--color-brand-orange` | `#f6ad55` | Secondary CTA background, decorative accents | 4 | 1 | CSS Variable |
| `--color-brand-blue-darker` | `#1d43e5` | Hover states, deep surface backgrounds | 4 | 1 | CSS Variable |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Ilisarniq-regular | 400, 600, 700 | Headings, Titles, Brand labels | Jost | Proprietary |
| Inter-UI-Regular | 400, 700 | Body, Navigation, UI Buttons | Inter | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h3}` | 35px | 54.96px | -0.3px | 400 | Section Headings | `h3` |
| `{type.title}` | 21px | 27.93px | 0.1px | 600 | Card Titles | `p.title` |
| `{type.h4}` | 20px | 28px | normal | 400 | Sub-headings | `h4.text-xl` |
| `{type.body}` | 16px | 28px | normal | 400 | Running Prose | `p` |
| `{type.button}` | 16px | 24px | normal | 700 | Primary CTAs | `a.btn-blue` |
| `{type.nav}` | 16px | 24px | normal | 400 | Header Navigation | `header.top-header` |
| `{type.btn-sm}` | 13px | 20.41px | 1.7px | 700 | Orange CTAs | `a.orange-btn` |
| `{type.caption}` | 12px | 24.96px | 0.9px | 400 | Small labels | `a` |

### Principles
1. **Heading Breathability:** Large headings (35px) use a line-height ratio of 1.57x to ensure readability in multi-line titles.
2. **Button Emphasis:** Primary buttons use weight 700 (Bold) to distinguish interactive elements from weight 400 body text.
3. **Uppercase Tracking:** Small functional labels (13px-14px) often employ increased letter spacing (up to 1.7px) for clarity.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 27 |
| `{space.sm}` | 16px | 13 |
| `{space.md}` | 24px | 6 |
| `{space.lg}` | 40px | 7 |
| `{space.xl}` | 64px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Default containers, sharp sections | 147 occurrences |
| `{radius.md}` | 8px | Content cards | `Card` component |
| `{radius.lg}` | 28px | Large feature panels | `Rounded Button` |
| `{radius.pill}` | 9999px | Primary and Secondary Buttons | `Pill Button` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.soft}` | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px` | Standard cards | `Surface` component |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.21) 0px 14px 44px -8px` | Floating feature panels | `Rounded Button` |
| `{shadow.brand}` | `rgba(60, 91, 220, 0.06) 10px 20px 55px 0px` | Hero-area cards | `Card` component |

## Components

### Tier 1: Foundational

#### Pill Button (Primary)
**Role:** Main call to action (Sign Up, Sign In)
**Pages observed:** /pricing, /about
**Spec:** Background: `#4b68ea` / Text: `#ffffff` / Border: 1px `#4b68ea` / Radius: `9999px` / Padding: `8px 16px` / Typography: `Inter 16px 700`
**States observed:** Default | Hover: Not captured

#### Pill Button (Outline)
**Role:** Secondary actions on white backgrounds
**Pages observed:** /pricing, /about
**Spec:** Background: `#ffffff` / Text: `#4b68ea` / Border: 1px `#4b68ea` / Radius: `9999px` / Padding: `8px 16px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Surface (Card)
**Role:** Content grouping and pricing tiers
**Pages observed:** /pricing, /about
**Spec:** Background: `#ffffff` / Text: `#081445` / Radius: `0px` / Padding: `24px` / Shadow: `{shadow.soft}`
**States observed:** Default | Hover: Not captured

#### Feature Card
**Role:** Highlighting specific user types (Investors, Startups)
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` / Text: `#081445` / Radius: `8px` / Padding: `0px 40px` / Shadow: `{shadow.brand}`

### Tier 3: Surface-specific

#### Rounded Button (Orange)
**Role:** "Learn More" feature-specific CTAs
**Pages observed:** Homepage
**Spec:** Background: `#f6ad55` / Text: `#ffffff` / Radius: `27.5px` / Padding: `16px 0px` / Shadow: `{shadow.deep}` / Typography: `Ilisarniq 13px 700`
**States observed:** Default | Hover: Not captured

#### Dark Mode Surface
**Role:** Floating controls on dark backgrounds
**Pages observed:** Homepage
**Spec:** Background: `rgba(0, 0, 0, 0)` / Text: `#ffffff` / Border: 1px `rgba(0, 0, 0, 0)` / Radius: `20px` / Padding: `8px 29px`
**States observed:** Default | Hover: Not captured

## Layout
| Property | Value |
|------|-------|
| Page Max-Width | 1440px |
| Section Vertical Gap | 64px - 84px |
| Card Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero buttons stack vertically; Card grids become 1-column. |
| Desktop | 1440px | 3-column feature grids; Horizontal top-nav with Sign-up/Log-in right-aligned. |

## Imagery & decoration
Sparkxyz uses playful, flat-style vector illustrations featuring a palette of blues, purples, and oranges. These illustrations often sit within circular or organic blue background shapes to create depth. The brand avoids photography, relying entirely on these custom graphics to represent "Investors" and "Startups."

## Do's
- Use `#081445` for all primary headings to maintain brand authority.
- Apply `{radius.pill}` to all primary navigation and entry-point buttons.
- Maintain a minimum of `24px` padding inside white surface cards.
- Use `Ilisarniq-regular` for any text designated as a title or heading.
- Reserve `#f6ad55` for "Learn More" or secondary conversion paths.

## Don'ts
- **Wrong:** Using `#4b68ea` for body text. **Right:** Use `#081445`. **Reason:** Blue text on white is reserved for links and buttons; navy provides better contrast for reading.
- **Wrong:** Mixing sharp and rounded corners on the same card. **Right:** Stick to `{radius.md}` for content cards.
- **Wrong:** Labeling the orange `#f6ad55` as the primary brand color. **Reason:** The primary brand color is blue `#4b68ea`; orange is a functional accent.
- Do not use shadows on buttons that already have a high-contrast background color.
- Do not use `Inter` for display headings larger than 20px.

## Similar brands
- AngelList
- Gust
- Carta
- Crunchbase

## Quick start

### CSS Variables
```css
:root {
  --color-blue-dark: #081445;
  --color-brand-blue: #4b68ea;
  --color-brand-orange: #f6ad55;
  --color-white: #ffffff;
  --font-heading: "Ilisarniq-regular", sans-serif;
  --font-body: "Inter-UI-Regular", sans-serif;
  --shadow-soft: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  --radius-pill: 9999px;
}
```

## Agent prompt examples
- "Create a pricing card using a white background, `#081445` for the price text, and a `{radius.pill}` button using `#4b68ea`."
- "Generate a hero section with a deep navy background `#081445`, white Ilisarniq headings, and two pill buttons: one filled `#4b68ea` and one outlined white."
- "Design a feature grid where each card has an 8px border radius and the `{shadow.brand}` elevation style."

## Known gaps
- Hover and Active states for buttons were not captured in the static trace.
- Specific mobile breakpoint transitions for the footer layout were not fully detailed in the source.
- Form input validation states (Success/Error) were not present on the analyzed pages.

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