Fueld Design System
A comprehensive design system built for Fueld's nutrition tracking platform, featuring carefully crafted color palettes, typography, and brand guidelines.
Brand Assets
Official Fueld logos, symbols, and brand elements
Primary Logos
Standard Logo (Dark)
Reversed Logo (Light)
Logo Symbol
Icon Symbol
Icon Symbol (Color)
Brand Elements
Colored pie chart elements for design applications
Green Pie
Midnight Green Pie
Orange Pie
Logo Usage Do's
✓ Best Practices
- • Maintain clear space equal to logo height
- • Use appropriate contrast ratios
- • Keep proportions intact when scaling
- • Use approved logo versions only
- • Ensure readability at all sizes
- • Choose appropriate background contrast
Logo Usage Don'ts
✗ Avoid These
- • Stretch, skew, or distort the logo
- • Change colors without brand approval
- • Use on busy or distracting backgrounds
- • Rotate or angle the logo
- • Add effects, shadows, or outlines
- • Use low-resolution or pixelated versions
Color Palettes
Complete color scales with different weights for consistent design implementation.
Primary - Fueld Green
Main brand color representing energy and growth
Green 50
#ECFFBE
Green 100
#DCFF8B
Green 200
#CDF157
Green 300
#BEF124
Fueld Green
#97D700
Green 600
#85BE00
Green 700
#61B000
Green 800
#3D5900
Green 900
#243300
Secondary - Midnight Green
Professional and modern supporting brand color
Midnight 50
#F0F9FA
Midnight 100
#CCE7EA
Midnight 200
#99CFD5
Midnight 300
#66B7C0
Midnight Green
#124C5A
Midnight 600
#0F3E48
Midnight 700
#0C3036
Midnight 800
#092224
Midnight 900
#061412
Tertiary - Fueld Orange
Accent color for highlights and calls-to-action
Orange 100
#FECBAE
Orange 200
#FDAB7C
Orange 300
#FD8B4A
Orange 400
#FC6B17
Fueld Orange
#F75C03
Orange 600
#DE5303
Orange 700
#AB4002
Orange 800
#792D01
Orange 900
#471A01
Additional Colors
Font colors and meal category colors for data visualization
Gunmetal (Font)
#0A2E36
Breakfast Blue
#0097D7
Lunch Teal
#00D7AC
Dinner Gold
#D7AC00
Snacks Purple
#D70097
Typography
Consistent typographic hierarchy for all interfaces
Display Large (4xl-6xl, Bold)
Fueld Display Heading
Heading 1 (3xl-5xl, Bold)
Primary Page Heading
Heading 2 (2xl, Semibold)
Section Heading
Heading 3 (xl, Medium)
Subsection Heading
Body Large (lg)
Large body text for emphasis and readability.
Body Regular (base)
The quick brown fox jumps over the lazy dog
Body Small (sm)
Smaller body text for secondary information.
Caption (xs)
Caption text for fine print and labels.
Spacing & Layout
Consistent spacing system for harmonious layouts and visual rhythm
Spacing Scale
Standard spacing units for consistent layouts
xs
0.25rem (4px)
sm
0.5rem (8px)
md
1rem (16px)
lg
1.5rem (24px)
xl
2rem (32px)
2xl
3rem (48px)
3xl
4rem (64px)
4xl
6rem (96px)
Border Radius
Rounded corner system for modern interfaces
none
0
sm
0.125rem (2px)
md
0.375rem (6px)
lg
0.5rem (8px)
xl
0.75rem (12px)
2xl
1rem (16px)
3xl
1.5rem (24px)
full
9999px
Layout Guidelines
Common spacing patterns for components and layouts
Card Spacing
Padding: 1.5rem (24px)
Button Spacing
Gap: 0.75rem (12px)
Section Spacing
Between sections: 3rem (48px)
Design Principles
Core principles guiding Fueld's design decisions
Clarity
Every design decision prioritizes user understanding and removes unnecessary complexity.
Efficiency
Streamlined workflows and intuitive interfaces help users achieve their nutrition goals faster.
Growth
Our design language evolves with user needs while maintaining consistency and trust.