Cinematic
Depth, atmosphere, glow, and purposeful reveal.
Cerveio design language · v0.2One system.
One system.
Every experience.
This is the source of truth for Cerveio’s color, type, buttons, cards, forms, motion, and living AI orb. Every future page will import the same three CSS files and the same JavaScript foundation.
01 · Principles
Human warmth inside digital intelligence.
Cinematic, clear, calm, trustworthy, and emotionally aware. The interface should feel advanced without feeling cold.
Human
Plain language, compassionate feedback, no robotic clutter.
Premium
Restrained color, careful spacing, polished interaction.
Trustworthy
Clear states, visible controls, privacy-forward behavior.
02 · Color
Electric intelligence on deep space.
Blue signals trust. Violet signals imagination. Cyan signals life. Magenta is reserved for rare emphasis.
03 · Typography
Confident headlines. Quiet reading.
Manrope carries the cinematic identity. Inter handles dense product information and long reading.
Build Your Legacy.
Human knowledge lives on.
Meet the Founding Creators.
Cerveio preserves the insight, voice, perspective, and lived experience people spent a lifetime building.
04 · Buttons & surfaces
Actions glow. Surfaces stay calm.
Primary is reserved for one clear action. Secondary and ghost styles reduce competition.
Glass Card
Deep transparent surface, restrained border, inner light.
Status Language
Small, direct indicators with accessible color support.
Interactive Card
Lift, stronger edge, and subtle glow on hover.
05 · Forms
Clear, private, and easy to trust.
Every form shows labels, focus, help text, success, and errors without relying on color alone.
06 · Living orb
The visible pulse of Cerveio intelligence.
The orb communicates system state without pretending to be a person. Motion, brightness, and rhythm change by context.
Current state: Idle
State library
Select a state to preview the shared animation behavior.
07 · Motion
Movement should explain, not distract.
Fast feedback at 160ms, standard interactions at 280ms, cinematic reveals around 700ms.
Spring movement
Breathing
Processing
Energy glow
08 · Responsive rules
One identity across every screen.
Large desktop: 1240px container. Tablet: condensed grids. Mobile: single-column content and simplified motion.
Desktop
≥ 981px · full navigation, multi-column grids, cinematic scale.
Tablet
641–980px · collapsed navigation, two-column components.
Mobile
≤ 640px · one-column flow, compact header, touch targets ≥44px.
Accessibility
Visible focus, reduced-motion support, readable contrast, semantic controls.