BANT – British Association for Nutrition and Lifestyle Medicine

Overview

BANT is a professional healthcare authority dedicated to evidence-based nutritional therapy and lifestyle medicine. The brand serves registered nutritional therapists, healthcare practitioners, and individuals seeking personalized, science-backed wellness solutions. The design system embodies 'Accessible Professionalism'—a visual language that balances clinical credibility with warm, approachable humanity. The UI conveys precision and care through a vibrant tri-color accent system (purple #572b73 for authority, blue #1d619f for trust, orange #ea862c for vitality) layered over clean white surfaces and generous whitespace. The emotional response is one of competence paired with compassion: users feel they are in expert hands, yet the interface never intimidates.

The brand voice is authoritative yet conversational, scientific yet accessible. BANT speaks in clear, jargon-light language that educates without condescending. Tone markers include precision (exact percentages, specific nutrient names), optimism ("personalized science-based programmes that fit your lifestyle"), and inclusivity ("You are unique!"). Example sentence in brand voice: "Your nutritional therapist will design a programme tailored to your body's unique needs—not a one-size-fits-all approach."

Colors

The color system is built on three strategic accent roles layered over a neutral white foundation. Primary (Purple #572b73) is the brand's signature authority color, used on key CTAs ("Join BANT"), navigation highlights, and interactive focus states. It conveys professionalism and medical credibility. Secondary (Orange #ea862c) is the vitality accent, deployed on secondary CTAs ("Contact"), badges, and accent elements to inject warmth and approachability—it signals action and energy without overwhelming. Tertiary (Blue #1d619f) is the trust anchor, used for informational elements, dividers, and supporting text to reinforce clinical reliability and calm. Surface colors range from pure white (#ffffff) for primary content areas to light grays (#f2f2f2, #e6e6e6) for container separation and su

Typography

The type system pairs three Google Fonts families to create a hierarchy that feels both professional and human. Raleway (weights 600–700) anchors headlines and display text, delivering geometric precision and modern authority—used at 40px for headline-lg and 60px for display contexts. Dosis (weight 600) handles title-lg at 24px, providing a distinctive mid-weight bridge between formal headlines and body copy. Nunito Sans (weights 400–700) carries all body and label text, offering exceptional readability at small sizes (14px label-md, 16px body-md) with generous 24px line-height for accessibility. Letter-spacing is calibrated per role: headlines use -0.02em to -0.04em for tightness and impact, body text uses 0.01em–0.02em for clarity, and labels use 0.04em–0.05em for visual separation. Appl

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered on the viewport. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. The gutter is consistently 24px on desktop, reducing to 12px on tablets and 8px on mobile. Container padding uses the gutter value to maintain rhythm. White-space is generous—sections breathe with 40px–64px vertical separation, and cards maintain 24px internal padding to prevent visual clutter. The hero section spans full-width with a 1200px content container, allowing background imagery to extend edge-to-edge while text remains readable within the container. Sidebar layouts (e.g., mem

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle color shifts rather than dramatic layering. Level 1 (Base): white background (#ffffff) with no shadow, representing the primary content plane. Level 2 (Cards & Containers): 1px solid border in #cccccc with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating a soft lift. Level 3 (Modals & Overlays): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with a slightly darker border, signaling prominence. Level 4 (Floating Elements): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) for maximum separation (e.g., sticky CTAs, floating action buttons)

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften clinical precision without sacrificing professional credibility. Buttons use 1rem (16px) border-radius for a modern, approachable feel that's neither sharp nor overly rounded. Cards and containers use 1.5rem (24px) for a more generous curve that signals openness and care. Input fields and small UI elements use 0.5rem (8px) for subtle softness that doesn't distract. The full-radius (9999px) is reserved exclusively for badges and pill-shaped elements to create visual distinction. The anchor/handbook navigat

Components

Action Elements Buttons are the primary interaction mechanism and come in three role-based variants. Primary buttons (background: #572b73, text: white, height: 44px, padding: 10px 24px, border-radius: 16px) are reserved for high-intent CTAs like "Join BANT" and membership sign-ups. On hover, the background shifts to #d4d4d4 (primary-fixed-dim) with a 250ms ease-in transition to signal state change. Secondary buttons (background: #ea862c, text: white) are used for supporting actions like "Contact" or "Learn More"; they maintain the same height and padding but use the orange accent to differentiate priority. Tertiary buttons (background: #1d619f, text: white) support informational flows and navigation. All buttons disable with opacity: 0.5 and cursor: not-allowed. Focus states apply a 2p

Do's and Don'ts

**Do**

• Do use purple (#572b73) exclusively for primary CTAs and high-intent interactions—it is the brand's signature authority color and must not be diluted across secondary elements.
• Do maintain 24px padding inside cards and containers to prevent visual cramping; generous internal whitespace signals care and professionalism.
• Do apply the 250ms ease-in transition to all interactive state changes (hover, focus, active) to telegraph interactivity without jarring the user.
• Do use Raleway 600–700 for all headlines and Nunito Sans 400 for body text; this pairing is the brand's typographic identity and must remain consistent.
• Do layer text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on small labels over photographic backgrounds to ensure WCAG AA contrast compliance (4.5:1 minimum).
• Do respect the 1200px container max-width on desktop; content that exceeds this width becomes difficult to scan and dilutes focus.

**Don't**

• Don't use purple, blue, or orange as surface or background colors—they are accent roles only. Backgrounds must remain white (#ffffff) or light gray (#f2f2f2–#e6e6e6).
• Don't apply border-radius greater than 24px to cards or containers; the 'Soft-Technical' philosophy requires restraint to maintain professional credibility.
• Don't mix font families within a single text block; Raleway is for headlines, Nunito Sans for body, Dosis for titles. Mixing creates visual noise.
• Don't use box-shadow values greater than 0 16px 40px rgba(0, 0, 0, 0.12); deeper shadows create visual hierarchy confusion and flatten the intentional elevation system.
• Don't reduce padding below 12px (sm spacing) on interactive elements; buttons, inputs, and cards require minimum breathing room for touch targets and readability.
• Don't apply opacity: 0.5 to disabled buttons without also setting cursor: not-allowed; users must understand the element is non-interactive.