NODO Dark Kitchens ParaguayPrimera red de cocinas fantasma en Paraguay+595-XXX-XXXXXinfo@nododk.com
Mariano Roque AlonsoCentralParaguay

Guía de Diseño - NODO Dark Kitchens

1. Identidad de Marca

Logotipos

NODO Logo

Logo Principal - nodo.png

NODO Logo 2

Logo Alternativo - nodo2.png

NODO Logo 22

Logo Variante - nodo22.png

Tipografía de Marca

NODO

Fuente: Futura, Avenir Next, Helvetica Neue
Peso: 850 (Extra Bold)
Espaciado: 0.05em
Uso: Logo y títulos principales

Concepto de Marca

Tagline: "Donde todo converge"
Propuesta: "Tu cocina lista en 2 semanas"
Sector: Dark Kitchens / Cloud Kitchens
Ubicación: Paraguay

2. Paleta de Colores

Colores Principales

Negro
#000000

Orange 500
#f97316
oklch(0.6 0.2 45)

Orange Accent
oklch(0.728 0.17 50)

Blanco
#ffffff
oklch(1 0 0)

Escala de Naranjas

50
#fff7ed

100
#ffedd5

200
#fed7aa

300
#fdba74

400
#fb923c

500
#f97316

600
#ea580c

700
#c2410c

800
#9a3412

Escala de Grises

50
#f9fafb

100
#f3f4f6

200
#e5e7eb

300
#d1d5db

400
#9ca3af

500
#6b7280

600
#4b5563

700
#374151

800
#1f2937

900
#111827

3. Sistema Tipográfico

Inter - Texto Principal

Inter Bold - Títulos
Inter Semibold - Subtítulos
Inter Medium - Navegación
Inter Regular - Texto de párrafo
Inter Light - Texto secundario

Uso: Navegación, párrafos, textos generales
Pesos: 300 (Light), 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)

Space Grotesk - Display

Space Grotesk Bold
Space Grotesk Semibold
Space Grotesk Medium

Uso: Títulos grandes, headlines, elementos destacados
Características: Letter-spacing: -0.02em
Pesos: 500 (Medium), 600 (Semibold), 700 (Bold)

JetBrains Mono - Accent

[JetBrains Mono Semibold]
> JetBrains Mono Medium
JetBrains Mono Regular

Uso: Elementos técnicos, códigos, etiquetas especiales
Características: Letter-spacing: 0.1em, Monospace
Pesos: 400 (Regular), 500 (Medium), 600 (Semibold)

Futura/Avenir - Marca

NODO

Uso: Exclusivamente para el logotipo
Fallbacks: Futura → Avenir Next → Helvetica Neue → sans-serif
Características: Font-weight: 850, Letter-spacing: 0.05em

Jerarquía Tipográfica

H1 - 6xl Bold
H2 - 5xl Bold
H3 - 3xl Semibold
H4 - 2xl Semibold
H5 - xl Medium
H6 - lg Medium
Párrafo - base Regular
Texto pequeño - sm Muted

4. Componentes UI

Botones

Características:
• Border-radius: 0.625rem (--radius)
• Transiciones: 300ms ease
• Focus: ring-2 ring-ring
• Hover states definidos para cada variante

Cards

Título de Card

Contenido de la card con texto de ejemplo.

Estructura Card:
• CardHeader: padding 1.5rem
• CardTitle: text-2xl font-semibold
• CardContent: padding 1.5rem pt-0
• CardFooter: flex items-center
• Border-radius: 0.5rem
• Shadow: shadow-sm

Inputs y Forms

Características:
• Altura: 2.5rem (h-10)
• Padding: 0.75rem horizontal, 0.5rem vertical
• Focus: ring-2 ring-ring ring-offset-2
• Placeholder: text-muted-foreground

Estados y Efectos

Hover Effect
Focus State
Disabled State

Transiciones:
• Duración: 300ms
• Easing: ease
• Propiedades: colors, transform, opacity
• Hover: scale-105 para botones
• Focus: ring-2 ring-ring

