Nutryfit Logo

Nutryfit UI Kit

Official Brand Guidelines & Design System

1. Color Palette

Light Green (Brand Primary)
HEX: #5e8d4d
Tailwind: bg-light-green
Dark Green (Brand Dark)
HEX: #2a552a
Tailwind: bg-dark-green
Very Light Green (Brand Light)
HEX: #e9fdf2
Tailwind: bg-very-light-green

2. Typography

Primary Font: Google Sans

Used for all English text, headings, and UI elements. Clean, rounded, and approachable.

Heading 1 (700 Bold) - 2.5rem

Heading 2 (600 SemiBold) - 2rem

Body copy (400 Regular) - 1rem. Achieve your health goals with Nutryfit's personalized diet plans and free health tools like BMI and BMR calculators. Get 24/7 dietitian support for a balanced lifestyle.

3. Buttons & Components

Primary Button

<button class="bg-light-green hover:bg-dark-green text-white px-6 py-3 rounded-md transition duration-300">Get Started</button>

Secondary Button

<button class="bg-very-light-green hover:bg-[#d0f5e0] text-dark-green px-6 py-3 rounded-md transition duration-300">Learn More</button>

Outline Button

<button class="border-2 border-light-green hover:bg-light-green hover:text-white text-light-green px-6 py-3 rounded-md transition duration-300">Contact Us</button>

4. Form Elements

5. Interactive Elements

Toggles & Switches

Checkboxes & Radios

6. Layouts & Cards

Basic Card Component

This is a versatile card layout used for displaying summaries, user profiles, or dashboard widgets.

7. Modals

8. Nutryfit Logo Types

Downloadable versions of the Nutryfit logo in various formats and layouts. Click to download.

9. Assets Overview

When using the brand assets, please ensure sufficient contrast and empty space around the logo.