Un sistema para construir
software IA nativa, sin teatro.
Esencia de marca
Somos builders. IA nativa desde el día uno. Creemos que la próxima gran compañía de software no se va a parecer a la anterior.
Operamos liviano y entregamos software que funciona: Solutions para personas, Factory para productos, Labs para lo que viene, bajo una marca madre sobria y segura.
El sistema habla directo como builder: evidencia sobre poesía, claridad sobre ingenio, seguro sin teatro.
Voz y tono
El sistema habla como un builder escribiendo: seguro, específico, nunca decorativo. Sin metáforas literarias prestadas de otros oficios. Abajo: cuatro principios, tres ejemplos de titulares, dos ejemplos de cuerpo y una tabla de frases prohibidas que existe porque nos preguntan, seguido.
Principios
Sonamos como alguien que construye escribiendo, no como marketing vendiendo. Sin metáforas prestadas de otros oficios. Las frases largas están bien cuando se las ganan; las listas sólo cuando los ítems son realmente paralelos.
Nombra la empresa. Nombra el número. Nombra el año. Nombra la tecnología. La abstracción es lo que se usa cuando no hay nada que decir.
“Shippeamos,” no “innovamos.” “Construimos,” no “apalancamos.” Lenguaje de alguien en teclado, no de alguien en reunión.
Sin titulares en title case. Sin mayúsculas para énfasis, excepto etiquetas mono. Sin signos de exclamación. Sin emoji. El trabajo carga el peso.
Titulares, sentence case, sin excepciones
Sentence case + conteo concreto + estructura concreta. Title case + verbo abstracto suena corporativo y frío.
Número específico, resultado específico. La versión mala podría ser de cualquier empresa.
Nombra la relación y el modelo. La versión mala no dice nada.
Cuerpo, concreto o en silencio
Construimos una sola fuente de verdad en 11 semanas y recuperamos $340K en ingresos no facturados durante el primer trimestre de operación.
Our innovative solution helped the client achieve significant operational efficiencies and unlock new revenue streams.
Números reales, tiempo real. Los verbos vagos esconden que no hay nada que decir.
Dos founders. IA nativa desde el día uno. Un agente interno (NAVI) operando detrás de tres ramas.
A passionate team of seasoned professionals delivering best-in-class solutions globally.
Conteo concreto, modelo operativo concreto, estructura concreta. La densidad de buzzwords delata que estás escondiendo algo.
Frases prohibidas y sustitutos
| No escribas | Escribe esto |
|---|---|
| Leverage synergies | Usa lo que tenemos. Combina X y Y. |
| Empower founders | Construye para founders. Ayuda a founders a shippear. |
| Unlock the power of | (describe qué hace) |
| Cutting-edge | (nombra la tecnología específica) |
| Game-changing | (nombra el cambio específico) |
| AI-powered | (no lo anuncies, muéstralo) |
| World-class | (entrega evidencia) |
| Best-in-class | (entrega evidencia) |
| Innovative solution | (di qué es realmente) |
| Seamless experience | (describe el flujo real) |
Tipografía
Cadet type foundry, BIPRK. Una display geométrica con calidez latinoamericana en sus curvas; la ‘a’ y la ‘g’ son discretamente imperfectas. Elegimos Syne porque es institucional en 700, juguetona en 800, y carga actitud builder.
Omnibus-Type, open source. Una grotesca con contraformas generosas que lee con calma en cualquier tamaño. Rigurosa sin ser fría, la voz de razón del sistema.
Mono
La tipografía de ingenieros, hecha por ingenieros. Mono carga coordenadas, labels, estado, código, timestamps y la estructura alrededor de la prosa editorial.
Escala tipográfica
| Token | Fuente | Tamaño | Línea | Tracking | Peso | Uso |
|---|---|---|---|---|---|---|
| hero | Syne | clamp(80, 12vw, 200px) | 0.95 | -0.045em | 400 / 700 | Hero de marca, uno por página |
| h1 | Syne | clamp(64, 9vw, 144px) | 0.95 | -0.035em | 700 | Apertura de página |
| h2 | Syne | clamp(40, 5.2vw, 72px) | 1.05 | -0.02em | 400/700 mixto | Título de sección |
| h3 | Syne | 30px | 1.15 | -0.02em | 600 | Título de card |
| h4 | Syne | 22px | 1.2 | -0.02em | 600 | Sub-card |
| lead | Archivo | 19px | 1.7 | 0 | 400 | Párrafo de entrada |
| body | Archivo | 16px | 1.55 | 0 | 400 | Prosa |
| small | Archivo | 14px | 1.5 | 0 | 400 | Captions |
| micro | Archivo | 12px | 1.3 | 0.18em | 500 / UPPER | Botones, labels, nav |
| meta | JetBrains Mono | 11px | 1.4 | 0.08em | 400 / UPPER | Coordenadas, eyebrows, estado |
Color
Dinnartec opera sobre oscuro. El fondo no es negro puro: es una tinta con 3% de calidez para que nunca se lea como default del navegador. Cada vertical tiene un solo color de acento, nunca mezclado con el acento de otra vertical en la misma composición.
Paleta core. El fondo sobre el que vive todo el sistema
Acentos verticales. Uno por subidentidad
Usos que pasan contraste
| Acento | Sobre Ink (#0A0A0B) | Sobre Paper (#FAFAF7) | Uso aprobado | Uso evitado |
|---|---|---|---|---|
| Core paper | 19.87 : 1 · AAA | N/A | All text on ink. Borders. Icon strokes. | Large flood as a brand signal (it's type). |
| Solutions indigo-violet | 4.84 : 1 · AA-small | 3.90 : 1 · AA-large only | Accent text/rules on ink. Underlines. CTA bg. | Body text on paper. Small icons on paper. |
| Factory cobalt | 5.05 : 1 · AA-small | 3.72 : 1 · AA-large only | Status dots. Data accents. CTA bg. | Body text on paper. Small text on paper. |
| Labs steel | 7.53 : 1 · AAA-large · AA-small | 2.50 : 1 · FAIL | Code links. Citation marks. Diagram strokes. | Anything on paper. Steel fails on bone. Use ink variant. |
La inversión no es #ffffff. Es #F4F2EC, un hueso cálido. Ink pasa a #0A0A0B. Los acentos se profundizan un paso para contrastar sobre hueso: indigo-violet → #3D2D85, cobalt → #2A3FA0, steel → #3D4A5C. Oscuro es el default; claro es para papers de Labs con mucha lectura, PDFs e impresión.
Sistema espacial
El espacio generoso no se negocia. La contención se lee como confianza. Toda superficie vive sobre una grilla de 4px; todo container respira.
12 columnas, gutter 24 → 64px
Mobile colapsa a 4 columnas. Tablet a 8. Desktop a 12. Las divisiones asimétricas (7/5, 5/7, 8/4) son preferibles a mitades perfectas.
Tres anchos, nada más
| narrow | 960px | Papers de Labs, specs técnicas, legal. |
| default | 1320px | Marketing, producto. |
| wide | 1560px | Datos, dashboards, galerías. |
El gutter es max(24px, 3.2vw), escala con el viewport.
Escala de espaciado, base 4px, geométrica donde importa
4
8
12
16
24
32
48
64
96
128
Breakpoints
| Token | Min | Grilla | Hero típico |
|---|---|---|---|
| xs | 0 | 4 col, gutter 16px | hero @ 80px |
| sm | 640 | 6 col, gutter 20px | hero @ 96px |
| md | 960 | 8 col, gutter 24px | hero @ 128px |
| lg | 1280 | 12 col, gutter 32px | hero @ 168px |
| xl | 1600 | 12 col, gutter 48px | hero @ 200px |
Motion
Toda transición tiene una razón. Si no le dice algo al usuario, de dónde viene, qué entra, qué queda estable, no debería existir.
El motion cuenta causa y efecto. Si quitarlo no cambia lo que el usuario entiende, no debería existir.
El easing de entrada es generoso (expo-out, 520ms). El de salida es seco (expo-in, 200ms). Respeta el tiempo; no lo gastes en despedidas.
Usamos animación ligada al scroll para narrativas largas, una idea por sección, revelada en secuencia. Parallax está prohibido. Sólo posición, escala y opacidad.
Easings con nombre, no anónimos
Default. 80% de las transiciones. Calma, profesional, sin show.
Contenido entrando a página, scroll-reveal. Expo-out.
Contenido saliendo. Expo-in, arrastre lento, salida rápida.
Cambio de estado UI, hover, focus. Directo, sin overshoot.
Arcos ligados al scroll. El easing "cinemático".
Cuando prefers-reduced-motion: reduce está activo, preservamos fades de opacidad pero llevamos translate/scale/rotate a cero y reducimos duraciones a 1ms. El punto pulsante del edge rule se congela. Sin parallax, sin marquee, sin autoplay.
Primitivas de componentes
Buttons: primary, secondary, ghost
--paper--ink--paper-muted--edge-strong--ring--d-base--ease-precise.vertical-{accent}Un CTA primario por superficie. Las acciones secundarias van ghost o text-link. El ojo aterriza una vez, luego decide.
Dos primarios en la misma superficie. El usuario se pausa; la página ahora tiene dos opciones igual de fuertes en vez de una y un fallback.
Cards
Borde 1px, fondo ink-raised. Sin sombra, sin radius. La línea fina hace el trabajo.
El borde pasa de 10% a 22%. El fondo sube 3% hacia paper. 320ms, easing preciso.
El acento izquierdo de 2px señala qué vertical es dueña de la card.
--ink-raised--edge--edge-strong--s-10--d-base--ease-precise.card[data-v]Primitivas de layout, Stack · Cluster · Grid
Flujo vertical con gap consistente. Reemplaza <div style={{display:flex,flexDirection:column,gap:N}}>.
Grupo inline, hace wrap por defecto. align, justify, wrap as props.
display:flex,gap,flexWrapcols recibe un número (repeat) o un template string. responsive collapses to 1 col below 768px.
cols="2fr 1fr" for asymmetricgap uses the 4px scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48.◊ Default
gap={4} = 16px. Default wrap on Cluster is true.◊ Each primitive renders a
<div>; pass style for one-off overrides.◊ Replaces 80% of the inline
style={{display:flex,gap}} hand-rolls.--ds-gap--ds-cols--s-{0..48}.ds-stack.ds-cluster.ds-gridStat, valor display + label mono
vertical colors the value. emphasis="hero" jumps to t-h2 (clamped 40-72px).◊ Use sparingly, three stats in a row is the natural rhythm. More than four crowds.
◊ Numbers above 6 digits get hard to read; format
$340K not $340,000.--f-display--t-h3--t-h2--paper--paper-muted--tr-snug.ds-stat[data-v]SpecRow, tabla de specs estilo Apple
- v2.3.1
- Live
- Operaciones · SaaS
- Agosto 2025
- v0.1.3
- MIT · OSS
- Hace 2 semanas
◊
value accepts JSX, pass a <Badge> for status, mono text for versions.◊ Pair with a heading above (product name, release codename), the spec row alone is too dense.
--ds-spec-cols--edge--edge-strong--f-display--f-mono--t-bodyFooter, toda superficie Dinnartec
El <Footer> debajo de esta card es el mismo componente usado en /. Props: brand, slogan, columns, showThemeSwitch, copyright, legal, langSwitch.
{href}) or plain text (no href).◊
columns.length drives the grid template via CSS var, 1, 2, or 3 columns adapt.◊ Mobile: collapses 4-col → 2-col → 1-col at 860 / 480.
◊ Bottom row only renders if
copyright, legal, or langSwitch are set.--ink-deep--paper--paper-muted--paper-dim--paper-faint--ds-footer-colsProductSignature, atribución unificada en productos Factory
© 2026 Real Estateby Dinnartec
© 2026 Fitnessby Dinnartec
© 2026 Brickendby Dinnartec
© 2026 NAVIby Dinnartec
© {year} {product} · by Dinnartec◊ The master brand
Dinnartec renders in --paper (full strength); the rest in --paper-dim.◊ Lives at the bottom of every Factory product page, closes the brand loop quietly.
◊ Use instead of plain
copyright text on Factory surfaces; on the Dinnartec master site itself, use the standard <Footer> copyright.◊ Override
parent only if the structure ever needs it (default Dinnartec).--f-mono--paper--paper-dim--paper-faintInputs
--edge-strong--paper--paper-dim--status-error--f-body--t-bodyBadges y status pills
Los badges son rectángulos, nunca cápsulas. Borde 1px, label mono, punto de estado 6px. Los puntos live pulsan cada 2s.
--edge-strong--paper-muted--status-{live,beta,error,neutral}.badge[data-v]Navegación
◊ Wordmark + nav links + lang switch + CTA
◊ Active link → label in vertical accent
◊ Hover → label paper-muted → paper, 320ms precise
◊ Scroll > 8px → bg ink/80 + blur(8) + edge
◊ Links + lang + CTA hidden, hamburger appears
◊ Tap burger → full-screen overlay (ink-deep)
◊ Numbered list, mono nums + display labels
◊ Closes on Escape, tap outside, route change
--ink--edge--paper--paper-muted--ring.vertical-{accent}backdrop-filterTheme switch
Haz click en cualquier icono para cambiar el tema de todo este doc. Choice persists in localStorage. System follows the OS via prefers-color-scheme.
◊ Active option inverts (paper bg + ink fg)
◊ Inactive sits in paper-dim, hover → paper-muted
◊ Sets
data-theme on every .ds-root◊ Light mode swaps ink ↔ paper-ground for the core tokens
◊ Vertical accents swap to
--*-ink variants on light (AA on bone)◊ Status colors (live/beta/error) also recalibrate, bright reds/greens fail on light
◊ Reduced motion respected; transitions clamp to 1ms
◊ Accessible via
role="radiogroup", aria-label, titledata-theme--ink-raised--paper--ink--paper-dim--paper-muted--ringForms, inputs compuestos en una solicitud
◊ Labels in mono, uppercase, paper-dim. Above the input, never floating.
◊ Submit button never centered. Always left-aligned.
◊ Hint text in mono 11px, 6px below the input.
◊ Error message in mono 11px, prefixed with em-dash.
◊ Errors are written, not generic. “Required” is the worst possible error message.
◊ Submit disables until all errors clear.
◊ Never use placeholder as label, placeholders disappear on focus.
◊ Validation runs on blur, not on every keystroke.
◊ Success state is a confirmation message, not a redirect.
◊ Loading state replaces the submit button label, doesn’t spin next to it.
◊ One required field per row. Optional fields marked explicitly.
◊ The form’s width matches its longest expected input, don’t stretch to container.
Movimientos firma
Tres comportamientos que, juntos, hacen que cualquier superficie se reconozca como Dinnartec, incluso sin wordmark.
Una línea horizontal de 40px siempre fijada arriba del viewport, con metadata viva: coordenadas de locale, sección actual, timestamp de build, estado. Reemplaza el rol ambiental de una nav típica de marketing con evidencia de ingeniería.
◊ Medio · número + nombre de sección actual
◊ Derecha · locale + fecha + punto de estado
◊ Pulsa en “shipping”, se congela en reduced motion
◊ En scroll: agrega backdrop-blur 8px y borde inferior 1px
La regla vuelve a renderizar en cada cambio de ruta y en cada cambio de sección por IntersectionObserver.
Construimos software IA nativa,
sin teatro.
Todo titular hero se estructura como fragmentos discretos: un prefijo regular, un aside tenue, un acento bold y una cláusula final limpia. Al cargar la página, los fragmentos entran en secuencia, separados por ~180ms, cada uno con entrada expo-out. Sin typewriter, sin blur, sólo composición ordenada.
◊ Sólo animan opacity + translateY 12px
◊ Ensamble total ≤ 1.2s, nunca más
◊ Activado por scroll para H2 que no son hero
Todo bloque de prosa está envuelto en evidencia de ingeniería: coordenadas, números de sección, timestamps, hashes de commit, en JetBrains Mono a 11px y 8% de tracking. El scaffolding nunca aparece dentro de la prosa; vive arriba, al lado o abajo, como anotaciones en un build log.
◊ Usa el glifo ◊ como bullet
◊ Fechas en ISO-8601 (2026.06.16)
◊ Hashes de commit: 7 caracteres, minúscula
Crepes & Waffles llegó con un problema de conciliación. Construimos una sola fuente de verdad en 11 semanas y recuperamos $340K en ingresos no facturados durante el primer trimestre de operación.
Imagery e iconografía
La imagery es geometría, tipo, diagramas, coordenadas mono, reglas de acento y MarkField. La fotografía se gobierna con Plate. La realidad de producto se gobierna con EvidenceFrame. Los mockups sociales se gobiernan en v1.6. Toda superficie visual se mantiene escasa, con caption y ligada a evidencia.
MarkField: textura orgánica de identidad
v1.5 keeps one identity primitive for now: MarkField. It is built from repeated mark units and reserved for quiet brand signal, not decorative illustration.
Fotografía: permitida sólo vía <Plate />
When the page discusses a specific thing or person and the reader gains something from seeing the actual object, render it through the Plate primitive. Duotone treatment locks the photograph into the system palette; the numbered caption forces a deliberate count per surface. Decorative or ambient photography remains rejected: portraits, offices, hands at keyboards, stock, and screenshots.
- Subject-isolated. The thing being discussed is the dominant element. Clean ground or contextual environment that serves it.
- Duotone always. Treatment matches the host vertical (Solutions / Factory / Labs) or defaults to Paper / Ink.
- Scarce by surface. One per long-form page or landing section. Social canvases may use one dominant Plate.
- Numbered caption.«PLATE 0X» is required. The count is the discipline.
- Banned subjects. Staff portraits, offices, hands at keyboards, stock photography, screenshots.
Iconografía, outline, 1.5px, grilla 24px
Heroicons v2 Outline. 24×24 grid, 1.5px stroke, round caps and joins, currentColor. Never filled, never duotone. Icons always trail text in CTAs, never icon-only buttons.
Imagery v1.6
v1.6 no rediseña Dinnartec. Agrega una capacidad puntual sobre v1.5: mockups sociales controlados, permitidos sólo cuando ayudan a entender un producto, workflow u oferta en el feed.
Mismo sistema. Más formas de mostrar material real.
- Syne, Archivo y JetBrains Mono.
- Ink, paper y los tres acentos verticales.
- Radius 0, líneas 1px, módulos rectangulares.
- Composición primero tipográfica e imagery primero evidencia.
La fotografía sigue siendo escasa.
Plate ahora tiene densidad, grain e intención de crop. Sigue aceptando sólo fotografías reales que ayuden al lector a inspeccionar algo.
Un campo, no una ilustración.
MarkField extiende el dot-grid hacia una textura orgánica de marca. Soporta la composición, pero nunca compite con el mensaje.
Matriz de superficies
| Superficie | Plate | MarkField | Regla |
|---|---|---|---|
| Hero landing | Raro | Raro | El tipo sigue siendo el material hero por defecto. |
| Landing section | Permitido | Permitido | Usar cuando la imagen prueba la sección. |
| Blog post | Permitido | Raro | Plate carga referencias y objetos reales. |
| Social export | Permitido | Permitido | Mockups controlados permitidos. Screenshot crudo no. |
| Open Graph | Raro | Permitido | Preferir tipo, metadata y señal de baja densidad. |
Permitidos en redes. No se vuelven lenguaje de landing.
Un mockup entra sólo si acelera comprensión en feed. La landing mantiene su regla: tipo, diagramas, Plate, MarkField y EvidenceFrame.
- Sólo redes: posts, carruseles, social ads y review boards.
- Debe mostrar producto, workflow, dashboard state, oferta o before/after.
- Sharp rectangles, warm paper/ink, hairlines, mono metadata y un acento vertical.
- Sin device stacks flotantes, teléfonos glossy, sombras pesadas, bokeh o perspectiva imposible.
- UI simplificada, pero no falsa. Datos privados ocultos y estados prototype marcados como prototype.
Capa de capacidad, no piel nueva.
Si una pieza necesita otra fuente, otra paleta, containers redondeados, mockups inclinados fuera de redes o screenshots crudos para funcionar, no pertenece a v1.6.
Artefactos de evidencia
El sistema puede mostrar realidad de producto sin volverse template SaaS. Los artefactos de evidencia son la forma permitida de revelar ledgers, trazas, diagramas, release notes y prueba de caso. No son screenshots. Ayudan al lector a juzgar el trabajo.
- +18%
- 14,220
- 0
tx_8922 pending -> owner review
tx_8923 matched -> lease_203
Un estado de sistema puede mostrarse cuando el artefacto está construido dentro del DS. Sin screenshots, mockups inclinados, glass cards o escenas desktop ambientales.
Conciliación manual, filas duplicadas, facturas sin shared source of truth.
Registro operativo único, cola de excepciones, revisión financiera semanal review.
A case artifact compresses the situation, the intervention, and the measurable result. It should feel like a clean work file, not an ad.
MODEL
POLICY
TOOLCALL
if actor.scope.allows(task): plan = planner.expand(task) run(plan, boundary=actor.scope) else: request_handoff(actor, task)
Labs artifacts can be denser. They earn that density with structure: method, diagram, pseudo-code, constraint, source.
NAVI artifacts may use the midnight treatment, but the information still has to be inspectable: who acted, why, and under which permission scope.
Artefactos de método
Usa MethodArtifact cuando una sección necesita explicar cómo Dinnartec works. It gives Open Design and production code the same grammar: inputs, system maps, checklists, logs, and outputs.
◊ Never mention a channel or tool unless the section is about that exact channel or tool.
◊ Each artifact must answer one question: what enters, what changes, what ships, or what improves.
Cuándo usar un artifact frame
| Type | What it must show | Where it belongs |
|---|---|---|
| Estado del sistema | Un ledger, traza de sistema, artefacto de release o estado abstracto de producto. | Páginas Factory, lanzamientos de producto, demos. |
| Evidencia de caso | Números antes/después, tiempo, contexto de cliente, artefacto operativo. | Páginas Solutions y casos. |
| Nota de investigación | Diagrama, pseudocódigo, benchmark, nota de método, referencia a prior art. | Papers y docs de Labs. |
| Protocolo de agente | Estado de tarea, handoff, límite de permisos, traza o schema de mensaje. | Producto NAVI y tooling interno. |
Si una imagen sólo dice "tecnología", recházala. Si le permite al lector inspect a real state, a real constraint, or a real result, rebuild that evidence as a Dinnartec artifact. The character stays Dinnartec because the surface remains rectangular, captioned, measured, and scarce.
Texturas y superficies
La primitiva TextureSurface define cuatro patrones de fondo permitidos. Toda textura debe señalar, contar o etiquetar algo. La decoración sin función es el modo de falla. Si la superficie todavía se entiende después de quitar la textura, quítala.
PATRÓN 01
Dot-grid
Drafting paper · diagram ground · technical surface.
Reads as "esto es un plano". Standard (16px) para superficies normales; tight (8px) para detalle cercano; loose (28px) para fondos amplios.
PATRÓN 02
Hatch
Errata · zona cancelada · cita marginal.
Convención de plano técnico: rayado = marcado, no eliminado. Reservado para callouts y bloques de cita. Nunca como fondo de hero.
PATRÓN 03
Grain
Hero · respiración · superficie larga.
Ruido SVG, opacidad bakeada por densidad. Tone se ignora. Úsalo para evitar sensación de "rectángulo plano" en heroes; nunca como decoración secundaria.
PATRÓN 04
Halftone
Banda perimetral · sub-rule · marcador de contenido.
Hereda lenguaje del print de revista. Útil como banda inferior de sección o degradación de Plate. El accent se permite cuando la banda vive dentro de un vertical específico.
Patrones haciendo trabajo
Si la textura no se nota cuando se quita, no estaba haciendo trabajo. Cuatro ejemplos de texturas en su rol real.
DOT-GRID · diagrama de arquitectura
El parámetro retry_after dejó de aceptar segundos en v1.2. Usar milisegundos.
HATCH · zona errata / cancelado
F.02 · OPERATOR ARM
Treinta y siete
articulaciones,
una intención.
GRAIN · hero · superficie larga
HALFTONE · banda perimetral
MarkField está separado de TextureSurface.
TextureSurface señala roles de superficie: diagrama, errata, grain o banda perimetral. MarkField señala identidad Dinnartec mediante unidades pequeñas y repetidas de la marca. Úsalo menos que dot-grid.
- Función primero. Cada textura señala, cuenta o etiqueta. Si pudiera quitarse sin perder información, no entra al sistema.
- Una por superficie. Nunca apiles patrones. Una superficie, una textura.
- El tono default es faint. Strong se reserva para callouts y errata, no para énfasis decorativo.
- El acento está atado al contexto vertical. Solutions/Factory/Labs accent solo en superficies que ya viven en ese vertical.
- Grain ignora el tono. Su opacidad va bakeada por densidad. Documentado en el primitivo.
Playbook de subidentidades
Cada vertical hereda tipografía, grilla, motion y primitivas. Sólo difieren en cuatro dimensiones: acento, densidad, voz y señal visual.
| Dimensión | Core (marca madre) | Solutions | Factory | Labs |
|---|---|---|---|---|
| ACCENT | Paper #FAFAF7 | Indigo-violet #836CDA | Cobalt #5B7BE0 | Steel #8FA3BD |
| DENSIDAD | Generosa. Padding de sección 192px. Container estrecho para prosa. | Generosa. Columna amplia. Números de resultado al frente. | Densa. Densidad de página de producto. Padding 96–128px. Tablas, datos. | Académica y densa. Container estrecho 960px. Notas al pie frecuentes. |
| VOZ | Institucional. Primera persona plural. "En Dinnartec construimos." | Cálida, primera persona plural. "Construimos contigo." Casos con nombre. | Producto primero, beneficios después. "Un ledger. Cada número." | Técnica, respetuosa del prior art. "Esto construye sobre el trabajo de..." |
| IMAGERY | Guiada por tipografía. Frames editoriales, coordenadas mono, textura dot-grid. Sin fotos. | Números de resultado en display. Reglas de acento, frames 1px, casos con nombre. Sin retratos. | Producto como arquitectura abstracta por defecto. Estados UI reales sólo dentro de EvidenceFrame. | Diagramas. Bloques de pseudocódigo. Arquitectura en líneas de 1px sobre dot-grid. |
| DATOS | Con moderación. Revenue, tamaño de equipo. Mono. | Números de resultado ($340K recuperados, 11 semanas). Casos específicos, con nombre. | Dashboards vivos, uptime, MRR, conteo de filas. Mono, acentos cobalt. | Benchmarks, tablas, fórmulas. Highlights Steel. Monospace primero. |
| CTA | "Hablemos" | "Hablemos / Let’s talk" · indigo-violet bg | "Probar demo" · bg cobalt · siempre junto a pricing | "Leer paper" / "Ver en GitHub" · bg steel |
Tres heroes, un sistema
contratado por proyecto.
Diagnosticamos, construimos, shippeamos. Nos quedamos sólo el tiempo que nos necesitas.
Every number.
componibles por agentes.
Anti-patrones
La paleta default 2023–24 de “producto IA”. Orbes flotantes, gradientes láser en fondos de hero. Cliché instantáneo. Única excepción: superficies NAVI. El agente interno de IA tiene el único gradiente del sistema, una malla nocturna con los tres tonos verticales (cobalto + violeta + acero) sobre fondo ink profundo (token --navi-gradient, scoped via .navi-surface). Independiente del tema a propósito. Fuera de NAVI, sigue siendo cliché. La regla se fortalece por escasez.
Somos IA nativa. No lo anunciamos. Si tenemos que decirlo, no lo hemos mostrado.
Personitas junto a laptops gigantes. Edificios fucsia. Cualquier cosa de un template SaaS. Nunca.
Somos rectángulos. border-radius: 0 is es una decisión de marca. Excepción: puntos de estado.
Cero emoji. Si necesitas una marca visual, usa el glifo ◊ o un icono de línea.
Sólo sentence case. El title case es corporativo y frío; nosotros no.
Usamos línea fina de 1px. Las sombras pertenecen a la imagen hero, a ningún otro lugar. Sin blurs 0 10px 25px.
No fingimos física. Motion es narrativa. Si no pasaría en una puesta en escena en vivo, no pasa aquí.
"Leveraging synergies." "Empowering founders." "Unlock the power of..." Todo prohibido. Escribe como un builder escribiendo.
Sin oficinas de noche, sin founders en su espacio, sin manos con luz cálida sobre teclado, sin stock, sin mockups flotantes en landing. Tres excepciones permitidas: <Plate /> for para fotografías con sujeto aislado y <EvidenceFrame /> para ledgers, trazas, diagramas y evidencia de caso construida dentro del DS. En redes, mockups sociales controlados para producto, workflow u oferta. Todas tienen caption, son escasas y están ligadas a algo que el lector puede inspeccionar.
Una superficie, un acento. El índigo-violeta de Solutions y el cobalto de Factory nunca se tocan en la misma página. El plata de Labs no aparece en una página de Factory.
Our ink is #0A0A0B. Tiene 3% de calidez. No #1e1e1e, not #121212 como fondo. Comprométete con el negro.
Los patrones son superficies, no adorno. Nunca apiles dos texturas en la misma superficie (sin hatch sobre dot-grid, sin grain sobre halftone). Una superficie, una textura. Y toda textura debe señalar, contar o etiquetaralgo: dot-grid significa «technical surface», hatch means «errata / cancelled», grain means «hero respiration», halftone means «perimeter sub-rule». If you can remove the texture y la superficie todavía se entiende, quítala. Usa la primitiva <TextureSurface /> . Los fondos ad hoc evaden la disciplina.
Sin screenshots de producto, chrome de navegador, ventanas de app, recortes de dashboard ni UI pegada dentro de un frame como imagery de marca. La realidad de producto se reconstruye como <EvidenceFrame />. La identidad visual viene de la tipografía, Plate, TextureSurface y <MarkField />. En redes, un screenshot sólo entra si se redibuja o depura como mockup social controlado.
Hero de ejemplo
Una spec ejecutable que diseño o frontend pueden implementar sin adivinar. Layout, tokens y secuencia de motion.
◊ Fila nav, 72px de alto · border-bottom edge-faint
◊ Cuerpo hero, grid 1.1/.9 · gap 48px · align-items: end
◊ Titular, clamp(56, 10vw, 168) · Syne · -0.045em
◊ Standfirst, lead 20px · Archivo · max-width 42ch
◊ CTA row, 36px gap from standfirst
◊ Rail vertical, 3 cols · cada uno acento + label + h4
◊ Alto de sección, 100vh en ≥ lg · 88vh en md · auto en sm
◊ 80ms · links nav fade in, 200ms
◊ 220ms · accent rule + eyebrow entrada 12px→0, 520ms
◊ 320ms · fragmento titular 1 “Construimos” · entrada 520ms
◊ 480ms · fragmento titular 2 “IA nativa”
◊ 640ms · headline fragment 3 “software.” · entrada 720ms
◊ 820ms · párrafo standfirst 20px→0 · 520ms
◊ 1040ms · CTA row 12px→0 · 520ms
◊ 1180ms · rail vertical staggered, delta 80ms por celda
◊ 1400ms · mono margin-note fade in
◊ 1500ms · punto de estado inicia pulso 2s