FuelStackDesign System v1.0
Back to Landing Page
overview

Design Overview

FuelStack's design language: high energy, high contrast, data-forward, and friendly.

High Energy, High Contrast

Lime Green (#CCF32F) used sparingly but boldly against stark White or Deep Zinc backgrounds to guide user attention to key actions and data.

Rounded & Friendly

Heavy border radiuses (rounded-3xl, rounded-full) make the data-heavy subject of nutrition tracking feel accessible and approachable.

Data Clarity First

Typography is legible. High contrast for data points (calories, macros). Progress rings, bars, and sparklines communicate at a glance.

Platform Coverage

Marketing Website

Next.js + Tailwind CSS. Light mode primary. Manrope headings, Inter body. Responsive from 320px to 1440px+. Grid backgrounds, lime glow effects, pill-shaped CTAs.

Mobile App (iOS + Android)

Expo React Native + NativeWind. Dark mode primary. Inter throughout (SF Pro system fallback). 5-tab navigation with FAB. Surface-layered card hierarchy.

colors

Color Palette

A strict 5-color system with semantic macro colors. Lime is the brand accent -- used sparingly but with maximum impact.

Core Brand Colors

Lime (Primary)

#CCF32F

--primary / bg-lime

Lime Dark

#B1D618

--lime-dark

Zinc (Secondary)

#18181B

--secondary

White (Background)

#FFFFFF

--background

Surface

#F4F4F5

--surface / --card

Border

#E4E4E7

--border

Macro & Data Colors

Protein (Cyan)

#00B4D8

--chart-2

Carbs (Amber)

#FFB703

--chart-3

Fat (Coral)

#E63946

--chart-4 / --destructive

Success (Mint)

#06D6A0

--chart-5

Mobile App (Dark Mode) Surfaces

Background

#0D0D0F

Surface

#1A1A1E

Surface Elevated

#252529

Device Frame

#2A2A2E

Color Usage Rules

  • Lime is reserved for CTAs, active states, highlights, and data accents. Never use it for large background fills.
  • Macro colors (Cyan/Amber/Coral) are fixed and must always represent Protein/Carbs/Fat respectively. Never swap them.
  • Use adherence-neutral tones. No shaming red/green for missed targets -- use the spectrum of warm-to-cool colors.
  • In the mobile app, always use the 3-tier surface hierarchy: Background > Surface > Surface Elevated.
typography

Typography

Two font families: Manrope for headings (bold, geometric) and Inter for body text (clean, legible).

Display Font

Manrope

Weights: 500, 600, 700, 800

font-serif (via --font-serif Tailwind token)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

Body Font

Inter

Weights: 300, 400, 500, 600

font-sans (via --font-sans Tailwind token)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

Type Scale

LevelClassesSampleContext
H1 Herotext-5xl md:text-7xl font-extrabold tracking-tightTrack Smarter.Website hero
H2 Sectiontext-4xl md:text-5xl font-boldFuel your goalsWebsite sections
H3 Cardtext-xl font-boldAI Meal PlannerFeature cards
App Titletext-[20px] font-boldGood morning, RuanMobile screen headers
App Data Largetext-[28px] font-bold tabular-nums1,847Calorie ring center
Captiontext-xs font-bold uppercase tracking-widerOUR FEATURESSection labels, badges

Mobile App Typography Notes

  • Use tabular-nums for all numerical data (calories, macros, weights) to ensure alignment.
  • Minimum font size in the app is 9px (used only for tertiary labels). Body text minimum is 12px.
  • Data labels use white/40 opacity. Secondary text uses white/50-60. Primary text uses full white.
spacing

Spacing & Border Radius

Consistent spacing scale and generous radius system that creates the signature friendly feel.

Border Radius Scale

rounded-xl

0.75rem

Inner elements, chips

rounded-2xl

1rem

App cards, inputs

rounded-3xl

1.5rem

Main cards, sections

rounded-[3rem]

3rem

Phone frame outer

rounded-full

9999px

Buttons, badges, pills

Spacing Scale

Website Spacing

py-24 -- Section vertical padding (6rem)

gap-6 -- Card grid gap (1.5rem)

gap-8 -- Major grid gap (2rem)

p-8 md:p-10 -- Card padding

mb-16 -- Section header to content

max-w-7xl -- Content max width (80rem)

Mobile App Spacing

px-5 -- Screen horizontal padding (1.25rem)

gap-3 -- Card list gap (0.75rem)

p-3.5 / p-4 -- Card internal padding

mb-4 -- Between card sections (1rem)

gap-2.5 -- Tight list items

pb-6 -- Bottom tab safe area

shadows

Shadows & Effects

Subtle elevation and the signature lime glow effect for premium cards and CTAs.

shadow-xl

Standard elevation for cards on hover and dropdowns.

className: shadow-xl

Lime Glow

Signature effect for the premium pricing card, primary CTAs, and the phone frame ambient glow.

className: lime-shadow

Lime Tint Shadow

Subtle lime-tinted shadow for buttons and interactive elements.

shadow-lg shadow-lime/20

Decorative Patterns

grid-bg pattern
Gradient blob
icons

Iconography

Lucide React for all icons. Consistent 2px stroke weight, wrapped in rounded containers.

Barcode

Food scanning

Brain

AI features

Sparkles

AI coach, AI generate

Calendar

Meal plans

Bell

Reminders

Trending

Progress

Utensils

Food swaps

Flame

Streaks

Search

Food search

Camera

Photo logging

Mic

Voice / NL input

Swap

Food swap button

Icon Container Styles

14x14 / rounded-2xlWebsite features
10x10 / rounded-xlApp widgets
8x8 / rounded-xlApp stat cards
9x9 / rounded-fullApp header accent
buttons

Buttons

Three button styles: Primary (Lime), Secondary (Zinc), and Text Link. All use pill shape (rounded-full).

Website Buttons

Text Link

Mobile App Buttons

Icon buttons at various sizes
Primary Button
<button className="bg-lime text-secondary px-8 py-4 rounded-full font-bold text-lg hover:bg-lime-dark transition-all shadow-xl shadow-lime/20">
  Get Started Free
</button>
cards

Cards

Two card systems: light website cards with hover elevation, and dark-surface mobile app cards.

Website Feature Card

AI Meal Planner

Tell us your goals, dietary preferences, and cooking time. Our AI generates a complete weekly meal plan.

Card Anatomy

  • bg-background -- white background
  • border border-border -- subtle gray border
  • p-8 rounded-3xl -- generous padding + radius
  • hover:shadow-xl hover:border-lime/30 -- hover effect
  • group-hover -- icon container reacts to card hover

Mobile App Card Hierarchy

Surface Card

bg-[#1A1A1E] rounded-[1.5rem]

Main content containers

Nested Element

bg-[#252529]/60 rounded-xl

List items inside cards

Accent Card

bg-lime/10 border-lime/20

AI features, insights

badges

Badges & Tags

Pill-shaped labels for section identification, status indicators, and quick metadata.

AI-Powered NutritionOur FeaturesMost Popular

Mobile App Status Dots

Logged
Upcoming
Planned
20Count badge
forms

Form Elements

Search bars, input fields, toggles, and interactive chips used across the app.

Mobile Search Bar

Search foods...

Mobile Toggle

Chat Input

Ask your AI coach...

Meal Selector Dropdown

Logging to:
data viz

Data Visualization

Progress rings, macro bars, charts, and data display patterns that make nutritional data instantly readable.

Calorie Progress Ring

1,847of 2,400 cal

Outer = total cals, Inner = P/C/F segments

Macro Progress Bars

Protein
128g / 180g
Carbs
186g / 240g
Fat
58g / 80g

8px height, rounded-full, color-coded by macro

Stat Card Pattern

-0.9 kg

This week

86%

Adherence

5 / 7

Days on target

layout web

Web Layout Patterns

Section-based page structure with alternating backgrounds, consistent container widths, and responsive grid patterns.

Page Structure

1Navbarbg-background/80 backdrop-blurFixed, h-16
2Herobg-background + grid-bgpt-32/48, pb-24/32
3Featuresbg-card (Surface)py-24, 3-col grid
4How It Worksbg-background (White)py-24, 4-col grid
5App Previewbg-secondary (Dark)py-24, phone mockup
6Pricingbg-background (White)py-24, 2-col grid
7CTAbg-secondary (Dark)py-24, centered
8Footerbg-card (Surface)py-16, 4-col grid

Grid Patterns

Feature Grid

grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

Pricing Grid

grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl

Stats Row

grid-cols-2 md:grid-cols-4 gap-8 md:gap-16

layout app

App Layout Patterns

Screen-level composition patterns used across all 5 mobile app screens.

Dashboard

Greeting header > Calorie ring card > Stat widgets (2-col) > Meal timeline card > Quick action row

Vertical scroll, no tabs within screen

Food Logging

Title + meal selector > Search bar with inline icons > AI hint card > Quick action chips (horizontal scroll) > Recent foods list > Remaining budget bar

Focus on speed -- search bar is prominent

Meal Plan

Title + AI generate button > Week strip (horizontal) > Day summary bar > Training/Rest toggle > Meal cards with nested food items + swap buttons

Cards contain nested lists with inline actions

AI Coach

Header with avatar + usage counter > Disclaimer banner > Chat messages (flex-col, role-based alignment) > Quick prompt chips > Input bar

flex-col h-full with flex-1 overflow chat area

Progress

Title > 3-col stat cards > Weight trend SVG chart > Calorie bar chart > AI weekly insight card

Custom SVG charts, not a charting library

Common Screen Template

<div className="px-5 pb-4">
  {/* Header: pt-2 pb-3/4 */}
  {/* Content cards: gap-4, 
      rounded-[1.5rem] or 
      rounded-2xl */}
  {/* Each card: bg-[#1A1A1E] 
      p-3.5/4 border-white/5 */}
</div>
dark mode

Dark Mode Strategy

Website defaults to light with dark support. Mobile app is dark-mode first. Tokens handle the switch automatically.

Website (Light Mode)

Background: #FFFFFF

Text: #18181B

Surface/Card: #F4F4F5

Borders: #E4E4E7

Dark sections: #18181B

App Preview, CTA, Footer

Mobile App (Dark Mode)

Background: #0D0D0F

Text: #F5F5F5

Surface: #1A1A1E

Card backgrounds

Elevated: #252529

Nested elements, buttons

Switching Rules

  • bg-background maps to #FFFFFF (light) or #09090B (dark)
  • bg-card maps to #F4F4F5 (light) or #18181B (dark)
  • Lime (#CCF32F) stays identical in both modes -- it is theme-independent
  • Macro colors (Cyan, Amber, Coral, Mint) are also theme-independent -- they never change
  • Text opacity layers: Primary (100%), Secondary (60-80%), Tertiary (40-50%), Disabled (20-30%)
responsive

Responsive Design

Mobile-first approach. Primary breakpoint at md (768px) for all major layout shifts.

Element< 768px (Mobile)768px+ (Desktop)
NavigationHamburger + dropdown drawerInline links + CTA button
Hero H1text-5xltext-7xl
Feature Gridgrid-cols-1grid-cols-2 lg:grid-cols-3
Stats Rowgrid-cols-2 gap-8grid-cols-4 gap-16
Pricing Cardsgrid-cols-1 (stacked)grid-cols-2 max-w-4xl
Section Paddingpt-32 pb-24pt-48 pb-32
Touch TargetsMin 44px height (py-3/4)Standard sizing
motion

Motion & Animation

Subtle, functional animations that enhance data feedback and interface delight.

Website Animations

  • transition-all duration-300 -- Card hover effects
  • transition-colors -- Button hover states
  • hover:shadow-xl -- Elevation on hover
  • hover:border-lime/30 -- Accent border on hover

Mobile App Animations

  • transition-all duration-1000 -- Progress ring fill
  • transition-all duration-700 -- Macro bar fill
  • Lottie animations for milestone celebrations (streak, goal hit)
  • react-native-reanimated for spring physics on interactive elements
accessibility

Accessibility

WCAG 2.1 AA compliant. Proper labels, contrast ratios, screen reader support, and touch targets.

Standards & Targets

  • WCAG 2.1 AA compliance target
  • Minimum touch target: 44x44px
  • Color contrast ratio: 4.5:1 minimum for text
  • Never rely on color alone to convey information
  • Semantic HTML: main, header, nav, section

Implementation Patterns

  • aria-label on all icon-only buttons
  • sr-only class for screen reader text
  • tabular-nums for data alignment
  • text-balance / text-pretty for readability
  • Adherence-neutral messaging (no shaming language)

Key Contrast Pairs

Lime + Zinc
CTAs, active states
Zinc + White
Secondary buttons
Dark + White
App primary text
Surface + Lime
App accent text