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
Confirm Action
Are you sure you want to proceed with this action? This cannot be undone.
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.
- Logo: Available in SVG format. Preferred usage on white or very-light-green backgrounds.
- Brochure: Available in PDF format for print and digital distribution.