Skip to content

DESIGN.md

Latest commit

 

History

History
283 lines (243 loc) · 8.31 KB

DESIGN.md

File metadata and controls

283 lines (243 loc) · 8.31 KB
version alpha
name Foodiary (Neubrutalist)
description A bold, playful calorie tracker with personality. Neubrutalist foundation — hard black borders, thick offset shadows, vibrant flat colors. Gen-Z energy meets food warmth. No gradients, no blur, just confidence.
colors
primary secondary accent background foreground card cardForeground muted mutedForeground border destructive positive warning ring
#FF6B4A
#2DD4BF
#FFD60A
#FAFAF5
#1A1A1A
#FFFFFF
#1A1A1A
#F5F2ED
#6B6560
#1A1A1A
#1A1A1A
#2DD4BF
#FFD60A
#FF6B4A
typography
display title body-lg body body-sm caption label
fontFamily fontSize fontWeight lineHeight letterSpacing
Space Grotesk
2.5rem
700
1.1
-0.03em
fontFamily fontSize fontWeight lineHeight letterSpacing
Space Grotesk
1.375rem
700
1.2
-0.01em
fontFamily fontSize fontWeight lineHeight
Plus Jakarta Sans
1.0625rem
500
1.5
fontFamily fontSize fontWeight lineHeight
Plus Jakarta Sans
0.9375rem
400
1.5
fontFamily fontSize fontWeight lineHeight
Plus Jakarta Sans
0.8125rem
400
1.5
fontFamily fontSize fontWeight lineHeight letterSpacing
Plus Jakarta Sans
0.75rem
600
1.4
0.03em
fontFamily fontSize fontWeight lineHeight letterSpacing
Space Grotesk
0.75rem
700
1.4
0.05em
rounded
sm md lg xl full
8px
12px
16px
20px
9999px
spacing
xs sm md lg xl 2xl 3xl
4px
8px
12px
16px
24px
32px
48px
elevation
card floating
shadowColor shadowOffset shadowRadius
#1A1A1A
4px 4px 0
0px
shadowColor shadowOffset shadowRadius
#1A1A1A
6px 6px 0
0px
components
button-primary button-primary-hover button-secondary button-destructive card-summary card-meal input-field tab-bar tag-calorie status-under status-over segmented-control
backgroundColor textColor borderColor borderWidth rounded padding typography shadowColor shadowOffset
{colors.primary}
#FFFFFF
{colors.foreground}
3px
{rounded.md}
14px
{typography.body-lg}
{colors.foreground}
4px 4px 0
backgroundColor shadowOffset
#E55A3A
2px 2px 0
backgroundColor textColor borderColor borderWidth rounded padding shadowColor shadowOffset
{colors.card}
{colors.foreground}
{colors.foreground}
3px
{rounded.md}
14px
{colors.foreground}
4px 4px 0
backgroundColor textColor rounded padding shadowColor shadowOffset
{colors.foreground}
#FFFFFF
{rounded.md}
14px
{colors.foreground}
4px 4px 0
backgroundColor borderColor borderWidth rounded padding shadowColor shadowOffset
{colors.card}
{colors.foreground}
3px
{rounded.xl}
20px
{colors.foreground}
4px 4px 0
backgroundColor borderColor borderWidth rounded padding shadowColor shadowOffset
{colors.card}
{colors.foreground}
3px
{rounded.lg}
16px
{colors.foreground}
3px 3px 0
backgroundColor textColor borderColor borderWidth rounded padding typography
{colors.card}
{colors.foreground}
{colors.foreground}
3px
{rounded.md}
12px
{typography.body}
backgroundColor borderTopColor borderTopWidth
{colors.card}
{colors.foreground}
3px
backgroundColor textColor borderColor borderWidth rounded padding
{colors.muted}
{colors.foreground}
{colors.foreground}
2px
{rounded.full}
6px
backgroundColor textColor borderColor borderWidth rounded padding
#D1FAE5
#065F46
{colors.foreground}
2px
{rounded.full}
6px
backgroundColor textColor borderColor borderWidth rounded padding
#FEE2E2
#991B1B
{colors.foreground}
2px
{rounded.full}
6px
backgroundColor borderColor borderWidth rounded
{colors.muted}
{colors.foreground}
3px
{rounded.md}

Overview

