Saltar al contenido principal

TOT Boilerplate

Progresión áurea φ=1.618 para crear armonía matemática perfecta.

Explorar Sistema TOT0

Filosofía 01234 - Los 5 Niveles Cognitivos

Patrón Original del Pensamiento

Proyectos Implementados

Sitios web reales funcionando con filosofía 01234 y sistema TOT0

CEREBRO-DIGITAL: Ecosistema holístico que amplifica la creatividad mediante la orquestación de Claude Code, Obsidian y Python CLI. Transformación del caos informacional en arquitectura de sentido basada en filosofía 01234.

Portfolio Auto Updater - Screenshots Automáticos

Módulos Python CLI

Scripts automatizados implementados en el sistema CEREBRO-DIGITAL

Archivos Reales del Sistema

Estructura de documentación auténtica

Comandos Reales - Python CLI CEREBRO-DIGITAL

# Comandos CLI reales implementados
python3 main.py events hoy
python3 main.py events pendientes
python3 main.py gmail search --query "subject:factura"
python3 main.py drive search "document name"
python3 main.py gastos reporte --mes 7 --año 2025
python3 main.py portfolio update

# Módulos reales en /src/modules/
├── google_connector.py  # APIs Google
├── events.py             # Gestión calendario
├── control_gastos.py     # Finanzas
└── portfolio_auto_updater.py # Screenshots automáticos
/* Variables TOT0 - Sistema real implementado */
:root {
  --u: 8px;     /* Unidad base */
  --r: 1.618;   /* Ratio áureo φ */
  --hue: 200deg; /* Color primario */
  --sat: 70%;    /* Saturación */
  --flow: row;   /* Dirección grid */
}

/* Clases atómicas reales del Design System */
.grid {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: calc(var(--u) * var(--r));
}

.ch { align-items: center; }
.cv { justify-content: center; }

Sistema de Color Atómico TOT0

TODO emana de 5 colores base: CYAN, MAGENTA, YELLOW, NEGRO y BLANCO

5 Colores Atómicos Base (CMY + BW)

CYAN
MAGENTA
YELLOW
NEGRO
BLANCO

Mezclas RGB (Síntesis Aditiva)

RED (M+Y)
GREEN (C+Y)
BLUE (C+M)

Variaciones Esenciales (Dark/Light/Pastel)

cyan-dark
cyan-light
cyan-pastel
magenta-dark
magenta-light
magenta-pastel
yellow-dark
yellow-light
yellow-pastel

Mezclas Armónicas Únicas

orange
purple
lime

Escala de Grises Condensada

black
gray-dark
gray-medium
gray-light
white

Gradientes Únicos

primary
secondary
accent
rainbow

Grupo 1: Oscuros con Acentos Claros

Base oscura dominante con 2 colores claros para contraste

black
cyan-dark
magenta-dark
yellow-light
white

Grupo 2: Desaturados con Acento Vibrante

Tonos pastel suaves con un color saturado de impacto

cyan-pastel
magenta-pastel
gray-light
magenta (vibrante)
white

Grupo 3: Balance 3:2 (Desaturados:Vibrantes)

Mayoría de tonos suaves con dos acentos vibrantes

yellow-pastel
gray-medium
cyan-light
cyan (vibrante)
orange (vibrante)

Grupo 4: Monocromático con Doble Acento

Base en grises con dos colores complementarios vibrantes

black
gray-dark
gray-light
yellow
purple

Grupo 5: Triádico Equilibrado

Los 3 primarios con variaciones de intensidad

cyan-dark
magenta-pastel
yellow
gray-medium
white

Layouts - Sistema de Espaciado TOT0

Mini layouts que demuestran las combinaciones posibles de grids, spacing y color

Minilayouts - Demostración Completa del Sistema de Spacing

Componentes reales usando todas las clases: .pt0-.pt5, .pb0-.pb5, .pl0-.pl5, .pr0-.pr5, .mt0-.mt5, .mb0-.mb5, .ml0-.ml5, .mr0-.mr5

