# Supy Design System

> Deep violet precision on a cool gray canvas, anchored by the geometric clarity of Fustat.

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

## TL;DR
Supy utilizes a high-contrast palette of deep violet (#503390) and near-black (#18181b) against a clean, off-white foundation (#fafafa). The typography is dominated by **Fustat**, a contemporary sans-serif that balances technical precision with high legibility across a wide range of weights (400–700). Interactive elements are defined by a specific 6.08px border radius and consistent 1px borders, while structural cards utilize a softer 10.08px or 16px radius. The system uses saturated amber (#fcd34d) as a high-voltage hover state for primary actions, creating a distinct "active" energy within a professional SaaS framework.

## Signature DNA
1. **The Violet Anchor** (Primary actions and brand surfaces utilize a deep, high-contrast violet #503390, often paired with white text for maximum legibility).
2. **Fustat Geometry** (The exclusive use of Fustat across all display and body roles provides a unified, modern architectural feel).
3. **Soft-Precision Radii** (The recurring use of non-integer radii like 6.08px and 10.08px for buttons and cards suggests a specific, grid-aligned mathematical precision).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.text-primary}` | `#18181b` | Primary text, titles, button labels | 429 | 1 | `--_theme---text-primary` |
| `{colors.canvas}` | `#fafafa` | Page background, secondary surfaces | 110 | 1 | `--_theme---gray-mode--50` |
| `{colors.border-light}` | `#e4e4e7` | Default dividers, secondary button borders | 24 | 1 | `--_theme---gray-mode--200` |
| `{colors.ink-deep}` | `#000000` | Ghost button borders (hover), deep backgrounds | 10 | 1 | `--_theme---black-30` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#503390` | Primary button background, brand borders | 12 | 1 | `--_buttons---background` |
| `{colors.accent-violet}` | `#6e52d9` | Secondary brand color, primary button border | 14 | 1 | `--_theme---button-primary--background` |
| `{colors.accent-amber}` | `#fcd34d` | Primary button hover background | 7 | 1 | `--_theme---button-primary--background-hover` |
| `{colors.accent-soft}` | `#e1ddf7` | Secondary button hover, decorative surfaces | 4 | 1 | `--_theme---button-secondary--background-hover` |
| `{colors.orange-50}` | `#fff3ea` | Decorative background only | 1 | 0.8 | `decorative_only` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Fustat | 400, 500, 600, 700 | All display, body, and UI labels | Jost | Google Fonts |
| Fa 300 | 300 | Iconography (Light) | FontAwesome | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 56px | 56px | -0.75px | 500 | Hero H2 | `h2.h2` |
| `{type.display-md}` | 40px | 44px | -0.5px | 500 | Section H3 | `h3.h3` |
| `{type.heading-sm}` | 24px | 30px | normal | 500 | Feature titles | `div.h5` |
| `{type.body-lg}` | 18px | 24px | normal | 400 | Leading paragraphs | `p.p-leading` |
| `{type.body-md}` | 16px | 25.6px | normal | 400 | Default body | `header#home-hero` |
| `{type.button}` | 14px | 14px | normal | 500 | CTA labels | `div.button` |
| `{type.body-sm}` | 14px | 18px | normal | 400 | Secondary text | `p.p-small` |
| `{type.caption}` | 12px | 14px | normal | 400 | Tiny annotations | `div.p-tiny` |

### Principles
- **Medium weight for impact.** Display sizes (40px+) use weight 500 rather than bold to maintain a clean, modern profile.
- **Tight display tracking.** Negative letter-spacing (-0.5px to -0.75px) is applied to display type to maintain visual tension.
- **Vertical rhythm.** Line heights for body text are consistently 1.4x to 1.6x the font size for readability.

## Spacing
**Base unit:** 8px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 6px | 24 |
| `{space.sm}` | 8px | 29 |
| `{space.md}` | 12px | 49 |
| `{space.lg}` | 16px | 17 |
| `{space.xl}` | 24px | 15 |
| `{space.xxl}` | 56px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.input}` | 4px | Form fields, small cards | 17 occurrences |
| `{radius.button}` | 6.08px | Primary and secondary buttons | 35 occurrences |
| `{radius.card}` | 10.08px | Standard content cards | 44 occurrences |
| `{radius.panel}` | 32px | Large section containers | 8 occurrences |
| `{radius.pill}` | 9999px | Badges and tags | 25 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Book a demo)
**Pages observed:** https://supy.io
**Spec:** Background `{colors.primary}` (#503390) / Text #ffffff / Border 1px `{colors.primary}` / Radius 6.08px / Padding 12px 16px / Typography `{type.button}`
**States observed:** Default | Hover: `{colors.accent-amber}` (#fcd34d) | Active: captured

#### Secondary Button
**Role:** Secondary actions (Watch overview)
**Pages observed:** https://supy.io
**Spec:** Background transparent / Text `{colors.text-primary}` (#18181b) / Border 1px `{colors.border-light}` (#e4e4e7) / Radius 6.08px / Padding 12px / Typography `{type.button}`
**States observed:** Default | Hover: `{colors.accent-soft}` (#e1ddf7) | Active: captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature highlights and testimonials
**Pages observed:** https://supy.io
**Spec:** Background #ffffff / Text `{colors.text-primary}` / Border 0px / Radius 10.08px / Padding 24px
**States observed:** Default: captured

#### Info Badge
**Role:** Category labeling (e.g., "Procurement")
**Pages observed:** https://supy.io
**Spec:** Background transparent / Text `{colors.text-primary}` / Border 1px rgba(255,255,255,0.2) / Radius 9999px / Padding 0px / Typography 16px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Section Panel
**Role:** Large background containers for grouped features
**Pages observed:** https://supy.io
**Spec:** Background `{colors.canvas}` (#f4f4f5) / Radius 32px / Padding 56px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px (approx) |
| Section Gap | 80px - 120px |
| Grid | 12-column desktop |

## Do's
- Use **Fustat 500** for all headlines to maintain the brand's geometric character.
- Apply the **6.08px radius** to all interactive button elements.
- Use **#503390** as the primary background for high-priority CTA buttons.
- Ensure **#fcd34d** is used exclusively for hover states on primary violet buttons.
- Maintain a **#fafafa** background for the main page canvas to ensure high text contrast.

## Don'ts
- **Don't** use pure black (#000000) for body text; use `{colors.text-primary}` (#18181b).
- **Don't** use sharp 0px corners for buttons; the 6.08px radius is a brand signature.
- **Don't** use the amber accent (#fcd34d) for text or primary button backgrounds; it is a hover-only signal.
- **Don't** mix other sans-serif fonts with Fustat; the system is single-family.

## Similar brands
- **Ramp** (Clean SaaS, similar focus on financial/operational precision)
- **Linear** (Geometric sans-serif usage, subtle border treatments)
- **Brex** (High-contrast professional palette with specific accent logic)

## Quick start

### CSS Custom Properties
```css
:root {
  --supy-violet-primary: #503390;
  --supy-violet-accent: #6e52d9;
  --supy-amber-hover: #fcd34d;
  --supy-gray-900: #18181b;
  --supy-gray-50: #fafafa;
  --supy-radius-button: 6.08px;
  --supy-radius-card: 10.08px;
  --supy-font-main: 'Fustat', sans-serif;
}
```

## Known gaps
- **Shadows:** No significant drop shadows were captured in the evidence; the system appears to rely on borders and background shifts for depth.
- **Success/Error states:** Form validation and semantic feedback colors were not captured in the analyzed homepage scope.
- **Mobile Navigation:** The specific transition states for the mobile menu were not fully detailed in the static capture.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://supy.io | 1440px | 2026-06-06 |
| Mobile View | https://supy.io | 390px | 2026-06-06 |