Skip to main content

Visual Style Guide (Brief)

This guide summarizes the visual system evident in the UI screenshots and current web-app tokens.

Screenshot Layout​

Screens are organized into a user journey order in auth-coditect-ai/SCREENSHOTS.md and stored under:

  • auth-coditect-ai/screenshots/01-landing/
  • auth-coditect-ai/screenshots/02-pricing/
  • auth-coditect-ai/screenshots/03-auth/
  • auth-coditect-ai/screenshots/04-console/
  • auth-coditect-ai/screenshots/05-modals/
  • auth-coditect-ai/screenshots/06-dark/
  • auth-coditect-ai/screenshots/99-admin/

Typeface​

  • Display: Space Grotesk (weights 400–700)
  • Body: Manrope (weights 400–600)

Color System (Tokens)​

Light theme:

  • Background: #f6f5f1
  • Surface: #ffffff
  • Accent surface: #eef4f7
  • Text: #1a1d20
  • Muted text: #4b5563
  • Border: #d8dde4
  • Primary: #0b3b2e
  • Primary strong: #0f5f49
  • Secondary: #d4a90c
  • Secondary strong: #b48f08
  • Accent: #0f4d70

Dark theme:

  • Background: #0b0f14
  • Surface: #121821
  • Accent surface: #0f141c
  • Text: #e6edf3
  • Muted text: #9aa4b2
  • Border: #283140
  • Primary: #7ee1c2
  • Primary strong: #4ec59e
  • Secondary: #f3b93d
  • Secondary strong: #d19a23
  • Accent: #7fb6ff

Layout & Spacing​

  • Wide, centered layouts with generous white space
  • Card-based sections with consistent padding and rounded corners
  • Soft dividers for section separation

Components​

  • Buttons: pill-shaped, high-contrast primary, outlined secondary
  • Cards: rounded 2xl with border and subtle shadow
  • Tabs: pill-style segments with active emphasis
  • Modals: centered dialog with soft overlay; clear primary action
  • Badges: compact, rounded chips for status and roles

Elevation & Depth​

  • Soft drop shadows for cards and modals
  • Glass-like overlays for theme and dialog surfaces

Interaction​

  • Clear hover states and active outlines
  • Strong visual focus on primary CTAs
  • Light/dark theme parity with consistent hierarchy