Color Palette

The core colors that govern the interfaces, layouts, typography, and interactive outlines of Protoss. Click any card to copy the hex code to your clipboard.

Font Hierarchy

Extracted typography scales and font family relationships that drive high-readability hierarchy across pages and cards.

Button Variants

Interactive buttons, selection items, toggles, and input states that form the core modular components.

Visual Container Assets

Feature cards, model specifications, code previews, and visual information display panels.

import { Interpolator } from 'protoss';

const config = Interpolator.blend({
  authority: 4,
  organic: 2,
  vibe: 5
});

Brand Callout

Full-bleed signature callout layouts for lead generation and primary promotional actions.

Integration Hub

Consistent grid tiles showing modular application connections and data sync portals.

Pricing Cards

Tier systems, feature checklists, and pricing models supporting interactive scaling. Click any card to select plan.

Form Elements & States

Text inputs, selection grids, focused outline states, and selectors supporting interactive data entry.

Tag Architecture

Rounded tag badges, status fills, and uppercase tags for feature highlights.

Hero Status Pill (High-Fidelity)

A larger, monospace, high-contrast status indicator positioned at the crown of page hero headers.

Spacing Scale

Extracted padding, margin, and gap parameters that form the structure of components.

Border Radius Scale

Curvature ratios applied across inputs, buttons, feature containers, and model cards.

Elevation & Depth

Layer separations utilizing background-contrast, shadows, borders, and rings.

Responsive Breakpoints

Adaptability rules detailing top nav, display title sizing, column collapses, and touch targets.