5. Assets y Recursos Gráficos

Galería de Imágenes

Render 1 - Exterior

Render 1 - Exterior

Render 2 - Vista lateral

Render 2 - Vista lateral

Render 3 - Detalle

Render 3 - Detalle

Interior Cocina

Interior Cocina

Área de Bodega

Área de Bodega

Hub de Riders

Hub de Riders

Mapa de Cobertura

Mapa de Cobertura

Fondo NODO

Fondo NODO

Iconografía

Librería: Lucide React
Estilo: Outline icons, trazo fino
Tamaños: 16px, 20px, 24px, 32px
Colores: Heredan color del texto padre
Uso común: ArrowRight, Play, Pause, Menu, X, etc.

Archivos SVG

SVG

file.svg

SVG

globe.svg

SVG

next.svg

SVG

vercel.svg

SVG

window.svg

6. Sistema de Espaciado y Layout

Border Radius

radius-sm
calc(var(--radius) - 4px)

radius-md
calc(var(--radius) - 2px)

radius-lg
var(--radius)

radius-xl
calc(var(--radius) + 4px)

Variable base: --radius: 0.625rem (10px)

Sistema de Espaciado

xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2rem
2xl
3rem

Containers y Breakpoints

BreakpointMin WidthContainer Max WidthUso
sm640px640pxMóviles grandes
md768px768pxTablets
lg1024px1024pxLaptops
xl1280px1280pxEscritorio
2xl1536px1536pxPantallas grandes

7. Efectos y Animaciones

Sistema de Sombras

shadow-sm
Sombra sutil

shadow
Sombra base

shadow-lg
Sombra media

shadow-2xl
Sombra intensa

Efectos de Glow

Text Glow Orange
Number Glow White

text-glow: text-shadow: 0 0 20px rgba(251, 146, 60, 0.5)
number-glow: text-shadow: 0 0 30px rgba(255, 255, 255, 0.8)

Transiciones

Scale Hover
duration-300

Color Transition
duration-300

Shadow Transition
duration-300

Duración estándar: 300ms
Easing: ease (default)
Propiedades comunes: transform, colors, opacity, shadow

Backdrop Blur

backdrop-blur-md

Uso: Overlays, modales, headers transparentes
Variantes: backdrop-blur-sm, backdrop-blur-md, backdrop-blur-lg
Combinado con: bg-white/20, border border-white/30

8. Modo Oscuro

Variables de Color (Modo Oscuro)

Modo Claro

--background:oklch(1 0 0)
--foreground:oklch(0.145 0 0)
--primary:oklch(0.6 0.2 45)
--card:oklch(1 0 0)
--border:oklch(0.922 0 0)

Modo Oscuro

--background:oklch(0.145 0 0)
--foreground:oklch(0.985 0 0)
--primary:oklch(0.6 0.2 45)
--card:oklch(0.205 0 0)
--border:oklch(1 0 0 / 10%)

Implementación

Activación: Clase .dark en el elemento raíz
Tecnología: CSS Custom Properties + Tailwind CSS
Gestión: Contexto React (ThemeContext)
Persistencia: localStorage
Transición: Automática via CSS transitions

9. Stack Tecnológico

Framework y Librerías

Core

  • • Next.js 15.3.4 - React Framework
  • • React 19.0.0 - UI Library
  • • TypeScript 5 - Type Safety
  • • Tailwind CSS 4 - Styling

UI Components

  • • Radix UI - Primitives
  • • Lucide React - Icons
  • • class-variance-authority - Variants
  • • clsx + tailwind-merge - Class utilities

Herramientas de Desarrollo

Build & Dev

  • • Turbopack
  • • PostCSS
  • • ESLint

Integrations

  • • EmailJS
  • • Next Third Parties

Comandos

  • • npm run dev
  • • npm run build
  • • npm run lint

Guía de Diseño - NODO Dark Kitchens Paraguay

Generado: 1/8/2025