# Scryai Design System

> High-contrast monochrome precision anchored by deep indigo-black and punctuated by a single high-voltage periwinkle blue.

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

## TL;DR
Scryai utilizes a "Dark Mode" foundational aesthetic even on light canvases, leaning heavily on a deep indigo-black (`#000519`) for primary headings and a high-contrast white (`#ffffff`) for surfaces. The system is strictly monochrome with one functional exception: a vibrant periwinkle blue (`#5f79eb`) reserved for primary actions and brand-critical accents. Typography is exclusively **Inter**, ranging from weight 400 for dense body copy to 700 for card titles, maintaining a technical, data-driven atmosphere. Layouts are defined by generous vertical spacing (up to 120px) and a mix of sharp and moderately rounded (`12px`) containers.

## Signature DNA
1. **The Indigo Anchor** (The use of `#000519` instead of pure black for headings creates a subtle depth that feels more "computational" than "editorial".)
2. **Periwinkle Precision** (Primary actions use `#5f79eb` exclusively, ensuring the brand voltage is concentrated only on interaction points.)
3. **Inter-Only Hierarchy** (The system relies entirely on Inter's weight range and size scale to create hierarchy, eschewing serif or display alternates for a unified engineering aesthetic.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, button text, card surfaces | 187 | 1 | `--white` |
| `{colors.black}` | `#000000` | Primary text, deep shadows | 85 | 1 | `--wp--preset--color--black` |
| `{colors.heading}` | `#000519` | Primary headings, dark section backgrounds | 27 | 1 | `--text-heading` |
| `{colors.border-light}` | `#ededed` | Default dividers and light borders | 55 | 1 | `--border-light` |
| `{colors.subtle-bg}` | `#f9f8f6` | Secondary section backgrounds | 11 | 1 | `--subtle-background` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#5f79eb` | Primary CTA background, active text accents | 18 | 1 | `--brand-primary-5` |
| `{colors.primary-soft}` | `#dfe4fb` | Decorative borders, soft accents | 8 | 1 | `--brand-primary-1` |
| `{colors.primary-ghost}` | `#eff2fd` | Card hover backgrounds, subtle highlights | 5 | 1 | `--brand-primary-05` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 600, 700 | All headings, body, and UI | Inter (Google Fonts) | SIL Open Font |
| Font Awesome 5 Free | 600 | UI Icons (Arrows, etc.) | N/A | GPL/MIT |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 58px | 58px | normal | 500 | Hero step numbers | `span.step-number` |
| `{type.h2}` | 34px | 42.5px | normal | 600 | Section titles | `h2.sec-title` |
| `{type.h4}` | 24px | 30px | normal | 600 | Column headings | `h4.column-heading` |
| `{type.h5-step}` | 22px | 30.8px | normal | 600 | Step titles | `h5.step-title` |
| `{type.card-title}` | 20px | 30px | normal | 700 | Feature card titles | `div.card-title` |
| `{type.body-lg}` | 18px | 25.2px | normal | 600 | Lead paragraphs | `p` |
| `{type.body}` | 16px | 30px | normal | 400 | Default body text | `header#megaMenu` |
| `{type.pill-label}` | 16px | 16px | normal | 600 | Subheadings/Pills | `h3.pill-title` |
| `{type.button}` | 16px | 24px | normal | 500 | CTA text | `a.btn.btn-demo` |
| `{type.caption}` | 10px | 10px | 1.4px | 400 | Overline labels | `span` |

### Principles
1. **Tight Display Tracking:** Display sizes (58px) use `1.0` line-height for maximum impact.
2. **Generous Body Leading:** Standard body text (16px) uses a `1.875` (30px) line-height to improve legibility in technical descriptions.
3. **Uppercase Accents:** Small labels (10px-14px) frequently use `1.4px` letter spacing for a "technical label" feel.

## Spacing
**Base unit:** 4px (approximated)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 21 |
| `{space.sm}` | 12px | 11 |
| `{space.md}` | 20px | 31 |
| `{space.lg}` | 32px | 7 |
| `{space.xl}` | 80px | 5 |
| `{space.section}` | 120px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers | 333 occurrences |
| `{radius.md}` | 10px | Standard cards | Card component |
| `{radius.lg}` | 12px | Feature cards | Card component |
| `{radius.pill}` | 25px | Primary buttons | Rounded Button |
| `{radius.circle}` | 50% | Icon buttons | Rounded Button |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.05) 0px 3.19px 3.19px 0px` | Floating cards | 24 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary CTA (e.g., "Get Demo")
**Pages observed:** https://scryai.com
**Spec:** Background `{colors.primary}` (#5f79eb) / Text `{colors.white}` (#ffffff) / Radius `{radius.pill}` (25px) / Padding 8px 30px / Typography `{type.button}`
**States observed:** Default | Hover: captured | Focus | Active | Disabled: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying industry solutions or product features
**Pages observed:** https://scryai.com
**Spec:** Background `{colors.white}` (#ffffff) / Border 1px `{colors.border-light}` (#ededed) / Radius `{radius.lg}` (12px) / Padding 120px 30px 30px
**States observed:** Default | Hover: captured | Focus | Active | Disabled: not captured

#### Step Card
**Role:** Numbered process steps
**Pages observed:** https://scryai.com
**Spec:** Background `{colors.white}` (#ffffff) / Radius `{radius.md}` (10px) / Shadow `{shadow.subtle}`
**States observed:** Default | Hover: not captured

### Tier 3: Surface-specific

#### Industry Grid Card
**Role:** Image-heavy cards for "Solutions by Industry"
**Pages observed:** https://scryai.com
**Spec:** Background (Image Overlay) / Text `{colors.white}` (#ffffff) / Radius `{radius.lg}` (12px) / Border 0px
**States observed:** Default | Hover: captured

#### Highlight Card
**Role:** Emphasized product callouts
**Pages observed:** https://scryai.com
**Spec:** Background `{colors.primary-ghost}` (#eff2fd) / Border 1px `{colors.primary-soft}` (#dfe4fb) / Radius `{radius.lg}` (12px)
**States observed:** Default | Hover: not captured

#### Dark Brand Card
**Role:** High-contrast brand moments
**Pages observed:** https://scryai.com
**Spec:** Background `{colors.primary}` (#5f79eb) / Text `{colors.white}` (#ffffff) / Radius `{radius.pill}` (25px)
**States observed:** Default | Hover: not captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px |
| Section Vertical Gap | 120px |
| Card Grid Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Section padding reduces to 20px; Card grids stack 1-up. |

## Do's
- Use `#000519` for all primary headings to maintain brand depth.
- Reserve `#5f79eb` for interactive elements (buttons, links, active icons) only.
- Apply `{radius.lg}` (12px) to all content-bearing cards.
- Maintain 120px vertical spacing between major homepage sections.
- Use Inter 700 for card titles to ensure high-contrast hierarchy.

