Maca

Overview

Maca is a contemporary skincare brand that embodies 'Botanical Minimalism'—a design philosophy that marries clean, uncluttered interfaces with warm, natural color accents. The brand serves health-conscious consumers seeking transparency and efficacy in their skincare routines. The visual identity evokes clarity and approachability through a predominantly white canvas (rgb(255, 255, 255)) punctuated by a signature lime-green accent (rgb(214, 231, 158) / #d6e79e) that signals vitality, natural ingredients, and a forward-thinking approach to beauty. The UI conveys calm confidence: every element is intentional, every interaction feels effortless.

Maca's voice is conversational yet authoritative—never clinical, never breathless. The brand speaks to informed consumers with respect for their intelligence. Vocabulary favors clarity over jargon: 'nutrient-rich formulas' rather than 'bioactive complexes,' 'every skin type' rather than 'dermatologically optimized.' Example sentence in brand voice: 'Our lightweight serum absorbs in 30 seconds, leaving skin hydrated without the shine.'

Colors

The Maca color system centers on a high-contrast, light-forward palette designed to communicate cleanliness and trust. Primary (#d6e79e, rgb(214, 231, 158)) is a soft, warm lime-green used exclusively on call-to-action buttons ('Shop Now'), interactive highlights, and focus states. This accent appears sparingly but decisively—it's the color users click. Secondary grays (#e9ecef, #d0d0d0, #6c757d) form the neutral backbone, used for dividers, disabled states, and secondary text. The surface stack is anchored in pure white (#ffffff) for maximum clarity, with container variants stepping down to #f5f5f5 (surface-dim) and #e9ecef (surface-container) for subtle depth without visual noise. On-surface text is pure black (#000000) for 16px body copy and above; smaller labels use #666666 (on-surface

Typography

Maca's type system uses Aktiv Grotesk exclusively across all scales—a contemporary geometric sans-serif that communicates modern efficiency without coldness. The hierarchy spans from display (60px, 700 weight) for hero moments down to label-sm (12px, 500 weight) for UI chrome. Headlines use 500 weight (not 600 or 700) to maintain approachability; the slightly lighter touch prevents the brand from feeling corporate or sterile. Body copy sits at 16px with 400 weight and 24px line-height (1.5), ensuring readability on both desktop and mobile without excessive leading. Letter-spacing is minimal (0em to -0.04em on display) to preserve the geometric precision of the typeface. On small labels over busy backgrounds (e.g., product tags, form hints), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) t

Layout

Maca uses a 24-column grid system on desktop (768px+) and an 8-column grid on mobile, with a fixed container max-width of 1500px. The page rhythm relies on consistent 24px (md spacing) for section separation and 40px (lg spacing) for major content blocks. Gutter width is 4vw on desktop and 6vw on mobile, creating a fluid, responsive margin that scales with viewport. White-space is treated as a design element: sections breathe with ample padding (6% vertical, 4% horizontal on hero sections), and cards maintain 24px internal padding to prevent content from feeling cramped. The grid uses 11px column gaps and 11px row gaps to create a tight, precise rhythm. Hero sections span full-width with a soft purple background (implied by the screenshot's gradient), while product cards and form inputs si

Elevation & Depth

Depth in Maca is achieved through subtle shadows and strategic use of the surface container stack rather than dramatic layering. The base elevation (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards, dropdowns) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests a card floating 4–6px above the background. Level 3 (modals, elevated overlays) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger spread shadow indicating greater separation. Hover states on interactive elements transition the shadow from Level 2 to Level

Shapes

Maca employs 'Architectural Precision'—a shape philosophy that favors sharp, minimal corners over soft curves. The default border-radius is 0px (no rounding), reinforcing the brand's clean, contemporary aesthetic. Buttons and interactive elements use 4px (DEFAULT) for subtle softening without compromising precision; this micro-radius prevents the UI from feeling harsh while maintaining geometric clarity. Form inputs and dropdowns also use 4px, creating visual consistency across interactive surfaces. Cards and containers default to 0px, but elevated modals and popovers use 8px (lg) to signal th

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses background: rgb(214, 231, 158) (#d6e79e), text-color: rgb(0, 0, 0), padding: 0 32px, height: 48px, border-radius: 4px, font-weight: 500, and font-size: 14px. On hover, the background transitions to #c9e08a (primary-fixed-dim) over 150ms. On active/pressed, apply box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) to create a subtle pressed effect. Secondary buttons (e.g., 'Contact') invert the scheme: background: rgb(0, 0, 0), text-color: rgb(255, 255, 255), with the same padding and height. On hover, darken to #1a1a1a. Both button variants use font-family: aktiv-grotesk and disable text-decoration.

Containers & Surfaces Cards use background: rgb(255, 255, 255), border: 1px solid #cccccc, border-radi

Do's and Don'ts

**Do**

• Do use the lime-green primary (#d6e79e) exclusively on CTAs and focus states—it's the brand's signature and should never be diluted or overused.
• Do maintain 24px minimum padding inside cards and containers to prevent content from feeling cramped or overwhelming.
• Do apply the 4px border-radius consistently to buttons and inputs; this micro-radius is the brand's signature softness.
• Do use Aktiv Grotesk at 500 weight for headlines instead of 700 to preserve the brand's approachable, modern tone.
• Do transition hover states over 150–200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, intentional interactions.

**Don't**

• Don't round corners on cards or major containers—0px border-radius is the default; reserve rounding for interactive elements only.
• Don't use the primary green on secondary elements, badges, or decorative accents; it must remain reserved for primary actions.
• Don't apply shadows stronger than 0 8px 24px rgba(0, 0, 0, 0.12) or the interface will feel heavy and dated.
• Don't mix typefaces; Aktiv Grotesk is the sole font family across all scales and weights.
• Don't add color to disabled states beyond desaturation to #e9ecef; avoid red or error colors for disabled UI.