Foodiary v2 embraces neubrutalism — the design language of Gen-Z. Bold, confident, and playful. Every element has a hard black border and a thick offset shadow. Colors are vibrant and flat — no gradients, no blur, no half-measures. The personality is warm and food-friendly (coral primary, mint secondary, sunny yellow accents) while the structure is unapologetically bold.

This is NOT your mom's calorie tracker.

Colors

  • Primary (#FF6B4A): Bold coral — energetic, warm, food-associated. Primary buttons, selected states, key metrics.
  • Secondary (#2DD4BF): Fresh mint — healthy, crisp, under-target indicator. Calorie progress bars.
  • Accent (#FFD60A): Sunny yellow — happy, breakfast energy. Attention states, highlights.
  • Background (#FAFAF5): Warm off-white — soft backdrop that lets cards pop.
  • Foreground (#1A1A1A): Hard black — borders, text, shadows. Maximum contrast, zero apology.
  • Card (#FFFFFF): Pure white — content surface with black border and shadow.
  • Muted (#F5F2ED): Warm gray — secondary backgrounds, tags, disabled states.
  • Muted Foreground (#6B6560): Warm gray text — secondary information.
  • Border (#1A1A1A): Hard black — every element has a 2-3px solid border. Non-negotiable.
  • Destructive (#1A1A1A): Black — delete actions. Bold, not red-alarm scary.
  • Positive (#2DD4BF): Mint — under target, good states.
  • Warning (#FFD60A): Yellow — near target, attention.

Typography

Space Grotesk for everything bold — headings, labels, metrics, buttons. Plus Jakarta Sans for body text — readable at small sizes.

  • Display: Space Grotesk Bold, 40px, tight leading. Hero numbers.
  • Title: Space Grotesk Bold, 22px. Screen titles, card headers.
  • Labels: Space Grotesk Bold, 12px, ALL CAPS, letter-spacing 0.05em. Section headers, badges.
  • Body: Plus Jakarta Sans, 15px. All paragraphs and descriptions.
  • Caption: Plus Jakarta Sans SemiBold, 12px. Metadata, timestamps.

Rule: Space Grotesk is never used below 700 weight. No light, no regular. Bold or nothing. On iOS, SF Pro Rounded Bold is the system fallback.

Shapes

  • Cards: 16-20px radius with 3px black border + 4px 4px 0 black shadow
  • Buttons: 12px radius with 3px black border + 4px 4px 0 black shadow
  • Input fields: 12px radius with 3px black border
  • Tags/badges: Fully rounded pills with 2px border
  • No border-radius 0 — we're neubrutalist, not brutalist. Soft edges keep it friendly.

Components

button-primary

Coral background, white bold text, 3px black border, 4px offset shadow. On press: shadow shrinks to 2px (feels like it's being pushed).

button-secondary

White background, black bold text, 3px black border, 4px offset shadow. For cancel, back, secondary actions.

card

White background, 3px black border, 4px offset shadow. Every card. Cards are the core container — not subtle, not blending in.

input-field

White background, 3px black border. Label above in Space Grotesk Bold ALL CAPS. Focus: border turns coral (keeps 3px width).

status-badge

Pill shape with 2px black border. Green bg for under, red-tinted for over. Always includes the black border — neubrutalist rules apply everywhere.

tab-bar

White background, 3px black top border. Active tab: coral text + black underline. Inactive: muted gray. Space Grotesk Bold labels (10px).

Layout

Single column, 16px horizontal padding. Generous vertical spacing (24-32px between sections). Cards stack with clear separation — each one is a distinct "block" thanks to shadows.

Do's and Don'ts

Do

  • ✅ Hard black borders on every interactive element — no exceptions
  • ✅ Offset shadows (4px 4px 0) on cards and buttons
  • ✅ Space Grotesk Bold for ALL headings, labels, metrics
  • ✅ Flat vibrant colors — coral, mint, yellow, white, black
  • ✅ Neutral, non-judgmental language
  • ✅ Push-in animation on button press (shadow shrinks)
  • ✅ ALL CAPS labels with letter-spacing

Don't

  • ❌ No gradients — ever
  • ❌ No blur effects — we're not glassmorphism
  • ❌ No light shadows — go hard or go home
  • ❌ No thin borders — 2px minimum, 3px standard
  • ❌ No muted, safe color palette
  • ❌ Never shame the user
  • ❌ No emojis as structural icons (use bold SVG/SF Symbols)