📦 Design System — Green Food Delivery App

Este documento define o design system oficial do webapp de food delivery, baseado em uma identidade visual fresh, health-focused e energética, com forte uso de verde neon e contrastes suaves.

Este arquivo deve ser usado como prompt base canônico para qualquer IA, designer ou desenvolvedor.

1. FUNDAMENTOS VISUAIS

1.1 🎨 Paleta de Cores

Cores Principais

colors: {
  primary: "#388E3C",       // ação principal, CTAs, destaque
  backgroundLight: "#F7F8F5",
  backgroundDark: "#18230F",
  textPrimary: "#FFFFFF",
  textInverse: "#333333"
}

Uso:

Primary → botões principais, ícones ativos, ratings
Secondary → headers, botões secundários
BackgroundLight → fundo global
BackgroundDark → dark mode

1.3 🔤 Tipografia

Fonte oficial:

Plus Jakarta Sans

typography: {
  fontFamily: "'Plus Jakarta Sans', sans-serif",

  heading1: {
    size: "30px",
    weight: 800
  },

  heading2: {
    size: "22px",
    weight: 800
  },

  body: {
    size: "16px",
    weight: 400,
    lineHeight: "0"
  },

  button: {
    size: "14px",
    weight: 800,
    transform: "uppercase",
    letterSpacing: "0.08em"
  },

  caption: {
    size: "10px",
    weight: 700,
    letterSpacing: "0.12em"
  }
}

1.4 📐 Bordas, Espaçamento e Elevação

radius: {
  md: "0.75rem",
  lg: "1rem",
  xl: "1.5rem",
  full: "9999px"
}

spacing: [4, 8, 12, 16, 24, 32]

shadow: {
  soft: "0 4px 20px -2px rgba(0,0,0,0.05)",
  glow: "0 8px 24px rgba(140,255,46,0.2)"
}

2. COMPONENTES

2.1 🔘 Botões

Primary Action Button

Fundo: primary
Texto: secondary
Altura: 56px
Radius: lg
Sombra glow
Feedback de escala

Button {
  variant: "primary" | "secondary"
  fullWidth: boolean
}

2.2 🔍 Input & Search

Fundo claro
Ícone à esquerda
Sem borda
Focus ring em primary

SearchInput {
  placeholder: string
  icon: "search"
}

2.3 🃏 Food Card

Contém:

Imagem hero
Botão de favorito flutuante
Nome
Rating
Tempo estimado

FoodCard {
  title: string
  image: string
  rating: number
  timeRange: string
  favorite: boolean
}

Fixa no rodapé
Ícones Material Symbols
Item ativo em primary

TabBar {
  items: TabItem[]
  activeIndex: number
}

2.5 🧩 Ícones

Material Symbols Outlined
Peso visual leve
Cor semântica

Icon {
  name: string
  active?: boolean
}

2.5 KiB Raw Blame History