UI Cardtheme-onest.design.md

Active Theme: ONEST: Pale Blue & OrangeArchetype: ORANGEFont: 'Onest'Mode: LIGHT

ONEST: Pale Blue & Orange Style System

Serene pale blue cyan and muted ice blue atmospheres balanced by radiant vibrant orange and rust red accents.

1. Theme Color Tokens (LIGHT)

themes/theme-onest.design.md

Primary

Brand Accent

Hover / Active

Primary Focus

Page Canvas

Base Background

Card Surface

Modular Panels

Inset Surface

Inputs & Logs

Hairline Border

1px Subtle Dividers

Success (OK)

Status Indicator

Warning

Caution State

Danger

Critical Alert

Accent / Slate

Secondary Tint

Radius: 8px

Base Radius

Controls & Buttons

Large: 12px

Panel Radius

Cards & Shell

2. Card Layout (UI Card Style)

Framed & Layered Cards

3. Buttons & Interactive Inputs

Active Palette Applied

Platform Admin Buttons (.pa-btn variants)

Pill & Quiet Action Utilities (.btn-pill, .btn-quiet)

Input Controls (.pa-input)

Interactive Input

Placeholder State

Disabled Input

4. Badges & Eyebrow Typography

Status Language

Standard Badge System Optimal Moderate Latency Critical Noticecompact:8080

.LP-CARD DESIGN SYSTEM

Minimal Hairline Top Boundary

Lightweight visual hierarchy defined by clean line breaks rather than boxed enclosures.

.LP-CARD-ACCENT

Primary Accent Highlight

Draws immediate viewer focus with a bold brand accent rule at the top.

.lp-callout Left Indicator

High-visibility accent callout emphasizing critical deployment instructions without boxiness.

5. Architecture Visualizations & Telemetry Log (.pa-log)

Live Stream

Pulsing Node Indicators (@keyframes apa-pulse-*)

yellow

blue

green

amber

purple

black

Monospace Telemetry Output (.pa-log)

[SYSTEM] Active Theme: ONEST: Pale Blue & Orange (theme-onest.design.md) [MODE] Applied Mode: LIGHT [FONT] Family: 'Onest', sans-serif [STYLE] Card Archetype: ui-card [READY] Real-time CSS variable bindings active on root element