# Ekairos Design System

Status: direction candidate 02, prepared for review before applying it to the landing.

## Visual thesis

Ekairos is a serious operating surface with one controlled rupture: chaos entering a system that can hold it.

The system combines the structural restraint of the React Bits Security Template with the established Ekairos hero language. It must feel coherent, modern, SaaS-native, and memorable without becoming a music poster, gaming interface, or generic dark dashboard.

## Narrative

The core narrative is:

`NOISE → CAPTURE → BOUNDARY → ORDER`

Chaos is input. Structure is the product outcome. Human judgment remains visible throughout the conversion.

## Composition

The page uses one continuous OLED surface. Sections are separated by space, content, and responsible rules—not decorative color fields.

- Maximum content width: `1440px`.
- Desktop gutters: `clamp(20px, 4vw, 72px)`.
- Section rhythm: `clamp(96px, 12vw, 176px)`.
- Primary proportion: `38.2 / 61.8`.
- Structural rules: `1px` by default.
- Active boundary: up to `3px`.
- Corners: square or a `12px` geometric cut.
- No large rounded cards.
- No section-sized diagonal bands.
- No ornamental dividers.

## Color roles

| Token | Value | Responsibility |
| --- | --- | --- |
| OLED | `#050506` | Primary page and product surface |
| Graphite | `#0D0D0F` | Elevated operational surface |
| Paper | `#F5F1EC` | Primary text and decisive controls |
| Coral | `#EF6273` | Action, escalation, active transition |
| Cyan | `#4AC2E5` | Incoming signal and technical orientation |
| Violet | `#70407A` | Boundary, ownership, durable structure |
| Acid | `#B7FF3C` | Stable or verified telemetry only |

Default composition is approximately 80% OLED/graphite, 9% paper, 5% coral, 3% cyan, 2% violet, and no more than 1% acid telemetry.

Color never decorates an entire section. It identifies responsibility:

- Coral means something is acting or needs attention.
- Cyan means information is arriving or orienting the operator.
- Violet means a durable boundary exists.
- Acid means a stable, verified state.
- Paper creates decisive contrast.

## Typography

Two families carry the system.

- **Geist Sans**: product language, navigation, actions, and large direct statements.
- **Source Serif 4**: human judgment and interpretive emphasis.
- **Geist Mono**: state, identifiers, time, evidence, and telemetry.

Large headlines remain concise and sans-led. Serif appears inside the sentence to mark the human or interpretive concept. Mono text is small, uppercase, and functional.

## Hero

The hero behaves like the Security Template: restrained statement first, one dominant product artifact second.

The dominant artifact is the **Operational conversion field**. It combines:

- the Ekairos abstract image as operational chaos;
- `AsciiWaves` as unstructured signal;
- a fixed curved boundary;
- compact context and disorder readouts;
- four conversion stages;
- a thin SaaS-style window frame.

The image and animation stay inside the artifact. They never become an unbounded page background.

## Operational conversion field

This is the core reusable visual concept.

| Stage | State | Meaning |
| --- | --- | --- |
| Noise | unowned | Input exists without a responsible boundary |
| Capture | received | The system has accepted the input |
| Boundary | typed | Ownership, scope, and action contract are explicit |
| Order | operable | Work can be reviewed, executed, and verified |

`BlinkingSquares` may support the field as low-amplitude telemetry. It must remain behind the operational labels and never become the subject.

## Operating principles

### 1. Structure

Boundaries remain visible. Rails describe ownership, scope, and durable state. They do not move when the work inside changes.

### 2. Action

Motion explains a transition. A signal may enter, resolve, or escalate. Animation is not ambient decoration.

### 3. Judgment

Evidence gets quiet space. Typography, contrast, and spacing slow the interface down around decisions requiring human responsibility.

## Interface language

The showcase uses one complete SaaS surface instead of a gallery of disconnected components.

- Navigation is quiet and compact.
- Active navigation uses a coral boundary, not a filled color field.
- Event rows expose time, transition, provenance, and state.
- Evidence is a persistent inspector, not a modal flourish.
- Buttons are square, compact, and high contrast.
- Cards exist only when the card is an actual interactive or operational unit.
- Decorative dashboards, metric mosaics, and pill clouds are prohibited.

## Motion grammar

Boundaries stay; state moves.

| Motion | Duration | Use |
| --- | --- | --- |
| Response | `160–240ms` | Controls and local state |
| Reveal | `700–900ms` | Section and evidence entry |
| Ambient | `10–14s` | Bounded signal fields only |

Motion direction is lower-left to upper-right. A moving element must explain entry, transition, or resolution. Reduced-motion preferences remove all non-essential animation.

## Parameterization

The implementation keeps the system tunable in two places:

1. CSS custom properties on the page root define color, content width, gutter, spacing, lines, and cuts.
2. Typed constants in the page define effect parameters, stages, principles, color roles, events, and motion tokens.

The landing must consume these approved values rather than inventing a parallel system.

## Responsive behavior

- Desktop: centered statement and a wide operational artifact.
- Tablet: conversion stages remain horizontal where legible; interface inspector moves below the activity surface.
- Mobile: the artifact becomes taller, the ASCII boundary turns horizontal, stages become a `2 × 2` system, and interface regions stack.
- Mobile preserves hierarchy and meaning; it does not reproduce desktop geometry at reduced scale.

## Application sequence

1. Review this specification and `/design`.
2. Lock the approved tokens and component behavior.
3. Apply the hero, conversion field, interface language, and motion grammar to the Ekairos landing.
4. Validate desktop, tablet, mobile, reduced motion, and OLED contrast.