Template Customization Reference

VELNORA Design System & Living Style Guide

This document outlines all colors, typographic scales, button treatments, form controls, and layout components. All variables are declared in assets/css/style.css for effortless brand customization.

Token System 01

Color Palette & Surfaces

Restrained, high-contrast, editorial palette with warm ivory canvases and electric lime focal accents.

Canvas Background

--color-bg

#FBFBFA

Alternate Surface

--color-bg-alt

#F4F3EE

Surface White

--color-surface

#FFFFFF

Obsidian Charcoal

--color-surface-dark

#111215

Electric Lime

--color-accent

#C8F53C

Accent Tint

--color-accent-subtle

#F3FDE1

Text Primary

--color-text-primary

#111215 (WCAG AAA)

Text Secondary

--color-text-secondary

#3D404C (WCAG AAA)

Border Neutral

--color-border

#E5E4DE

Status Error

--color-error

#D9383A

Status Success

--color-success

#15803D

Status Info

--color-info

#0284C7

Token System 02

Typography Hierarchy

Modern Swiss typographic principles featuring Plus Jakarta Sans paired with JetBrains Mono.

Display Heading • clamp(2.5rem, 5.5vw, 4.25rem) • 800 Weight

The Autonomous Intelligence Operating System

Heading 1 (h1 style preview) • 3rem (48px) • 700 Weight

Architected for Deterministic Autonomous Execution

Heading 2 (h2) • 2.25rem (36px) • 700 Weight

Transparent Pricing Engineered to Scale

Heading 3 (h3) • 1.875rem (30px) • 700 Weight

Dynamic Multi-Agent Mesh & Deadlock Prevention

Heading 4 (h4) • 1.5rem (24px) • 700 Weight

Sub-10ms Global Router & Cache Telemetry

Lead Paragraph • 1.125rem (18px) • Line-Height 1.7

VELNORA delivers production-grade orchestration with deterministic guardrails, zero context poisoning, and sub-10ms routing across distributed compute clusters.

Standard Body Text • 1rem (16px) • Line-Height 1.62

In complex multi-step reasoning, agents often fall into recursive feedback loops or deadlock conditions. VELNORA introduces a mathematically proven distributed scheduling protocol.

Monospace & Inline Code • JetBrains Mono

Execute with pipeline.verifySchema(contract_v2) to ensure invariant compliance.

Token System 03

Buttons & Badges

Consistent interactive elements with accessible hover, focus-visible, and active states.

Button Hierarchy

Button Sizing Scale

Badges & Status Chips

Default Badge Accent Live Pulse Dark Badge Success Pill

Token System 04

Form Controls & Feedback States

Fully accessible form fields, focus outlines, and built-in error states.

Normal State Elements

Text Input

Select Dropdown

Textarea

Error & Alert States

Email Address * Please enter a valid email address with a domain.

Token System 05

Spacing System (4px / 8px Grid)

Documented spacing scale for margin, padding, and layout rhythm.

--space-1 (4px)

--space-2 (8px)

--space-3 (12px)

--space-4 (16px)

--space-6 (24px)

--space-8 (32px)

--space-12 (48px)

--space-16 (64px)

Token System 06

Inline SVG Icon Library

Consistent 24x24 vector icons with uniform 2px stroke, round caps, and responsive scaling (open-source Feather/Lucide system).

Grid / Canvas

Shield / Guardrail

Telemetry Pulse

Cost Governor

Clock / Latency

Checkmark

Cross / Close

Arrow Right

Token System 07

Responsive Breakpoint Matrix

Detailed verification viewports tested during quality assurance.

Breakpoint	Device Target	Behavioral Adaptations
320px	Ultra-compact phones (iPhone SE 1st gen)	Single column layout, compact logo, hidden window controls, zero horizontal scroll.
375px • 430px	Modern handsets (iPhone 13-16, Pixel, Galaxy)	Full-width button targets, stacked workflow nodes, drawer navigation.
768px	Tablets in portrait (iPad, tablets)	2-column grid collapse, simplified telemetry sidebar, touch-optimized accordions.
1024px	Tablets in landscape & small laptops	Desktop header actions adapt, bento grid spans normalize, drawer available.
1440px • 1920px	High-resolution desktop displays	Max-width container bounding (1200px-1360px), crisp HiDPI vector rendering.