NoCarb®

Overview

NoCarb® is a complete dietary supplement line designed for health-conscious consumers pursuing low-carbohydrate lifestyles—diabetics, athletes, and those following keto, Dukan, Paleo, and allergen-free protocols. The brand embodies a 'Nutritional Clarity' aesthetic: a clean, minimalist interface built on a pure white canvas (#ffffff) with vibrant green accents (#80c342, #65bc7b) that signal vitality, wellness, and natural ingredients. The visual language is direct and trustworthy, avoiding unnecessary ornamentation; every element serves a functional purpose. The UI evokes confidence and precision—users feel they are making informed, science-backed dietary choices.

The brand voice is informative yet approachable, speaking to both medical professionals and everyday health seekers. Tone: clear, non-judgmental, solution-oriented. Vocabulary emphasizes specificity ("unique fiber blends," "zero gluten, lactose, soy") over marketing hyperbole. Example sentence in brand voice: "Our proprietary plant-fiber combinations deliver sustained satiety without the carbohydrate spike—ideal for keto athletes and type-2 management."

Colors

The NoCarb color system is rooted in a 'Wellness Minimalism' philosophy: a neutral white foundation (#ffffff, #f6f6f6) provides clarity and trust, while a dual-green accent system conveys natural health and vitality. Primary green (#80c342, RGB 128, 195, 66) is the signature brand color, deployed on all call-to-action buttons, interactive focus states, and key product highlights. It appears in computed styles as --awb-color5 and drives the visual hierarchy. Secondary green (#65bc7b, RGB 101, 188, 123) supports secondary actions and status indicators, creating a cohesive but distinct accent layer. Tertiary green (#577810, RGB 87, 120, 16) anchors darker contexts and badges, providing depth without introducing a new hue family.

Neutral grays form the surface stack: surface-container-lowest

Typography

The type system uses Roboto as the primary typeface, a humanist sans-serif that balances precision with warmth—essential for a brand communicating nutritional data to diverse audiences. Display (60px, weight 700, -0.04em letter-spacing) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, weight 600, -0.02em) and headline-md (28px, weight 600, -0.01em) structure content hierarchy, with tighter letter-spacing to enhance readability of Greek text. Body-lg (18px, weight 400, 0.02em) and body-md (16px, weight 400, 0.01em) carry product descriptions and nutritional information; the 0.01–0.02em letter-spacing prevents cramping in dense ingredient lists. Label-md (14px, weight 600, 0.01em) and label-sm (12px, weight 500, 0.05em) handle form labels, badges, an

Layout

The layout operates on a 12-column grid with a fixed container max-width of 1024px, balancing desktop readability with mobile responsiveness. White-space is generous: lg spacing (40px) separates major sections (hero, product grid, testimonials), md spacing (24px) divides cards and content blocks, and sm spacing (12px) provides breathing room within components. The gutter is set to 24px, creating consistent left/right margins on all breakpoints. This rhythm prevents cognitive overload—users scanning product information or dietary guidelines encounter natural pause points. The design avoids cramped layouts; even on tablet (641–1024px), containers maintain 24px horizontal padding. The 1024px max-width reflects the site's observed container widths and ensures that form inputs, product cards, a

Elevation & Depth

Depth is achieved through subtle, functional shadows rather than dramatic layering. Level 1 (Base): the white surface (#ffffff) with no shadow, establishing the ground plane. Level 2 (Standard Cards): box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), creating a soft lift that distinguishes product cards and content blocks from the background. Level 3 (Elevated/Hover States): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), applied on card-hover and modal overlays to signal interactivity and focus. The shadow spread is intentionally soft (10–12px blur radius) to avoid harsh contrast; this aligns with the b

Shapes

The shape philosophy is 'Functional Softness': rounded corners are applied conservatively to signal approachability without sacrificing clarity. Buttons use rounded.md (0.75rem / 12px border-radius) or a hardcoded 4px, creating a slightly softened rectangle that feels modern yet professional—not playful, not austere. Cards and containers use rounded.md (12px) or rounded.lg (16px / 1rem) to distinguish them from the flat background. Form inputs default to rounded.DEFAULT (0.5rem / 8px) or 5px, matching the observed border-radius in computed styles (border-radius: 5px on input fields). Badges an

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses background: {colors.primary} (#80c342), text-color: white, padding: 10px 15px, height: 40px, border-radius: 4px, and typography: label-md (14px, weight 600). On hover, the background shifts to #6ca824 (a darker green, matching --awb-custom11 hover state), maintaining the green family while signaling state change. On focus, apply box-shadow: 0 0 0 3px rgba(128, 195, 66, 0.3) to indicate keyboard navigation without breaking the minimalist aesthetic. button-secondary uses a transparent background with a 1px border in primary green, allowing secondary actions (e.g., "Learn More") to coexist without visual dominance. Transition all color changes over 150ms for smooth, non-jarring feedback.

Containers & Sur

Do's and Don'ts

**Do**

• Do use primary green (#80c342) exclusively for CTAs, focus states, and key interactive elements—never dilute the brand accent with secondary colors on buttons.
• Do maintain 24px gutter spacing on all breakpoints to ensure consistent breathing room and prevent cramped layouts.
• Do apply Roboto at 16px minimum for body text and 14px for labels to ensure legibility, especially for Greek characters and ingredient lists.
• Do use box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) on cards to create subtle depth without introducing unnecessary visual noise.
• Do pair white backgrounds (#ffffff) with on-surface text (#333333) for maximum contrast and accessibility (WCAG AA compliant).

**Don't**

• Don't use rounded corners larger than 16px on cards or buttons—excessive rounding undermines the precision and trustworthiness the brand requires.
• Don't introduce new accent colors beyond the green family (#80c342, #65bc7b, #577810)—the dual-green system is intentional and brand-distinctive.
• Don't apply shadows larger than 0 4px 12px rgba(0, 0, 0, 0.15) on any component—heavy shadows conflict with the minimalist, clarity-focused aesthetic.
• Don't use letter-spacing tighter than -0.04em on display text or looser than 0.05em on labels—maintain the observed Roboto spacing to preserve readability.
• Don't place text directly on product images without a semi-transparent overlay or text-shadow—always ensure on-image text meets WCAG AA contrast ratios (4.5:1 minimum).