README-DESIGNS.md

🎨 Food Remedy Design Documentation

This document explains the design rules and standards for Food Remedy.
It also explains how team leaders should manage and save design files.

📚 Table of Contents

• 📁 Where Designs Are Stored
• 👩‍💼 Leader Responsibilities
• 📐 Design Standards and Practices

📁 Where Designs Are Stored

This folder contains local copies of Food Remedy designs made in Figma.
Everyone in the project needs access to the Figma files:

• The design team uses them to create and update designs.
• The frontend team uses them to check fonts, colours, and other parameters.
• The backend team uses them to infer project requirements.
• The research team uses them to gauge current technical understanding of the project.

Everyone should be editors, specically frontend and design teams, as only editors can see detailed settings in Figma (like typography and colour values). That’s why saving local copies is very important to keep everyting backed up as anyone can edit the designs.

👩‍💼 Leader Responsibilities

Leaders are responsible for saving and organising design files.

• Save a local copy every 2–4 weeks, or after major updates.
• Place files in the correct trimester folder.
• Use this file name format so files appear in order:
  Figma - Food Remedy [yyyy-mm-dd]

This process ensures designs are always safe and easy to find.

📐 Design Standards and Practices

All designs must follow the Food Remedy style rules, unless a new design idea is approved.

Typography

• Base font: Inter
• Base font size: 16px
• Titles: Bold
• Subtitles: Semi-bold / Medium bold
• Use bold text only when needed

Colours (HSL format)

👉 HSL = Hue, Saturation, Lightness

• Full black: hsl(0, 0%, 0%)
• Less important text:
  • hsl(0, 0%, 20%)
  • hsl(0, 0%, 30%)
  • Sometimes hsl(0, 0%, 50%)

Icons

• Use Google Icons
• Icon colour: hsl(0, 0%, 20%) or hsl(0, 0%, 30%)

Backgrounds

• Standard screen background: hsl(0, 0%, 95%)

Brand Colour

• Food Remedy brand red: #FF3D3D