Skip to content

DESIGN.md

Latest commit

 

History

History
224 lines (159 loc) · 6.87 KB

DESIGN.md

File metadata and controls

224 lines (159 loc) · 6.87 KB

Varax Design System

Last Updated: April 2026 Status: Active

Brand Identity

  • Product: Varax — Kubernetes Compliance, Automated
  • Tone: Fresh, credible, clean, modern, a little quirky
  • Audience: Initially small startups, eventually enterprise
  • Positioning: Serious cybersecurity product from a fresh new startup

Logo

The Varax logo consists of a geometric angular "V" mark made of two overlapping chevron shapes (dark navy + medium blue) followed by the wordmark "arax" in dark navy. The V mark doubles as the letter V in the product name.

  • Logo SVG: public/logos/varax-logo.svg
  • Tagline: KUBERNETES COMPLIANCE, AUTOMATED (rendered in the SVG, not used in nav)

Logo Usage

  • Navigation: Logo without tagline, 60px height
  • Footer: Logo at reduced opacity on dark background
  • Favicon: V mark only, extracted from the chevron shapes

Color Palette

Brand Colors (from logo)

Token Hex Usage
--navy #1E3A5F Primary text, headings, dark surfaces
--navy-deep #152B47 Footer, deepest backgrounds
--blue #2A5A97 Primary accent, CTAs, links
--blue-bright #3B7DD8 Hover states, interactive highlights
--blue-light #5B9BE6 Light accent, terminal syntax

Highlight Color (warm contrast)

Token Hex Usage
--highlight #E8654A Warm accent for emphasis, badges, section labels
--highlight-light #F07C5E Highlight hover states
--highlight-bg rgba(232,101,74,0.08) Highlight tinted backgrounds
--highlight-border rgba(232,101,74,0.2) Highlight tinted borders

Backgrounds

Token Hex Usage
--bg #FAFBFD Page background (cool white)
--bg-warm #F6F7FB Alternating sections
--surface #EDF0F7 Cards, elevated surfaces
--surface-raised #E4E9F2 Hover/active surface states

Borders

Token Hex Usage
--border #D1D9E6 Standard borders
--border-subtle #E2E8F0 Subtle dividers, section edges

Text

Token Hex Usage
--text #1E3A5F Primary body text (same as navy)
--text-secondary #5A6578 Secondary/supporting text
--text-tertiary #8B95A5 Tertiary/muted text, labels

Semantic

Token Hex Usage
--success #10B981 Pass states, checkmarks
--success-bg #ECFDF5 Success backgrounds
--warning #F59E0B Warnings
--warning-bg #FFFBEB Warning backgrounds
--error #EF4444 Errors, failures

Terminal / Code

Token Hex Usage
--code-bg #0D1B2A Terminal background
--code-surface #1B2838 Terminal title bar
--code-border #253649 Terminal borders
--code-text #C9D6E3 Terminal text
--code-accent #5B9BE6 Terminal prompts, syntax highlights
--code-green #4ADE80 Success/pass in terminal
--code-yellow #FCD34D Warning in terminal
--code-dim #4A5C6E Muted terminal text

Typography

Font Stack

Role Font Fallback
Headings Plus Jakarta Sans system-ui, sans-serif
Body DM Sans system-ui, sans-serif
Code JetBrains Mono ui-monospace, monospace

Heading Sizes

Element Size Weight Letter Spacing Line Height
h1 (hero) 48px 700 -0.03em 1.12
h2 (section) 36px 700 -0.02em 1.2
h3 (card) 16-18px 700 0 1.4

Body Text

Context Size Color Line Height
Body 16px --text-secondary 1.7
Hero subtitle 18px --text-secondary 1.65
Card description 14px --text-secondary 1.65
Section label 12px mono --highlight 1

Section Labels

Monospace (JetBrains Mono), uppercase, letter-spacing 0.12em, colored with --highlight. Used above section titles for categorization.

Design Language

Geometric Motif

The angular V from the logo informs the overall design language:

  • Diagonal section dividers via CSS clip-path between alternating sections
  • Angled accent lines as subtle decorative elements
  • Geometric grid patterns in hero backgrounds
  • Angular clip-paths on decorative card corners

Spacing

  • Container max-width: 1140px
  • Section padding: 100px vertical
  • Card padding: 28-32px
  • Card border-radius: 14-16px
  • Button border-radius: 10px

Elevation & Depth

  • Cards: 1px border + subtle shadow on hover
  • Terminal: deep shadow (0 20px 60px rgba(13,27,42,0.15)) + gradient border glow
  • Buttons: colored shadow matching button color

Animations

  • Page load: fadeUp animation (0.6s ease-out) for hero elements
  • Terminal lines: staggered fadeUp with 0.12s delay per line
  • Cards: translateY(-3px) on hover with 0.25s transition
  • Buttons: translateY(-2px) on hover with shadow expansion
  • Pulse: green dot animation on badges (2s infinite)

Component Specs

Buttons

Primary: Blue background (--blue), white text, 10px radius, colored shadow. Hover brightens to --blue-bright.

Secondary: Transparent with 1.5px border (--border), navy text. Hover tints border and text to blue.

Both: Plus Jakarta Sans, 15px, font-weight 600, 13px vertical / 28px horizontal padding.

Cards

  • White background on --bg-warm sections
  • 1px --border-subtle border
  • 14px border-radius
  • 32px padding
  • Hover: highlight-tinted border, subtle shadow, lift

Terminal Blocks

  • Deep navy background (--code-bg)
  • macOS-style title bar with traffic light dots
  • Gradient border glow (highlight to blue blend)
  • JetBrains Mono 13px

Navigation

  • Sticky, backdrop-blur glass effect
  • 72px height
  • Logo at 60px height
  • Nav links: 14px DM Sans medium, secondary text color
  • CTA button: blue solid, same as primary button style

Footer

  • Deep navy background (--navy-deep)
  • 4-column grid: brand + 3 link columns
  • White text at reduced opacity
  • Logo at reduced opacity

Page Structure

Homepage Sections

  1. Hero: Two-column (copy + terminal), badge, h1 with highlight keyword, dual CTAs
  2. Trust Bar: "Works with" logo strip on warm background
  3. Data Sovereignty: Two-column (text + dark terminal card)
  4. Features: 3x2 card grid with icons, diagonal top edge
  5. How It Works: Three numbered steps with connecting line
  6. Pricing Teaser: Three-column cards (Free / Pro featured / Enterprise coming soon)
  7. Final CTA: Centered headline with radial glow background
  8. Footer: Dark navy, 4-column grid

Color Rhythm

Sections alternate between --bg (cool white) and --bg-warm (slightly tinted), with diagonal clip-path transitions between them.