Magic Trip

Overview

Magic Trip is a premium functional mushroom confectionery brand that transforms wellness into an accessible, playful experience. The design system embraces a "Vibrant Minimalism" aesthetic—clean, bright surfaces punctuated by bold accent colors (coral pink #f34c64, teal #14c2b2, and electric purple #6e4ff6) that evoke energy, transformation, and modern sophistication. The brand serves health-conscious consumers seeking premium, non-intoxicating mushroom products without sacrificing indulgence or visual delight. The UI personality is warm, approachable, and slightly irreverent—never clinical or austere.

The tone of voice is conversational yet authoritative: Magic Trip speaks as a knowledgeable friend who understands both the science and the joy of functional foods. Vocabulary leans into sensory language ("delicious," "smooth," "crafted") and playful brand moments ("Ride the Magic Trip"). Example sentence in brand voice: "Our Strawberry Gummies deliver 2g of lion's mane per serving—no jitters, just clarity and flavor."

Colors

The color system balances a clean white canvas (surface: #ffffff) with three distinct accent roles. Primary (#f34c64) is the signature coral-pink used exclusively on call-to-action buttons, links, and interactive focus states—it commands attention without aggression. Secondary (#14c2b2), a vibrant teal, appears in hero gradients and supporting UI elements, evoking freshness and natural ingredients. Tertiary (#6e4ff6), a rich purple, completes the gradient palette and is reserved for premium or featured product highlights. The inverse surface (#1b122a) is a deep plum used sparingly in dark-mode contexts or overlay states. All text on white surfaces uses on-surface (#000000) for body copy and on-surface-variant (#4a4a4a) for secondary information. When backgrounds shift to gradient or dark o

Typography

The type system uses Work Sans exclusively, a geometric sans-serif that balances friendliness with clarity. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and brand moments; headline-lg (40px, 600 weight) introduces major sections; headline-md (28px, 600 weight) breaks up content zones. Body-lg (18px, 400 weight, 28px line-height) is used for feature descriptions and testimonials, while body-md (16px, 400 weight, 24px line-height) serves as the default paragraph text. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels; label-sm (12px, 500 weight, 0.05em tracking) is reserved for badges, captions, and metadata. When displaying small labels over busy gradient backgrounds (e.g., product badges on hero), apply text-shadow 0 2px 4px rgba(0

Layout

The layout system uses a 12-column grid with a max-width of 1280px (container-max), centered with symmetric gutters of 24px on desktop. Spacing follows a semantic scale: unit (8px) is the baseline; xs (4px) for micro-spacing; sm (12px) for tight grouping; md (24px) for standard section padding; lg (40px) for major section separation; xl (64px) for hero and full-width spacing. Hero sections span full-width with lg spacing (40px) top and bottom padding. Product cards use md padding (24px) internally and are separated by md spacing (24px) horizontally. The white-space philosophy prioritizes breathing room: never collapse vertical spacing below lg (40px) between major content blocks. On mobile (< 768px), container max-width becomes 100% with gutter reduced to 16px, and spacing scale compresses

Elevation & Depth

Depth in Magic Trip is achieved through a restrained shadow system and strategic use of container backgrounds rather than aggressive drop shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards & Containers): 0 3px 8px rgba(0, 0, 0, 0.15) applied to product cards, modals, and lifted containers—this creates subtle separation without visual heaviness. Level 3 (Modals & Overlays): 0 16px 40px rgba(0, 0, 0, 0.12) reserved for full-screen modals and hero overlays. Focus states on interactive elements use a 3px inset box-shadow with primary color at 10% opacity: 0 0 0 3p

Shapes

The shape philosophy is "Soft-Technical Approachability"—rounded corners signal friendliness and modernity without sacrificing clarity. Buttons and primary CTAs use full radius (9999px / border-radius: 50%), creating pill-shaped affordances that feel inviting and contemporary. Cards and containers use lg radius (1rem / 16px), balancing softness with definition. Input fields and secondary interactive elements use DEFAULT radius (0.5rem / 8px), a subtle rounding that maintains form legibility. Badges and small UI elements use full radius (9999px) to emphasize their compact, self-contained nature

Components

Action Elements Buttons are the primary interaction driver. The button-primary component uses backgroundColor: {colors.primary} (#f34c64), textColor: {colors.on-primary} (#ffffff), rounded: {rounded.full}, padding: 18px 32px, height: 48px, and fontWeight: 600. On hover, backgroundColor transitions to #ff6b7f (inverse-primary) over 200ms ease-in-out. Button-secondary uses a transparent background with a 2px solid border in primary color, maintaining the same padding and height; on hover, it fills with primary-container (#f9e5e9). Both variants use label-md typography (14px, 600 weight). Focus state applies a 3px inset box-shadow: 0 0 0 3px rgba(243, 76, 100, 0.1).

Containers & Surfaces Cards use backgroundColor: {colors.surface} (#ffffff), rounded: {rounded.lg} (16px), padding: {sp

Do's and Don'ts

**Do**

• Do use primary (#f34c64) exclusively for primary CTAs, links, and focus states—never dilute its impact by overusing it on secondary elements.
• Do apply lg spacing (40px) between major content sections to maintain breathing room and visual hierarchy.
• Do use Work Sans at 600+ weight for all interactive labels and headings to ensure clarity and visual weight.
• Do apply the 0 3px 8px rgba(0, 0, 0, 0.15) shadow to cards and lifted containers for subtle depth without visual heaviness.
• Do use full border-radius (9999px) exclusively on primary buttons to signal them as the dominant interaction affordance.

**Don't**

• Don't use secondary (#14c2b2) or tertiary (#6e4ff6) as primary button backgrounds—reserve them for gradients and supporting UI only.
• Don't collapse vertical spacing below lg (40px) between major content blocks; this breaks the breathing-room philosophy.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.12) on any element—aggressive shadows contradict the clean, modern aesthetic.
• Don't mix border-radius values on a single component; use consistent rounding (full for buttons, lg for cards, DEFAULT for inputs) to maintain visual coherence.
• Don't use on-surface-variant (#4a4a4a) for primary body text; reserve it for secondary information, captions, and disabled states only.