Design System for Awanio Documentation Portal

This document defines the visual architecture and style tokens for the Awanio Documentation Portal, aligned with the primary Awanio marketing website theme.

1. Visual Theme & Atmosphere

The portal theme is a hybrid of High-Tech Corporate and Glassmorphism, optimized for a technical documentation audience. The environment balances clean, highly legible documentation layouts with immersive, dark-tech landing page experiences.

The visual style is characterized by:

• Clean Structure: A modern typography hierarchy using Montserrat for headings and Inter for body text.
• Dynamic Adaptability: Full dark and light mode support using centralized design tokens.
• Glassmorphic Accents: Headers, navigation lists, and dropdown panels leverage transparency and backdrop-filters to give a layered "command center" feel.

2. Color Palette & Roles

The color palette leverages dynamic CSS custom variables defined in awanio-tokens.css, mapped to VitePress theme variables in custom.css.

Primary & Action Colors

• Brand Cyan (#00adee): Primary brand color. Used for active navigation links, primary buttons, hover accent borders, and glowing highlights.
• Deep Navy (#0062a1): Secondary brand color. Used for hover states and dark-tech gradients.
• Awanio Primary Container (#00adee / #003d57 in dark mode): Container highlights.

Light Mode default

• Background (#f8f9ff): Clean, cool-gray tinted canvas.
• On-Background (#0b1c30): Very dark navy for primary headings and high contrast body text.
• Surfaces: Layered whites and soft blues (#ffffff lowest container, #eff4ff low container, #e5eeff default container).
• Outline & Borders (#bdc8d1): Soft outlines for containers.

Dark Mode Spec (Stitch Spec)

• Background (#0a0c14): Deep space black.
• On-Background (#e2e1ee): Soft gray-white for typography comfort.
• Surfaces: Dark navy layers (#0c0e16 lowest, #191b24 low, #1d1f28 default).
• On-Surface-Variant (#bdc8d1): Secondary text color.
• Outline & Borders (#3e4850): Low contrast borders for a dark grid aesthetic.

Shadows

• Standard Shadow: 0 4px 20px rgba(11, 28, 48, 0.06) (Light) / 0 4px 20px rgba(0, 0, 0, 0.3) (Dark)
• Elevated Shadow: 0 12px 30px rgba(11, 28, 48, 0.12) (Light) / 0 12px 40px rgba(0, 0, 0, 0.5) (Dark)
• Cyan Glow Shadow: 0 0 15px rgba(0, 173, 238, 0.15) (Light) / 0 0 20px rgba(0, 173, 238, 0.25) (Dark)

3. Typography Rules

Typography uses native web-fonts loaded via Google Fonts.

Role	Font Family	Size	Weight	Line Height	Letter Spacing
Display Title	Montserrat	40px	700 (Bold)	1.15	-0.8px
Section Title (H2)	Montserrat	28px	600 (Semibold)	1.25	-0.5px
Subsection (H3)	Montserrat	22px	600 (Semibold)	1.30	-0.2px
Body Text	Inter	16px	400 (Regular)	1.45	normal
Sidebar Headers	Montserrat	12px	600 (Semibold)	1.33	0.05em (caps)
Code Snippet	JetBrains Mono	14px	500 (Medium)	1.50	normal

4. Components

Home Hero

• Visuals: Modern title layout, clean grid sectioning, and high contrast calls-to-action.
• Actions: Primary buttons use a brand-cyan fill with a subtle hover offset and glow shadow. Secondary/ghost buttons transition to a subtle outline fill on hover.

Product Card (.awanio-card)

• Structure: Rounded corners (var(--awanio-radius-lg)), soft borders, and default standard shadow.
• Hover behavior: Transitions up by -2px, intensifies to elevated shadow, and highlights the border in brand-cyan.

Navigation Header (.VPNavBar)

• Structure: Glassmorphic styling using rgba(248, 249, 255, 0.8) (Light) / rgba(10, 12, 20, 0.8) (Dark) with 12px backdrop blur.
• Products Dropdown: An interactive, multi-column mega-menu embedded next to the search bar for direct access to cloud platform offerings (Cockpit, Vapor, CEP, Condensa, Portal).

Floating Back to Top Button

• A custom, rounded scroll-indicator appearing past 300px scroll height, offering single-click scroll-to-top with smooth transitions and hover glowing border.

Mobile Local Nav

• A sliding mobile drawer layout allowing quick, responsive selection of local sidebar content on smaller viewports.

5. Do's and Don'ts

Do

• Always use Montserrat for headings and Inter for body copy.
• Leverage dynamic custom properties (var(--awanio-*)) to ensure dark mode works automatically.
• Style callouts and cards with var(--awanio-radius-md) (8px) or var(--awanio-radius-lg) (12px).
• Use JetBrains Mono for code blocks and raw command line references.

Don't

• Do not hardcode HEX colors; always map colors through the design token file.
• Avoid using heavy, harsh black drop shadows. Use translucent dark navy shadows (rgba(11,28,48,...)).
• Never use sharp, non-rounded boxes for UI components. Awanio's shape language is softly geometric.