Layout A: Dashboard con Sidebar

Header - pt2 pl4 pr1
Card A - pl1 pr3
Card B - pl5 pr0

Layout B: Blog Post con Margins

Header - ml0 mr0 pl2 pr2
Párrafo principal - ml2 mr1 pl3 pr4
Quote indentado - ml5 mr0 pl1 pr2
Footer - ml1 mr3 pl2 pr1

Layout C: Form con Spacing Funcional

Input - pl3 pr1 (espacio para label)
Textarea - pl1 pr4 (espacio para botón)
Button - ml4 mr1 pl2 pr3

Layout D: Card Grid con Padding Variado

Card Minimal - pl0 pr2
Card Standard - pl3 pr3
Card Dramatic - pl5 pr1

Layout E: Navigation con Margins

Logo - ml0 mr3
Nav 1 - ml1 mr2
Nav 2 - ml0 mr4
CTA - ml2 mr0 pl4

Layout F: Modal con Spacing Extremo

Title - pl1 pr5
Content - ml1 mr1 pl2 pr2
Action - ml3 mr0 pl3 pr1

Layout G: Grid Visual - Todos los Colores del Sistema

Content Area
Secondary Content
Tertiary Content

Layout 1: App Dashboard

Layout 2: Blog Minimalista

Layout 3: E-commerce

Layout 4: Portfolio Profesional

Layout 15: Dashboard Widgets

REVENUE

$24,580

+12.5% vs last month
PROJECT STATUS
75%
Design Phase
Development
Testing
RECENT ACTIVITY
User login
File uploaded
Task completed
PERFORMANCE
LIVE
TEAM ONLINE
Alex
Sara
Mike

Layout 14: Footer Variations

Logo
Link
Link
Link
Column 1
Link
Link
Link
Column 2
Link
Link
Column 3
Link
Link
Column 4
Link
Copyright
Social
Social
Social
Subscribe
Newsletter form
Social 1
Social 2
Social 3
Copyright

Layout 13: Navigation Patterns

Home
/
Products
/
Category
Tab 1
Tab 2
Tab 3
Tab 4
Tab Content
Menu Item 1
Menu Item 2
Menu Item 3
Submenu 1
Submenu 2
Content Area

Layout 12: Content Sections

Hero Title
Hero Content
Hero Image
Features Title
Icon
Feature 1
Icon
Feature 2
Icon
Feature 3
Icon
Feature 4
Image
Title
Content
Button

Layout 11: Form Elements

Label
Input
Button
Label
Textarea
Label
Input
Label
Input
Label
Input
Submit
Label
Input
Label
Input
Submit

Layout 10: Header Variants

Logo
Brand
Link
Link
Link
Logo
Brand
Search
Profile
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Menu 6
Large Logo
Link 1
Link 2
Link 3
Link 4

Layout 9: Image Gallery

Featured Image
Thumb 1
Thumb 2
1
2
3
4
Wide Image 1
Wide Image 2

Layout 8: Feature List

Feature 1

Description text

Detail 1
Detail 2
Detail 3
Feature 2

Description text

Detail 1
Detail 2
Feature 3

Description text

Tag 1
Tag 2
Tag 3
Tag 4

Layout 7: Card Grid System

Featured
Item 1
Item 2
Regular
Content
Small 1
Small 2
Small 3

Layout 6: Sidebar App

Dashboard
Users
Settings
Card 1
Card 2
Card 3

Layout 5: Landing Page Creativa

Sistema de Iconos CDN - Control Dinámico

Implementaciones Reales en Producción

Casos de uso auténticos del sistema TOT0 y filosofía 01234

  1. Instalar dependencias: pip install -r requirements.txt
  2. Configurar APIs: Colocar client_secret.json en /src/config/
  3. Ejecutar sistema: python3 main.py events hoy