# Cybera Design System

> High-utility financial security interface defined by a stark monochrome foundation and high-contrast electric blue action signals.

**Source:** https://cybera.io | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Cybera utilizes a "monochrome plus one" strategy, where a foundation of deep charcoal (#282a28) and pure white (#ffffff) provides a sober, institutional backdrop for high-voltage electric blue (#0052ff) interactions. Typography is strictly Inter, leaning on medium weights (500) for display headings and regular weights (400) for dense informational copy. The system avoids soft shadows and complex gradients, favoring flat surfaces with 8px to 16px radii to communicate technical precision and reliability.

## Signature DNA
1. **The Signal Blue CTA** (Electric blue #0052ff used exclusively for primary conversion points like "Speak to an Expert" and "Explore," creating a singular path for user intent.)
2. **Achromatic Hierarchy** (Deep grey #282a28 and #1a1b1f handle 90% of the interface, ensuring the brand feels like a security utility rather than a consumer product.)
3. **Inter-Only Type System** (Zero serif usage; authority is established through scale—48px display heads—and tight 20px line heights for body copy.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--dark-grey` | `#282a28` | Primary text, footer backgrounds, and secondary button fills | 42 | 1.0 | Computed Style |
| `--white` | `#ffffff` | Page canvas, primary button text, and card surfaces | 7 | 1.0 | Computed Style |
| `--light-grey` | `#f2f2f2` | Subtle section backgrounds and alternating bands | 3 | 1.0 | Computed Style |
| `--obsidian` | `#1a1b1f` | High-contrast body text for maximum legibility | 13 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--primary-blue-500` | `#0052ff` | Primary CTA background; the brand's only functional color | 2 | 1.0 | CSS Variable |
| `--primary-blue-400` | `#3375ff` | Hover states for primary actions (decorative_only) | 1 | 0.7 | Declared Token |
| `--complaint-purple` | `#a4b3e7` | Data visualization or status indicators (decorative_only) | 1 | 0.5 | Declared Token |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 700 | All display, body, and UI labels | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 48px | 57.6px | normal | 500 | Hero headlines | `h3.display-heading` |
| `{type.h2}` | 32px | 38.4px | normal | 400 | Section titles | `h2` |
| `{type.h3}` | 24px | 28.8px | normal | 500 | Sub-section heads | `h3` |
| `{type.body-lg}` | 18px | 20px | normal | 500 | Intro paragraphs | `div.body-copy.lg` |
| `{type.body-md}` | 16px | 20px | normal | 400 | Default body text | `div.main-nav` |
| `{type.body-ui}` | 16px | 20px | 0.25px | 400 | Interactive labels | `div` |
| `{type.body-sm}` | 14px | 16px | normal | 400 | Footer links | `a.footer-link-2` |
| `{type.label-xs}` | 14px | 16px | 1px | 700 | All-caps badges | `div.title-small` |

### Principles
- **Medium Weight for Display:** Headlines use weight 500 instead of 700 to maintain a modern, tech-forward feel without becoming "heavy."
- **Tight Line Heights:** Body copy uses a 1.25x ratio (16/20), creating dense, efficient blocks of information.
- **Letter Spacing for Labels:** Small 14px labels use 1px tracking to ensure legibility in all-caps or bold treatments.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 6px | 13 |
| `{space.sm}` | 8px | 12 |
| `{space.md}` | 12px | 22 |
| `{space.lg}` | 24px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Layout containers, sharp dividers | 62 occurrences |
| `{radius.md}` | 8px | Primary and secondary buttons | `Rounded Button` component |
| `{radius.lg}` | 16px | Feature cards and content surfaces | `Surface` component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All cards and buttons | Observed across all pages |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary conversion action
**Pages observed:** https://cybera.io
**Spec:** Background `{--primary-blue-500}` (#0052ff) / Text `#ffffff` / Border `none` / Radius `8px` / Padding `12px 16px` / Typography `16px 400`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured

#### Nav Link
**Role:** Primary site navigation
**Pages observed:** https://cybera.io
**Spec:** Background `transparent` / Text `{--dark-grey}` (#282a28) / Radius `0px` / Typography `16px 400`
**States observed:** Default | Hover: captured | Active: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific value propositions
**Pages observed:** https://cybera.io
**Spec:** Background `{--light-grey}` (#f2f2f2) / Text `{--dark-grey}` (#282a28) / Radius `16px` / Padding `24px` / Shadow `none`
**States observed:** Default

#### Footer Link
**Role:** Secondary navigation
**Pages observed:** https://cybera.io
**Spec:** Background `transparent` / Text `{--dark-grey}` (#282a28) / Typography `14px 400` / Line-height `16px`
**States observed:** Default

### Tier 3: Surface-specific

#### Content Surface
**Role:** Grouping related text content
**Pages observed:** https://cybera.io
**Spec:** Background `transparent` / Text `{--dark-grey}` (#282a28) / Border `none` / Radius `16px` / Padding `8px 0px`
**States observed:** Default

#### Hero Section
**Role:** Primary landing page entry
**Pages observed:** https://cybera.io
**Spec:** Background `#ffffff` / Text `{--dark-grey}` (#282a28) / Padding `80px 0px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Page Max-Width | 1200px |
| Section Padding | 80px (vertical) |
| Grid Gaps | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Display type scales to 32px |
| Desktop | 1440px | 12-column grid; 48px display type |

## Imagery & decoration
Cybera uses abstract, line-based world maps and schematic diagrams to represent data flow. It avoids photography, opting for clean vector icons and "Verified Data" UI mockups to emphasize the product's technical nature.

## Do's
- Use `#0052ff` only for primary buttons and critical links.
- Maintain a 16px border radius for all content containers.
- Use Inter 500 for all headings to ensure brand consistency.
- Keep backgrounds achromatic (#ffffff or #f2f2f2).
- Ensure 24px spacing between grid items.

## Don'ts
- **Wrong:** Using `#7f56d9` (Purple) as a primary CTA background. **Right:** Use `#0052ff`. **Reason:** Purple is a legacy token not used for parent brand actions.
- Do not use drop shadows on cards; Cybera is a flat design system.
- Do not use serif fonts for display headings.
- Do not use border-radii smaller than 8px on interactive elements.
- Do not mix multiple saturated colors in a single section.

## Similar brands
- Chainalysis
- TRM Labs
- Elliptic
- Snyk

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary: #0052ff;
  --on-primary: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f2f2f2;
  --text-primary: #282a28;
  --text-secondary: #1a1b1f;
  --radius-button: 8px;
  --radius-card: 16px;
  --font-main: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Generate a primary button using Cybera's electric blue #0052ff with 8px corner radius and white Inter 16px text."
- "Create a feature card with a #f2f2f2 background, 16px radius, and 24px internal padding."
- "Design a hero section with a 48px Inter Medium headline in #282a28 on a white canvas."

## Known gaps
- Hover and Active states for buttons were not captured in the primary crawl.
- Error and Success semantic colors were not observed on the analyzed pages.
- Mobile-specific spacing tokens were not explicitly declared in the CSS variables.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Homepage | https://cybera.io | 1440x900 | 2026-06-06 |
| Mobile View | https://cybera.io | 390x844 | 2026-06-06 |