Avocado

Overview

Avocado embodies 'Clarity-First Minimalism'—a design philosophy that prioritizes legibility, purposeful hierarchy, and frictionless interaction over decorative complexity. The brand serves professionals and enterprises seeking straightforward, trustworthy digital solutions. The aesthetic is rooted in institutional clarity: generous whitespace (minimum 24px gutters), a restrained two-tone accent system (primary #046bd2 paired with secondary #045cb4), and typography that scales from display-weight Montserrat headlines (56px, -0.02em tracking) to body-weight Roboto (16px, 1.5 line-height). The emotional response is one of confidence and accessibility—users feel guided, never overwhelmed.

The brand voice is direct, professional, and human. Vocabulary favors concrete nouns over abstract adjectives; sentences are active and concise. Tone is warm but authoritative, never casual or breathless. Example: 'We connect your team to the tools that matter—fast, reliable, built to scale.' The design system reinforces this voice through consistent use of 4px border-radius on interactive elements (never sharp, never overly rounded), 0px 1px 2px rgba(0,0,0,0.05) shadows on cards (subtle depth without drama), and a surface stack that moves from #ffffff (base) through #f0f5fa (container-lowest) to #eeeeee (container-high) in predictable 6–8% increments.

Colors

The color system is anchored by a primary accent, #046bd2, deployed on all call-to-action buttons, active states, and focus indicators. This blue is neither corporate-cold nor playful; it reads as 'professional-forward.' Secondary #045cb4 (a 2% darker variant) is reserved for hover states and emphasis, creating a subtle but deliberate visual progression. Tertiary #0274be provides additional accent flexibility for badges, status indicators, and secondary CTAs. The surface stack—from #ffffff (surface) through #f0f5fa (container-lowest), #fbfbfb (container), #eeeeee (container-high), and #e6e6e6 (container-highest)—creates a neutral, accessible foundation. On-surface text is #1e293b (a near-black with 11% blue undertone, never pure black #000000), paired with on-surface-variant #334155 for se

Typography

The type system pairs Montserrat (geometric, confident) for headlines and Roboto (humanist, readable) for body text—a deliberate contrast that signals hierarchy without requiring size alone. Display (56px, 700 weight, -0.02em tracking) is reserved for hero statements and major page titles; headline-lg (36px, 600 weight) for section breaks; headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and callout text; body-md (16px, 400 weight, 24px line-height) for standard body copy and form labels. Label-md (14px, 500 weight, 20px line-height, 0.01em tracking) is applied to button text, form labels, and metadata; label-sm (12px, 500 weight, 16px line-height, 0.03em tracking) for captions, timestamps, and tertiary informa

Layout

The layout system uses a 12-column grid with a fixed max-width of 1200px, centered on viewport. Container padding scales with breakpoint: 2.5em (40px) on desktop, 2em (32px) on tablet, 1.8em (28.8px) on mobile. The spacing scale—xs (4px), sm (12px), md (24px), lg (40px), xl (64px)—is semantic: use md (24px) for section separation, lg (40px) for major layout breaks, and sm (12px) for component-internal spacing. Gutters between columns are always 24px (md spacing). White-space is generous: minimum 40px vertical rhythm between major sections, 24px between cards or list items. The narrow container (750px) is reserved for single-column content (blog posts, documentation); the default container (1200px) is used for marketing pages and dashboards. Never collapse white-space below 12px (sm) in pro

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts, never through dramatic drop-shadows or blur effects. Level 1 (Base Cards): 0px 1px 2px 0px rgba(0, 0, 0, 0.05) with background #fbfbfb (surface-container). Level 2 (Elevated Cards / Modals): 0px 4px 8px 0px rgba(0, 0, 0, 0.08) with background #f5f8fb (surface-container-low). Level 3 (Floating Elements / Popovers): 0px 8px 16px 0px rgba(0, 0, 0, 0.12) with background #ffffff (surface). Hover states on cards transition to Level 2 shadow (0px 4px 8px) over 0.2s ease. Buttons never cast shadows; they rely on c

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but minimal, signaling approachability without sacrificing professional credibility. Buttons and inputs use 4px border-radius (DEFAULT), creating a subtle softness that feels contemporary without being trendy. Cards and containers use 6px border-radius (md), slightly more generous to suggest containment and separation. Modals and popovers use 8px border-radius (lg) to emphasize elevation and importance. Full-width badges and pills use 9999px (full) for maximum roundness, reserved for status indicators and tags. Never use 0px

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (#046bd2 background, white text, 13px vertical / 30px horizontal padding, 40px height, 4px radius) are used for main CTAs ('Get Started', 'Contact Us'). On hover, the background shifts to secondary #045cb4 over 0.2s ease. Secondary buttons (transparent background, 2px #046bd2 border, primary text) are used for alternative actions ('Learn More', 'View Docs'). On hover, the background fills with primary-container #e3f2fd. Ghost buttons (transparent, no border, primary text) are used for tertiary actions within dense layouts. All buttons include 0px 1px 2px 0px rgba(0, 0, 0, 0.05) shadow for subtle depth. Focus states use a 2px dotted outline in primary #046bd2, positioned 2px outside the button boundary.

###

Do's and Don'ts

**Do**

• Do use primary #046bd2 exclusively for interactive elements (buttons, links, focus states) and never as a background fill for large surfaces.
• Do maintain minimum 24px gutters and 40px section spacing to preserve the 'Clarity-First' aesthetic and prevent cognitive overload.
• Do pair Montserrat headlines with Roboto body text; never mix serif fonts or use Montserrat for body copy below 18px.
• Do apply 0px 1px 2px 0px rgba(0, 0, 0, 0.05) shadow to all cards and inputs; never use drop-shadow or blur effects.
• Do use 4px border-radius on buttons and inputs, 6px on cards, and 8px on modals; never use 0px or exceed 12px on standard components.
• Do test all interactive elements with a 2px dotted outline in primary #046bd2 for focus states; never rely on color alone.
• Do use on-surface #1e293b for body text and on-surface-variant #334155 for secondary text; never use pure black #000000.

**Don't**

• Don't use secondary #045cb4 or tertiary #0274be as primary button backgrounds; reserve these for hover states and accents only.
• Don't collapse white-space below 12px (sm spacing) or use padding below 8px on interactive elements; this breaks the clarity hierarchy.
• Don't apply shadows larger than 0px 8px 16px or use blur effects (backdrop-filter); this contradicts the 'Clarity-First' philosophy.
• Don't mix rounded corners (e.g., 6px on buttons and 12px on cards); maintain consistency within component families.
• Don't use error color #d9534f for non-error states or success color for warnings; reserve semantic colors for their intended purpose.
• Don't set line-height below 1.3em on headlines or below 1.5em on body text; this reduces readability and accessibility.
• Don't use outline-variant #e7e7e7 borders on interactive elements; use primary #046bd2 for focus states and outline-variant only for container edges.