Yazio

Overview

Yazio is a health and wellness platform that transforms nutrition tracking and fitness management into an intuitive, energetic experience. The design system embraces a "Vital Minimalism" aesthetic—combining the precision of data-driven interfaces with the warmth of approachable, human-centered design. The brand serves health-conscious users seeking sustainable weight loss and habit formation, evoking confidence, clarity, and forward momentum through a distinctive mint-green accent palette (#d3fce7, #91f7c4, #00ad85) set against clean, neutral surfaces. The visual language conveys that wellness is achievable, measurable, and genuinely enjoyable.

Yazio's voice is encouraging yet grounded, conversational without being patronizing. The tone balances motivational language with practical, actionable guidance. Vocabulary emphasizes progress, sustainability, and personal agency—never shame or restriction. Example sentence in brand voice: "Track your meals, celebrate your wins, and build habits that stick—at your own pace."

Colors

The color system is built on a foundation of neutral surfaces (white #ffffff, soft grays #f6f8f9 to #dce1e4) that provide clarity and focus. The primary accent is a vibrant mint-green (#d3fce7 for the main CTA, #91f7c4 for hover/container states, #00ad85 for inverse/tertiary roles), which signals health, growth, and positive action. This accent is used exclusively on primary call-to-action buttons, success badges, and key interactive elements—never on body text or backgrounds. Secondary accents include a warm peach-orange (#f5ac70) for secondary information and alerts, and a deeper teal (#00d6a4) for tertiary actions and highlights. The on-surface text color is a deep charcoal (#181617, rgb(24, 22, 23)), providing 15:1 contrast against white surfaces for accessibility. The outline and outl

Typography

The type system pairs Yazio Sans (a custom, bold geometric sans-serif used for headlines and labels) with Noto Sans (a neutral, highly legible variable font for body text). Yazio Sans is deployed at 700–800 weight for maximum impact on display (80px), headlines (32–48px), and labels (20px at 800 weight), creating a distinctive, energetic voice. Noto Sans serves body copy at 400 weight in 16–18px sizes with 24–28px line-height, ensuring comfortable reading at all scales. The display level (80px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks; headline-lg (48px, 700 weight) anchors secondary sections; headline-md (32px, 700 weight) marks subsections. Body-lg (18px, 400 weight) is used for introductory paragraphs and prominent copy; body-md (16px,

Layout

The layout system uses a 12-column grid with a max-width of 1140px (1024px on smaller breakpoints), centered with 24px gutters on desktop and 16px on mobile. The page rhythm follows a "breathing space" philosophy: major sections are separated by 40px (lg spacing) of white space, subsections by 24px (md spacing), and inline elements by 12px (sm spacing). The container max-width of 1140px is calculated to accommodate the header's 1.875rem (30px) padding on each side, creating a consistent visual frame. Hero sections occupy the full viewport height with centered, left-aligned text blocks; card grids use 3 columns on desktop, 2 on tablet, and 1 on mobile, with 24px gaps between cards. Form inputs and buttons are full-width on mobile, constrained to 400px on desktop. The spacing scale is semant

Elevation & Depth

Visual hierarchy is conveyed through a subtle shadow system and surface-container tokens rather than dramatic depth. Level 1 (Base Surface) uses no shadow; elements sit flush on the white background (#ffffff). Level 2 (Standard Cards & Inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, 3px lift that separates cards from the background without heaviness. Level 3 (Elevated Cards, Modals, Hover States) applies box-shadow: 0 18px 39px rgba(0, 0, 0, 0.1), a larger spread shadow that signals prominence and focus. Level 4 (Header on Scroll) applies box-shadow: 0 70px 70px rgb

Shapes

The shape philosophy is "Geometric Warmth"—combining the precision of modern, tech-forward design with the approachability of slightly softened corners. Buttons use 1rem (16px) border-radius, creating a rounded-rectangle silhouette that feels friendly and clickable without sacrificing sophistication. Cards and containers use 1.5rem (24px) border-radius for a more generous, inviting appearance. Input fields use 0.5rem (8px) border-radius, maintaining a subtle, functional aesthetic. Badges and pills use 9999px (full) border-radius for a fully rounded appearance, signaling completeness and positi

Components

Action Elements Primary buttons use background-color: rgb(211, 252, 231) (#d3fce7), color: rgb(24, 27, 27) (#181617), font-size: 20px, font-weight: 800, border-radius: 8px, padding: 16px 32px, height: 48px. On hover, the background transitions to #91f7c4 (primary-fixed-dim) over 150ms (transition: background-color 150ms ease-out). On active/pressed, apply transform: scale(0.98) and box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) for tactile feedback. Secondary buttons use a transparent background with a 2px solid border in {colors.outline-variant} (#aebbc5), text color {colors.on-surface} (#181617), and the same padding/height as primary. On hover, background becomes {colors.surface-container-high} (#d4dae0) and border-color becomes {colors.on-surface}. Dark CTAs (used in hero sections

Do's and Don'ts

**Do**

• Do use the mint-green primary (#d3fce7) exclusively on CTAs, success states, and key interactive elements—never on backgrounds or body text.
• Do apply the full 12-column grid with 24px gutters and 1140px max-width to maintain consistent horizontal rhythm across all pages.
• Do pair Yazio Sans (bold, geometric) with Noto Sans (neutral, legible) to create a distinctive yet accessible type hierarchy.
• Do use the shadow system (sm: 0 3px 8px, md: 0 18px 39px, lg: 0 70px 70px) to convey elevation and focus, never blur or glassmorphism.
• Do apply 1rem border-radius to buttons, 1.5rem to cards, and 0.5rem to inputs to create a graduated, intuitive shape language.
• Do use the surface-container tokens (lowest, low, high, highest) to create subtle visual separation without introducing new colors.
• Do ensure all interactive elements have a clear hover state with a 150–200ms transition for tactile, responsive feedback.

**Don't**

• Don't use the mint-green accent on body text, backgrounds, or non-interactive elements—reserve it for CTAs and success indicators.
• Don't exceed the 1140px container max-width or reduce the 24px gutter on desktop; this breaks the visual rhythm.
• Don't mix Yazio Sans and Noto Sans weights arbitrarily; use Yazio Sans at 700–800 weight for headlines/labels only, Noto Sans at 400 weight for body.
• Don't apply shadows heavier than the lg level (0 70px 70px) or use blur/glassmorphism effects; the design favors clarity and precision.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the system.
• Don't apply the primary mint accent to disabled or inactive states; use the outline-variant (#aebbc5) or on-surface-variant (#595f60) instead.
• Don't reduce padding or spacing below the sm level (12px) on interactive elements; this harms accessibility and touch targets.