Files

Daniel Arantes Loverde 78daaf1927 Skip and docs

2026-02-04 08:42:32 -03:00

3.2 KiB

Raw Blame History

📦 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: "#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.

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

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

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
}

3. IMPLEMENTAÇÃO (TAILWIND-FIRST)

3.1 Tokens no Tailwind

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

3.2 KiB Raw Blame History