/
Atria - Style Guide

Atria - Style Guide

This document defines the visual and interaction rules for Atria. It serves as the source for UI styling, ensuring consistency across all pages and components.

Once Atria is deployed, this information will be described and explained at the route /style-guide within Atria itself to be the source of truth, and assist Developers and save time keeping the application consistent.

Icon Library

Primary Icon Set: Lucide React (lucide-react)

Guidelines:

  • Always use Lucide React icons to maintain consistency.

  • Import icons directly from lucide-react.

  • Default icon size: 24px (scale proportionally if needed).

  • Use icons alongside text labels where clarity is required.

Color Scheme

Primary Palette

  • Primary Blue: #2196f3 (Material Blue 500)

  • Hover Blue: #1976d2 (Material Blue 700)

  • Light Blue: #e3f2fd (backgrounds, highlights)

  • Focus Blue: #007bff (focus states, Bootstrap default)

Secondary Palette

  • Success Green: #28a745 (Bootstrap green, standardized)

  • Warning/Alert Red: #ff6b6b (general alerts), #ff4d4d (critical errors, low-speed warnings)

Neutral Palette

  • Text Primary: #262626 / #333 / #2d3748

  • Text Secondary: #666 / #4a5568 / #6b7280

  • Backgrounds: #ffffff (primary), #f8f9fa / #f8fafc (light)

  • Borders:

    • Light: #e9ecef / #e0e0e0 / #bdbdbd

    • Medium: #e5e7eb / #e1e5e9

Gradients

  • Hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%)

  • Card: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)

  • Navigation: linear-gradient(135deg, #6c757d 0%, #495057 100%)

Buttons

Standard Buttons

  • Padding: 12px 20px

  • Font Size: 16px

  • Border Radius: 8px

  • Min Width: 150px (when grouped)

Form Buttons

  • Full width on mobile: width: 100%

  • Height: 44px (touch-friendly)

Special Cases

  • Complete Install: Background color reflects state (e.g., red #ff4d4d for errors/low-speed).

  • Sign Out: Neutral grey #9e9e9e.

Cards

Standard Cards

  • Max Width: 500px (mobile forms)

  • Desktop Max Width: 800px

  • Padding: 20px (mobile), 2rem (desktop)

  • Border Radius: 12px (primary), 8px (nested elements)

Site Health Cards

  • Full-width on desktop

  • Background: #f8fafc

  • Border: 1px solid #e2e8f0

  • Border Radius: 16px

Report Modal

  • Width: 92vw (mobile), 70% (tablet/desktop)

  • Max Width: 680px

  • Max Height: calc(100vh - 2rem)

Organization Rules:

  • One primary responsibility per page.

  • Each page has a dedicated CSS file for scoped styling.

  • Shared layout component provides consistent navigation and structure.

Typography

Font Family

  • Primary: Inter, sans-serif

  • Monospace: "Courier New", monospace (technical data)

Sizes

  • Hero: 2.5rem (40px)

  • Large Headings: 1.8rem – 2rem (29–32px)

  • Section Headings: 1.25rem (20px)

  • Subheadings: 1.2rem (19px)

  • Body: 1rem (16px)

  • Small: 0.85rem – 0.9rem (14–15px)

  • Caption: 0.7rem – 0.75rem (11–12px)

Weights

  • Headings: 600 (semi-bold)

  • Navigation: 500 (medium)

  • Labels: 700 (bold)

  • Body: 400 (normal)

Spacing

Components

  • Form Gap: 10px

  • Button Group Gap: 30px (desktop), 15px (mobile)

  • Container Padding: 20px (mobile), 2rem (desktop)

  • Section Margins: 20px (standard), 2rem (desktop)

Layout

  • Header Height: 70px

  • Form Containers: 20px padding, box-sizing: border-box

Shadows

  • Subtle: 0 1px 3px rgba(0, 0, 0, 0.1)

  • Standard: 0 4px 12px rgba(0, 0, 0, 0.15)

  • Elevated: 0 8px 25px rgba(0, 0, 0, 0.15)

Responsive Design

Breakpoints

  • Mobile: max-width: 480px

  • Tablet: min-width: 768px

  • Desktop: min-width: 801px

Behavior

  • Mobile-first: base styles optimized for 480px and below.

  • Forms: 95% width (mobile), 90% (tablet), max-width: 500px.

  • Desktop (801px+):

    • Larger containers (max-width: 800px)

    • Increased padding (2rem)

    • Full-width data display

Touch Targets

  • Minimum height: 44px (buttons, inputs)

  • Input padding: 10px (mobile), 9px (desktop)

  • Font size: 16px (prevents zoom on iOS)

Design Principles

  • Border Radius:

    • Main containers: 12px

    • Cards/Forms: 8px

    • Buttons: 8px

    • Large containers (health cards): 16px

  • Visual Hierarchy:

    • Primary actions → Blue (#2196f3)

    • Destructive actions → Red variants

    • Secondary actions → Grey tones

    • Focus states → Consistent blue outlines

  • Accessibility:

    • Maintain WCAG contrast ratios

    • Minimum touch targets: 44px

    • Clear and consistent focus indicators

    • Semantic use of color (e.g., red = error, blue = primary action)