## Don'ts
- **Wrong:** Using `#007bff` (Standard Blue) for buttons. **Right:** Use `#5f79eb`. **Reason:** Standard blue breaks the specific "Periwinkle" brand voltage.
- **Wrong:** Using a serif font for display headers. **Right:** Use Inter 500/600. **Reason:** Scryai is a "monotype" system built on Inter.
- **Wrong:** Applying shadows to every card. **Right:** Use 1px borders (`#ededed`) for most cards; reserve shadows for "Step Cards" only.
- Do not use pure black (`#000000`) for large background sections; use `#000519`.

## Similar brands
- Scale AI
- Palantir
- Databricks
- Jasper (Enterprise UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --scry-indigo: #000519;
  --scry-primary: #5f79eb;
  --scry-primary-soft: #dfe4fb;
  --scry-white: #ffffff;
  --scry-border: #ededed;
  --scry-radius-md: 10px;
  --scry-radius-lg: 12px;
  --scry-shadow: 0px 3.19px 3.19px 0px rgba(0, 0, 0, 0.05);
}
```

## Agent prompt examples
- "Generate a primary CTA button using Scryai's periwinkle blue #5f79eb with a 25px border radius and Inter Medium 16px text."
- "Create a feature card with a 12px border radius, a 1px border in #ededed, and a heading in Scryai Indigo #000519."
- "Design a section header using Inter 600 at 34px with a 42.5px line height, following the Scryai monochrome hierarchy."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the initial crawl.
- Success and Error semantic tokens were not present on the analyzed marketing pages.
- The specific transition timing for card hover effects was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://scryai.com | 1440x900 | 2026-06-06T05:19:20Z |
| Mobile Home | https://scryai.com | 390x844 | 2026-06-06T05:19:22Z |