Skip and docs

2026-02-04 08:42:32 -03:00
commit 78daaf1927
114 changed files with 3326 additions and 0 deletions
--- a/pedifoods_system_design.md
+++ b/pedifoods_system_design.md
@@ -0,0 +1,224 @@
+# 📦 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
+
+```ts
+colors: {
+  primary: "#8CFF2E",       // ação principal, CTAs, destaque
+  secondary: "#388E3C",     // ações secundárias, títulos
+  backgroundLight: "#F7F8F5",
+  backgroundDark: "#18230F",
+  textPrimary: "#333333",
+  textInverse: "#FFFFFF"
+}
+```
+
+Uso:
+- Primary → botões principais, ícones ativos, ratings
+- Secondary → headers, botões secundários
+- BackgroundLight → fundo global
+- BackgroundDark → dark mode
+
+---
+
+### 1.2 🌙 Dark Theme
+
+Dark mode nativo, não invertido.
+
+```ts
+dark: {
+  background: "#18230F",
+  surface: "rgba(255,255,255,0.05)",
+  textPrimary: "#FFFFFF",
+  textSecondary: "#A3A3A3",
+  primary: "#8CFF2E",
+  secondary: "#388E3C"
+}
+```
+
+---
+
+### 1.3 🔤 Tipografia
+
+Fonte oficial:
+- **Plus Jakarta Sans**
+
+```ts
+typography: {
+  fontFamily: "'Plus Jakarta Sans', sans-serif",
+
+  heading1: {
+    size: "30px",
+    weight: 800
+  },
+
+  heading2: {
+    size: "22px",
+    weight: 800
+  },
+
+  body: {
+    size: "16px",
+    weight: 400,
+    lineHeight: "1.6"
+  },
+
+  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
+
+```ts
+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
+
+```ts
+Button {
+  variant: "primary" | "secondary"
+  fullWidth: boolean
+}
+```
+
+---
+
+### 2.2 🔍 Input & Search
+
+- Fundo claro
+- Ícone à esquerda
+- Sem borda
+- Focus ring em primary
+
+```ts
+SearchInput {
+  placeholder: string
+  icon: "search"
+}
+```
+
+---
+
+### 2.3 🃏 Food Card
+
+Contém:
+- Imagem hero
+- Botão de favorito flutuante
+- Nome
+- Rating
+- Tempo estimado
+
+```ts
+FoodCard {
+  title: string
+  image: string
+  rating: number
+  timeRange: string
+  favorite: boolean
+}
+```
+
+---
+
+### 2.4 🧭 Navigation Bar
+
+- Fixa no rodapé
+- Ícones Material Symbols
+- Item ativo em primary
+
+```ts
+TabBar {
+  items: TabItem[]
+  activeIndex: number
+}
+```
+
+---
+
+### 2.5 🧩 Ícones
+
+- Material Symbols Outlined
+- Peso visual leve
+- Cor semântica
+
+```ts
+Icon {
+  name: string
+  active?: boolean
+}
+```
+
+---
+
+## 3. IMPLEMENTAÇÃO (TAILWIND-FIRST)
+
+### 3.1 Tokens no Tailwind
+
+```ts
+theme.extend.colors = {
+  primary: "#8CFF2E",
+  secondary: "#388E3C",
+  backgroundLight: "#F7F8F5",
+  backgroundDark: "#18230F",
+  typographyDark: "#333333"
+}
+```
+
+---
+
+## 4. PRINCÍPIOS DO SISTEMA
+
+- Mobile-first
+- Tailwind-first
+- Dark mode por classe
+- Tokens semânticos
+- UI energética e saudável
+- Feedback visual imediato