Aside

Overview

Aside is an AI-powered browser designed for knowledge workers who juggle multiple accounts, websites, and complex workflows. The design system embodies 'Productive Minimalism'—a philosophy that strips away visual noise while maintaining warmth and approachability. The bright, optimistic cyan-to-white palette (primary #0a7ea4 anchoring a clean white canvas) conveys intelligence without coldness, and the generous use of whitespace and soft shadows creates a sense of calm focus. The brand personality is confident yet helpful: precise, action-oriented, and never condescending. Voice example: 'Aside learns your workflow and handles repetitive tasks—so you focus on what matters.'

Colors

The color system prioritizes clarity and task-driven interaction. Primary (#0a7ea4) is the signature teal used exclusively on CTAs, active states, and key interactive elements—it signals 'do this now' without aggression. Surface colors range from pure white (#ffffff) down through carefully calibrated grays (surface-container #e9ecef, outline-variant #cccccc) to support hierarchy without introducing visual clutter. Secondary (#5a9fb5) provides a softer teal for supporting UI elements and hover states. Tertiary (#7cb342) is reserved for success states and positive feedback. Error (#d32f2f) is a decisive red for destructive actions and validation failures. The gray scale (on-surface #090b0c for text, on-surface-variant #6c757d for secondary copy) ensures 4.5:1+ contrast ratios across all text

Typography

The type system pairs a distinctive display font (displayFont) for headlines with Geist for body copy, creating visual hierarchy through weight and scale rather than multiple typefaces. Display (48px, 400 weight, -0.02em tracking) anchors hero sections and major headings with elegant restraint. Headline-lg (36px, 400 weight) and headline-md (28px, 400 weight) scale down for section titles, maintaining the same refined weight. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide comfortable reading rhythm for long-form content. Label-md (14px, 500 weight, 0.01em tracking) and label-sm (12px, 500 weight) are used for buttons, badges, and UI labels. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm) when placed over lig

Layout

The layout system uses a 12-column grid with a max-width of 1320px, allowing flexible content arrangement while maintaining visual coherence. Spacing follows a semantic scale: unit (8px) as the base, with sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to horizontal padding on containers. Whitespace is treated as a design element—sections breathe with lg spacing between them, and cards use md padding internally. Container max-width of 1320px ensures readability on ultra-wide displays while maintaining focus.

Elevation & Depth

Elevation is conveyed through subtle shadows and layering rather than dramatic depth. Level 1 (Base): flat white surface with no shadow, establishing the primary reading plane. Level 2 (Cards/Containers): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) creates a soft lift, suggesting interactive surfaces. Level 3 (Modals/Popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) provides additional separation for modal dialogs and floating panels. Focus states add a 3px inset shadow in primary color (rgba(10, 126, 164, 0.1)) to indicate keyboard navigation without disrupting the visual hierarchy. Transit

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are applied strategically to reduce visual harshness while maintaining clarity. Buttons use full radius (9999px) for pill-shaped CTAs, creating a friendly, approachable affordance. Cards and containers use lg radius (8px) for a subtle, modern look that avoids the sterility of sharp corners. Input fields use DEFAULT radius (4px) for a more technical, form-like appearance that signals data entry. Badges and small UI elements use full radius (9999px) to emphasize their compact, self-contained nature. The rationale: larger, more promine

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#0a7ea4) background with white text, full radius (9999px), and 12px 24px padding for a 40px height. On hover, background shifts to #0277bd (primary-fixed-dim) with a 200ms ease transition. Button-secondary uses transparent background with a 1px outline-variant border, maintaining the same dimensions and radius. Button-ghost removes the border entirely, using only text color change on hover (to primary). All buttons use label-md typography (14px, 500 weight) and include a focus state with box-shadow: 0 0 0 3px rgba(10, 126, 164, 0.1).

Containers & Surfaces Cards are the primary content container. Card base uses white background (#ffffff), lg radius (8px), md padding (24px), and a 1p

Do's and Don'ts

**Do**

• Do use primary (#0a7ea4) exclusively for CTAs, active states, and key interactive elements—never for decorative or background purposes.
• Do apply md spacing (24px) between major sections and lg spacing (40px) between hero and content to create breathing room.
• Do use full radius (9999px) on buttons and badges to signal friendliness; use DEFAULT radius (4px) on inputs to signal precision.
• Do include focus states with box-shadow: 0 0 0 3px rgba(10, 126, 164, 0.1) on all interactive elements for keyboard accessibility.
• Do transition between states (hover, focus, active) using 200ms ease timing to feel responsive without being jarring.
• Do maintain 4.5:1+ contrast ratios on all text by using on-surface (#090b0c) for primary copy and on-surface-variant (#6c757d) for secondary copy.

**Don't**

• Don't use primary color for backgrounds, borders, or non-interactive elements—it must remain reserved for CTAs and active states.
• Don't apply shadows deeper than lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) as it creates visual noise and reduces focus.
• Don't use sharp corners (0px radius) on any interactive element; minimum DEFAULT radius (4px) maintains the brand's approachable aesthetic.
• Don't apply transitions longer than 300ms or use easing functions other than ease/ease-in-out, as they feel sluggish and reduce perceived responsiveness.
• Don't mix display font and Geist in the same heading—use display font for hero/display scales and Geist for title/label scales.
• Don't place small text (label-sm, 12px) over low-contrast backgrounds without text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) to ensure legibility.