Ámsterdam · Nueva York · BogotáAmsterdam · New York · Bogotá

Manual de
marca ●Brand
guidelines ●

Creemos en el poder de la imagen. Este es el sistema del que nace todo lo que el estudio diseña.We believe in the power of images. This is the system every single thing the studio designs is born from.

Brand & Design System Edición 01 · 2026Edition 01 · 2026 the power of images
Scroll ↓
// 01

La marcaThe brand

Quiénes somos, de dónde viene el nombre, la voz y el manifiesto — la esencia de la que nace todo.Who we are, where the name comes from, the voice and the manifesto — the essence everything is born from.

02 · Cómo usar este manual02 · How to use this manual

Un mapa // no un muroA map // not a wall

De la esencia a la aplicación, en tres partes. Léelas en orden: cada regla llega ya explicada por la anterior.From essence to application, in three parts. Read them in order: every rule arrives already explained by the one before.

Parte 1 · MarcaPart 1 · Brand

El porquéThe why

Quiénes somos, la voz, el poder de las imágenes.Who we are, the voice, the power of images.

Parte 2 · Sistema VisualPart 2 · Visual System

Las herramientasThe tools

Logo, color, tipografía, retícula y motion.Logo, color, type, grid and motion.

Parte 3 · AplicaciónPart 3 · Application

La obraIn practice

Cómo vive en web, impreso, propuestas y herramientas.How it lives across web, print, proposals and tools.

render 3·6 — de la esencia a la obra

Una marca // dos pielesOne brand // two skins

La regla que decide cada proyecto: no cambiamos de identidad, cambiamos de piel según quién mira.The rule behind every project: we don't change identity, we change skin depending on who is looking.

render 3·6 — piel Showcase, la imagen manda
Piel A · InternaSkin A · Internal

Claro Minimal — la información mandaClaro Minimal — information leads

Crema y tinta. Cotizadores, tableros, documentos. Sin ruido.Cream and ink. Quoting apps, dashboards, documents. No noise.

Piel B · PúblicaSkin B · Public

Showcase — la imagen mandaShowcase — the image leads

Web, portafolio, propuestas. La marca se aparta y el render respira.Web, portfolio, proposals. The brand steps back so the render breathes.

La decisión en 1 preguntaThe call in 1 question

¿Lo usa el equipo por dentro? Claro. ¿Lo ve un cliente? Showcase. Ante la duda, gana la legibilidad.Used by the team inside? Claro. Seen by a client? Showcase. When in doubt, legibility wins.

Idioma · siempre bilingüeLanguage · always bilingual

El toggle ES / EN cambia el manual entero al vuelo. Español primero, inglés a la par: nunca uno sin el otro.The ES / EN toggle switches the whole manual on the fly. Spanish first, English alongside: never one without the other.

03 · El origen del nombre03 · The origin of the name

3·6 no es un número // es una escala3·6 isn't a number // it's a scale

Tres lecturas caben en el mismo signo. Ninguna contradice a las otras.Three readings fit inside one sign. None contradicts the others.

MúsicaMusic

0.6 · 1.2 · 2.4 → 3.60.6 · 1.2 · 2.4 → 3.6

Octavas (2:1) y una quinta justa (3:2).Octaves (2:1) and a perfect fifth (3:2).

GeometríaGeometry

36° → φ36° → φ

Vértice del triángulo áureo.Vertex of the golden triangle.

EspacioSpace

3.6 m = doble altura3.6 m = double height

Donde la luz tiene sitio para caer.Where light has room to fall.

render 3·6 — doble altura, la luz cae

Y un 6 de marzo lo firmó.And a March 6th signed it.

04 · Quiénes somos04 · Who we are

No vendemos renders. Vendemos // el poder de la imagen.We don't sell renders. We sell // the power of the image.

Un estudio de visualización arquitectónica. Tres husos horarios en la sangre.An architectural visualization studio. Three time zones in our blood.

render 3·6
ÁmsterdamAmsterdam

UTC+1UTC+1

Nueva YorkNew York

UTC−5UTC−5

BogotáBogotá

UTC−5UTC−5

05 · Propósito, misión, visión05 · Purpose, mission, vision

Un movimiento // en tres tiempos.One movement // in three tempos.

Las imágenes tienen poder: hacen visible lo que aún no existe.Images hold power: they make visible what does not yet exist.

render 3·6
Propósito · Por quéPurpose · Why

Imaginar el futuro del entorno construido.Imagine the future of the built environment.

Misión · CómoMission · How

Dar identidad y atmósfera a cada imagen.Give identity and atmosphere to every image.

Visión · Hasta dóndeVision · How far

Ser referencia mundial en visualización.Be a global reference in visualization.

06 · Valores06 · Values

Lo que no negociamos // aunque nadie lo veaWhat we never negotiate // even when no one is looking

Seis convicciones. Una sola regla: la imagen manda.Six convictions. One rule: the image leads.

render 3·6
01 · Imagen soberana01 · Sovereign image

Una decide todo.One decides all.

02 · Emoción, no historias02 · Emotion, not stories

Sentir antes que entender.Feel before you understand.

03 · Detalle obsesivo03 · Obsessive detail

Luz, sombra, textura, color.Light, shadow, texture, color.

04 · Realismo con propósito04 · Realism with purpose

Verdad que cuenta algo.Truth that says something.

05 · Mano de pintor05 · A painter's hand

El render es arte.The render is art.

06 · Hecho para durar06 · Made to last

Envejecer bien, no seguir la moda.Age well, don't chase the trend.

07 · Posicionamiento07 · Positioning

Artistas de autor // fáciles de contratarAuthor-driven artists // effortless to hire

El sector: fondos negros y galerías mudas. Nosotros ocupamos el espacio raro —voz de pintor, claridad de proveedor serio.The field: black backgrounds and mute galleries. We hold the rarer ground —a painter's voice, a serious vendor's clarity.

render 3·6 — atmósfera de autor
La paridadThe parity

La calidad de render ya no distingue a nadie. Es piso, no techo.Render quality sets no one apart. It's the floor, not the ceiling.

La ventajaThe edge

La web como el oficio en vivo. No mostramos el resultado —revelamos cómo nace.The site as the craft, live. We don't show the result —we reveal how it's born.

Voz de autorAuthor's voice

Hablamos como pintores. Poético, atmosférico, seguro sin gritar.We speak like painters. Poetic, atmospheric, confident without shouting.

Claridad de servicioService clarity

Qué hacemos, cómo se cotiza, cuándo llega. La poesía no cuesta legibilidad.What we do, how it's quoted, when it lands. Poetry never costs clarity.

Seguimos la luzWe follow the light

Ámsterdam · Nueva York · Bogotá. Tres husos pintando la misma luz.Amsterdam · New York · Bogotá. Three time zones painting the same light.

▲ Sí somos▲ We are
  • Estudio con firma, no fábrica anónima de píxeles.A studio with a signature, not an anonymous pixel factory.
  • El proceso es el argumento.Process is the pitch.
  • Globales: seguimos la luz.Global: we follow the light.
  • Fáciles de contratar.Easy to hire.
■ No somos■ We are not
  • Un fondo negro más con miniaturas mudas.One more black background with mute thumbnails.
  • Scroll pasivo que solo muestra el final.Passive scroll that only shows the finished result.
  • Un commodity que compite por precio.A commodity competing on price.
  • Artistas que esconden el "cómo" y el "cuánto".Artists hiding the "how" and the "how much".
render 3·6 — el oficio a la vista

Frase de posición // otros entregan imágenes; nosotros te dejamos ver cómo la luz se vuelve una.Position line // others deliver images; we let you watch light become one.

08 · Manifiesto08 · Manifesto

// Creemos en el poder de las imágenesWe believe in the power of images

Esto no es un párrafo. Es una declaración. Léela en voz alta.This is not a paragraph. It is a declaration. Read it out loud.

Creemos en el poder de las imágenes. We believe in the power of images.

Luz, sombra, textura y color son nuestras herramientas. Light, shadow, texture and color are our tools.

Trabajamos como pintores — nuestro lienzo es un computador. We work like painters — our canvas is a computer.

Un render es una oportunidad para soñar, donde todo es posible. A render is an opportunity to dream, where everything is possible.

Es el vehículo donde nuestras fantasías se materializan. Renders are the vehicle where our fantasies materialize.

En este universo, las fantasías son realidades. In this universe, fantasies are realities.

Three Point Six · Ámsterdam · Nueva York · Bogotá Three Point Six · Amsterdam · New York · Bogotá
09 · Voz y tono09 · Voice & tone

Hablamos como pintamos // con luz, no con volumenWe speak the way we paint // with light, not volume

Poética y atmosférica, segura sin gritar. No subimos la voz: convencemos con la imagen y la palabra precisa.Poetic and atmospheric, confident without shouting. We don't raise our voice: we persuade with the image and the precise word.

render 3·6 — la voz de la luz
IdiomaLanguage

Español primero. Nuestra lengua de dominio. El inglés, para clientes internacionales —nunca una traducción tibia.Spanish first. Our home language. English for international clients —never a lukewarm translation.

CódigoCode

El código mezcla. Dominio en español, técnico en inglés. cliente junto a render(). Así pensamos.Code mixes. Domain in Spanish, technical in English. cliente beside render(). It's how we think.

▲ Sí — así suena▲ Yes — this is how it sounds
  • Evocador. La sensación, no solo el dato: la hora dorada, el peso de una sombra.Evocative. The sensation, not just the fact: golden hour, the weight of a shadow.
  • Concreto. Nombra materiales, horas, atmósferas.Concrete. Name materials, hours, atmospheres.
  • Con oficio. Que se note la mano, sin presumirla.Crafted. Let the hand show, without boasting.
  • Seguro y sereno. Frases limpias, verbos vivos, cero disculpas.Sure and serene. Clean sentences, living verbs, zero apologies.
■ No — así no■ No — not like this
  • Corporativo frío. Nada de "soluciones de valor agregado". Hacemos imágenes.Cold corporate. No "value-added solutions". We make images.
  • IA genérica. Evita "en el mundo actual", "sin duda". Suena a nadie.Generic AI. Avoid "in today's world", "without a doubt". Sounds like no one.
  • Sobre-explicar. Si la imagen lo dice, el texto calla.Over-explaining. If the image says it, the text stays quiet.
  • Gritar. Ni mayúsculas, ni exclamaciones en fila.Shouting. No caps, no rows of exclamation marks.
● Frases ancla — el corazón de la voz● Anchor phrases — the heart of the voice

«The power of images.»«The power of images.»

«Trabajamos como pintores.»«We work like painters.»

«Luz, sombra, textura y color son nuestras herramientas.»«Light, shadow, texture and color are our tools.»

«Los renders son el vehículo donde nuestras fantasías se materializan.»«Renders are the vehicle where our fantasies materialize.»

render 3·6 — luz, sombra, textura y color
// 02

El sistema visualThe visual system

Las herramientas: logo, color, tipografía, retícula y movimiento — con qué se construye todo lo que se ve.The tools: logo, color, type, grid and motion — what everything visible is built with.

10 · Logotipo · Versiones10 · Logotype · Versions

// El logo tiene versiones; no tiene tipeosThe logo has versions; it has no typings

Wordmark oficial: 3·6 RENDER STUDIO. Pincelada, punto ● literal, sans limpia. Asset cerrado: se usa; no se rehace.Official wordmark: 3·6 RENDER STUDIO. Brushwork, literal ● dot, clean sans. A closed asset: you use it; you don't remake it.

render 3·6 render studio

// The power of images. El wordmark firma; la imagen manda.// The power of images. The wordmark signs; the image leads.

La regla que mandaThe rule that governs

Siempre el asset oficial. Jamás tecleado.Always the official asset. Never typed.

El punto ● no es un carácter; la pincelada no es una fuente. Teclearlo produce una falsificación cercana, y lo cercano es lo que más daña. Se inserta el archivo. Punto.The ● is not a character; the brushwork is not a font. Typing it yields a near-forgery, and the near-miss damages most. You place the file. Full stop.

Cómo se traeHow it is brought in

Se copia por códigoCopied by code

Verbatim desde el asset canónico, nunca a mano. Un carácter distinto rompe el ícono (ya ocurrió).Verbatim from the canonical asset, never by hand. One differing character breaks the icon (it happened).

Cómo se compruebaHow it is checked

Se verifica por hashVerified by hash

Hash (md5/sha) contra el original. Coincide = es el logo. No coincide = un parecido. La marca no acepta parecidos.Hash (md5/sha) against the original. Match = the logo. No match = a resemblance. The brand accepts no resemblances.

Las versiones legítimasThe legitimate versions

Positivo · NegativoPositive · Negative

01 · Positivo01 · Positive

Tinta sobre claroInk on light

Por defecto. Crema o blanco, documentos, papelería, fondos tranquilos.Default. Cream or white, documents, stationery, calm grounds.

02 · Negativo02 · Negative

Blanco sobre oscuro o imagenWhite on dark or image

Oscuro, portadas, render. No es el positivo con filtro: es su propio archivo.Dark, covers, render. Not the positive under a filter: its own file.

Cuándo cada unaWhen to use each

Fondo claroLight ground

Crema, blanco, pastel → positivo en tinta.Cream, white, pastel → ink positive.

Fondo oscuroDark ground

Tinta, rojo #850110, negro cine → negativo blanco.Ink, red #850110, cinema black → white negative.

Sobre imagenOver image

Render → negativo blanco, en zona limpia. Nunca en el detalle.Render → white negative, in a clean zone. Never in the detail.

wordmark blanco sobre render 3·6

Negativo blanco sobre render: zona limpia, aire, jamás incrustado en el detalle.White negative over render: clean zone, air, never embedded in the detail.

ReducidoReduced

3·6 — favicon, sello, avatar, esquina3·6 — favicon, seal, avatar, corner

Sin espacio para el lockup, el 3·6 con su ● literal es la marca reducida. RENDER STUDIO se omite, nunca se abrevia. La regla no cambia: se inserta, se copia por código, se verifica por hash. No se escribe.Without room for the lockup, 3·6 with its literal ● is the reduced mark. RENDER STUDIO is dropped, never abbreviated. The rule holds: placed, copied by code, verified by hash. Not typed.

11 · Construcción y respeto11 · Construction & clear space

La geometría manda // el logo respiraGeometry rules // the logo breathes

Con regla, no a ojo. Alrededor del wordmark vive un área de respeto donde nada entra. No son milímetros fijos: se derivan del logo y escalan con él.By rule, not by eye. Around the wordmark lives a clear space where nothing enters. Not fixed millimeters: derived from the logo, scaling with it.

wordmark 3·6 con aire sobre render

El aire es parte del logo, no un lujo negociable.The air is part of the logo, not a negotiable luxury.

La unidadThe unit

x = altura del "6"x = height of the "6"

Área de respeto = x por cada lado. El logo crece, x crece, el margen se recalcula solo.Clear space = x on every side. The logo grows, x grows, the margin recalculates itself.

Dentro no entra nada: ni titular, ni imagen, ni firma, ni el borde de la página.Nothing enters: no headline, no image, no signature, no page edge.

Área de respeto = x por ladoClear space = x per side
x xxxx

Línea punteada: límite del área de respeto. Bloque oscuro: el asset oficial del wordmark, nunca tecleado.Dotted line: clear-space boundary. Dark block: the official wordmark asset, never typed.

No entra textoNo text enters

Ni un titular cercaNo headline nearby

Título, pie, URL: si estorban, se aleja el texto. Nunca se recorta el aire.Title, caption, URL: if they crowd, move the copy. Never trim the air.

No entra imagenNo image enters

Sin fotos ni figurasNo photos or figures

Ni render, ni ▲●■, ni textura. Sobre foto: versión blanca, margen intacto.No render, no ▲●■, no texture. Over photo: white version, margin intact.

No entra el bordeNo page edge

Nunca a sangreNever to the trim

Página, recuadro, botón: la misma distancia x. El logo no se acorrala.Page, box, button: the same distance x. The logo is never cornered.

CorrectoCorrect

Margen x completo en los cuatro lados. El logo respira.Full x margin on all four sides. The logo breathes.

IncorrectoIncorrect

Un titular cae dentro del margen y ahoga el logo. Prohibido.A headline drops inside the margin and smothers the logo. Forbidden.

En una línea: una sola unidad —la altura del 6— gobierna el aire alrededor del logo. Se mide, no se estima; y ese aire es intocable.In one line: a single unit —the height of the 6— governs the air around the logo. It is measured, not guessed; and that air is untouchable.

12 · Mínimos y fondos12 · Minimums & backgrounds

Respira // o desapareceIt breathes // or it vanishes

Cuán pequeño y sobre qué fondo. Antes que nada: se coloca el asset oficial, nunca se teclea.How small, and over what. Before anything: place the official asset, never type it.

render 3·6 — fondo sobre el que vive la marca
Cuán pequeñoHow small
PantallaOn screen

120 px de ancho120 px wide

120 PX

Lockup completo ≥ 120 px. Para favicon o sello, el isotipo (solo 3·6) baja a 24 px.Full lockup ≥ 120 px. For favicon or stamp, the isotype (3·6 only) goes to 24 px.

ImpresoIn print

24 mm de ancho24 mm wide

24 MM

Lockup ≥ 24 mm; isotipo hasta 8 mm. Con tinta plana, súbelo: el punto se cierra primero.Lockup ≥ 24 mm; isotype down to 8 mm. Flat ink? Size up: the dot closes first.

Bajo el mínimo cae «RENDER STUDIO» y queda el isotipo. Nunca se estira ni se separan sus partes.Below the minimum, “RENDER STUDIO” drops and the isotype remains. Never stretch it or split its parts.

Sobre qué fondoOver what background

Positivo sobre claro. Negativo sobre oscuro o render. Regla única: siempre contraste.Positive on light. Negative on dark or render. One rule: always contrast.

PositivoPositive

● Tinta sobre claro sólido. Versión por defecto.Ink on solid light. The default.

NegativoNegative

● Blanco sobre oscuro sólido. Portadas y cierres.White on solid dark. Covers & closings.

Sobre renderOver render

● Negativo + capa hacia el logo, en la zona más tranquila.Negative + scrim toward the logo, in the calmest area.

Nunca asíNever like this

Si el ojo se esfuerza para separar logo y fondo, está mal puesto.If the eye strains to tell logo from background, it's placed wrong.

✗ Bajo contraste✗ Low contrast

Fondo del mismo valor: el punto se apaga.Same-value background: the dot goes dull.

✗ Imagen ruidosa✗ Noisy image

Directo sobre foto agitada, sin capa.Straight over a busy photo, no scrim.

✗ Versión cambiada✗ Wrong version

Negativo sobre claro: casi invisible.Negative on light: nearly invisible.

Regla de bolsillo: si dudas si hay contraste, no lo hay. Pon la capa, cambia de versión o mueve el logo. El logo siempre gana en legibilidad.Pocket rule: unsure there's contrast? There isn't. Add the scrim, switch version or move the logo. The logo always wins on legibility.

13 · Usos incorrectos del logo13 · Logo misuse

Lo que // no debe pasarWhat // must never happen

El logo es un asset, no una fuente. Cada regla nace de feedback real. Si dudas: archivo oficial, tal cual.The logo is an asset, not a font. Every rule comes from real feedback. In doubt: official file, as-is.

render 3·6 — la marca vive limpia sobre la imagen
El peor · NuncaThe worst · Never

✕Recrearlo tecleando✕Retyping it

3.6 RENDER STUDIO

Cualquier fuente NO es el logo. El 3·6 son trazos de pincel: solo existen en el asset.Any font is NOT the logo. The 3·6 are brush strokes: they only exist in the asset.

NuncaNever

✕Deformar o estirar✕Distort or stretch

Sin escalado no proporcional. Siempre desde la esquina, proporción bloqueada.No non-proportional scaling. From a corner, ratio locked.

NuncaNever

✕Recolorear✕Recolor it

Solo tinta o blanco. Ni rojo, ni ámbar, ni degradado. El color lo pone la imagen.Ink or white only. No red, amber or gradient. Color comes from the image.

NuncaNever

✕Rotarlo o inclinarlo✕Rotate or tilt it

Siempre horizontal, a 0°. La lectura recta es parte de la firma.Always horizontal, at 0°. Level reading is part of the signature.

NuncaNever

✕Sombras y efectos✕Shadows & effects

Plano y limpio. Nada de sombra, bisel, brillo, 3D ni texturas.Flat and clean. No shadow, bevel, glow, 3D or textures.

NuncaNever

✕Sin contraste✕No contrast

Si el fondo se lo traga, va la versión que sí contrasta o una caja limpia detrás.If the background swallows it, use the version that contrasts, or a clean plate behind.

NuncaNever

✕Invadir el área de respeto✕Crowd the clear space

El aire alrededor no es negociable. Nada entra en el margen del wordmark.The air around it isn't negotiable. Nothing enters the wordmark's margin.

NuncaNever

✕Reprocesar el asset✕Re-process the asset

Nada de captura ni upscaling. Se parte del vector oficial; si falta un tamaño, se pide.No screenshots or upscaling. Start from the official vector; need a size? request it.

render 3·6

La regla que resume todas ● el logo no se rehace. Se usa el archivo oficial, tal cual, o se pide. Lo demás es uso incorrecto.The rule that sums up the rest ● the logo is never remade. Use the official file, as-is, or ask for it. The rest is misuse.

14 · Color

Paleta // clic para copiarPalette // click to copy

Regla de oro: el color identifica, no decora. El neutro construye la interfaz; el color vive en el dato (semántico para alertar, pastel para identificar) o en la luz del render.Golden rule: color identifies, it doesn't decorate. Neutrals build the interface; color lives in the data (semantic to alert, pastel to identify) or in the light of the render.

Neutros de marcaBrand neutrals

AcentosAccents

Semánticos (solo estados)Semantic (states only)

Pasteles (identificar datos · texto siempre tinta)Pastels (identify data · text always ink)

15 · Color: proporción y roles15 · Color: proportion & roles

Un color // reina por secciónOne color // reigns per section

El color no adorna: identifica. Base neutra, acento a cuentagotas. Una sección es amarilla, o azul, o roja — nunca dos.Color doesn't decorate: it identifies. Neutral base, accent in drops. A section is yellow, or blue, or red — never two.

render 3·6 — la luz tiñe la escena de un solo tono
90 / 1090 / 10

La proporciónThe proportion

90% neutro, 10% acento. Si el color ocupa más, deja de señalar y grita.90% neutral, 10% accent. If color takes more, it stops pointing and shouts.

Un solo tonoA single tone

El acento reinanteThe reigning accent

Uno del trío —▲ amarillo, ● azul, ■ rojo— de principio a fin.One of the trio —▲ yellow, ● blue, ■ red— start to finish.

ReservadoReserved

El ámbar es del sistemaAmber belongs to the system

#FDB92B solo como divisor a sangre. Nunca texto, íconos ni datos.#FDB92B only as a full-bleed divider. Never text, icons or data.

La luz pone el color // la interfaz noLight brings the color // the interface doesn't

En Showcase el color no lo pone la marca: lo pone la luz del render. Atardecer tiñe de ámbar; noche, de azul. La UI se calla.In Showcase color isn't set by the brand: it's set by the render's light. Dusk tints amber; night, blue. The UI stays quiet.

render 3·6 al atardecer — la página se tiñe de ámbar
Base · Claro MinimalBase · Claro Minimal

Crema #F2F0EB + tinta #1B1B18. El color se guarda para el dato. Texto sobre pastel siempre en tinta.Cream #F2F0EB + ink #1B1B18. Color is saved for data. Text on pastel always ink.

render 3·6 nocturno — la página se tiñe de azul
Público · ShowcasePublic · Showcase

La imagen es soberana; el color lo dicta ella. El acento vive solo en el marco: metadatos, //, viñetas del trío.The image is sovereign; it dictates the color. The accent lives only in the frame: metadata, //, trio bullets.

Nunca dos tonos // en un bloqueNever two tones // in one block

La regla firma de esta sección. Dos colores no es "más vivo": es ruido. El color deja de significar.The section's signature rule. Two colors isn't "livelier": it's noise. Color stops meaning anything.

CorrectoCorrect
Sección · Un tonoSection · One tone
Azul // de punta a puntaBlue // end to end

Eyebrow, marcador y realce comparten el azul. El ojo lee "una unidad".Eyebrow, marker and highlight share the blue. The eye reads "one unit".

IncorrectoIncorrect
Sección · Dos tonosSection · Two tones
Rojo con // amarilloRed with a yellow //

✕ Dos señales peleando: el color deja de identificar.✕ Two signals fighting: color stops identifying.

Voz del fundadorFounder's note

«El color no es adorno: es una firma — y una firma no se hace con tres bolígrafos a la vez.»"Color isn't decoration: it's a signature — and you don't sign with three pens at once."

En una líneaIn one line

90% neutro, 10% acento. Un color del trío por sección. Ámbar solo para dividir. Cuando dudes, quita color.90% neutral, 10% accent. One trio color per section. Amber only to divide. When in doubt, remove color.

16 · COLOR — CONTRASTE16 · COLOR — CONTRAST

// El contraste es un compromiso, no un gustoContrast is a commitment, not a taste

Cada par fondo/texto cumple AA. Cuando dudamos, subimos el contraste — nunca lo bajamos.Every background/text pair meets AA. When in doubt we raise contrast — never lower it.

render 3·6 — texto legible sobre imagen sin veladura
REGLA DURAHARD RULE

Pastel = tintaPastel = ink

Sobre cualquier pastel, texto en tinta #1B1B18. Nunca blanco.On any pastel, text in ink #1B1B18. Never white.

FOCOFOCUS

Foco siempre visibleFocus always visible

Anillo de foco con contraste propio. No se quita el outline sin sustituirlo.Focus ring with its own contrast. Outline never removed without replacing it.

ESTADOSTATE

Nunca solo por colorNever by color alone

Forma + palabra: ▲ pendiente, ● activo, ■ detenido.Shape + word: ▲ pending, ● active, ■ stopped.

PARES FONDO / TEXTO VÁLIDOSVALID BACKGROUND / TEXT PAIRS

CREMA · TINTACREAM · INK

Aa — cuerpo baseAa — base body

#F2F0EB / #1B1B18 · par por defecto.#F2F0EB / #1B1B18 · default pair.

TINTA · BLANCOINK · WHITE

Aa — sobre oscuroAa — over dark

#1B1B18 / #FFFFFF · blanco solo aquí y sobre imagen.#1B1B18 / #FFFFFF · white only here and over image.

ÁMBAR · TINTAAMBER · INK

Aa — dato / divisorAa — data / divider

#FBCB4C / #1B1B18 · texto en tinta.#FBCB4C / #1B1B18 · ink text.

AZUL · TINTABLUE · INK

Aa — categoríaAa — category

#5C93CE / #1B1B18 · nunca blanco.#5C93CE / #1B1B18 · never white.

SEÑAL · BLANCOSIGNAL · WHITE

Aa — solo alertarAa — alert only

#E8443A / #FFFFFF · reservado para alarma.#E8443A / #FFFFFF · reserved for alarm.

FIRMA · BLANCOSIGNATURE · WHITE

Aa — portadaAa — cover

#850110 / #FFFFFF · solo en portadas.#850110 / #FFFFFF · covers only.

✕ Prohibido: pastel con texto blanco. El azul enlace solo como enlace, nunca de fondo.✕ Forbidden: pastel with white text. Link blue is a link only, never a background.

MOVIMIENTOMOTION

Respetamos prefers-reduced-motionWe honor prefers-reduced-motion

Menos movimiento: transiciones cortas o nulas. La información nunca depende de una animación.Less motion: short or no transitions. Meaning never depends on an animation.

PARIDAD TÁCTILTOUCH PARITY

Lo del ratón, con el dedoWhat the mouse does, the finger does

Sin acciones solo-hover. Foco, estado y contraste iguales en táctil y teclado.No hover-only actions. Focus, state and contrast equal on touch and keyboard.

La accesibilidad no es una casilla al final: es la misma sustracción de siempre — quitar ruido para que el dato respire.Accessibility isn't a box at the end: it's the same old subtraction — remove noise so the data can breathe.

17 · Tipografía17 · Typography

Dos registros, un puenteTwo registers, one bridge

El puente entre ambas pieles es Inter. El display cambia según la piel — y ahí vive el carácter.The bridge between both skins is Inter. The display changes with the skin — and that's where character lives.

Showcase · display — grotesco condensado (NewNord → Anton)Showcase · display — condensed grotesque (NewNord → Anton)
Luz, materia
y silencioLight, matter
and silence
Showcase · serif poético (Sabon → Fraunces)Showcase · poetic serif (Sabon → Fraunces)
Renders are an opportunity to dream.
Claro Minimal · display — Space Grotesk 400 (manda el tamaño)Claro Minimal · display — Space Grotesk 400 (size leads)
Registro de horasTime tracking
Común · cuerpo — Inter 400/500/600Common · body — Inter 400/500/600
La jerarquía se construye con tipografía y espacio, no con cajas de color ni sombras. El tamaño da la jerarquía; el peso, solo en Showcase.Hierarchy is built with type and space, not color boxes or shadows. Size gives hierarchy; weight, only in Showcase.
Microetiqueta · 10px · tracking 2pxMicro-label · 10px · tracking 2px

18 · ESCALA TIPOGRÁFICA18 · TYPE SCALE

// El tamaño mandaSize leads

La jerarquía la da el tamaño, no el peso. Una sola escala de cinco peldaños; en Claro suena grande y silenciosa (peso 400), en Showcase la misma escala se pronuncia con grotesco pesado en mayúsculas.Hierarchy comes from size, not weight. One five-step scale; in Claro it sounds large and quiet (weight 400), in Showcase the same scale is pronounced with heavy condensed caps.

render 3·6
DISPLAY · 3.4emDISPLAY · 3.4em

AaAa

Portadas, aperturas, un solo enunciado por página. Peso 400, nunca en párrafo.Covers, openers, one statement per page. Weight 400, never in body copy.

TÍTULO · 2emHEADING · 2em

AaAa

Abre sección —el "//" vive aquí—. Ordena la lectura sin gritar.Opens a section —the "//" lives here—. Orders the reading without shouting.

BAJADA · 1.35emLEDE · 1.35em

Aa bb ccAa bb cc

Puente entre título y cuerpo. Una o dos frases, respiración amplia.Bridge between heading and body. One or two sentences, wide breath.

CUERPO · 1em (13px)BODY · 1em (13px)

Aa bb cc dd ee ff ggAa bb cc dd ee ff gg

La medida de lectura no cambia: conserva ~65ch por línea, siempre.Reading measure never changes: keep ~65ch per line, always.

MICRO · 10px · TRACKING 1.8–2pxMICRO · 10px · TRACKING 1.8–2px

MICROETIQUETA · CIFRAS TABULARES 0123456789MICRO-LABEL · TABULAR FIGURES 0123456789

El escalón más bajo: eyebrows, metadatos, pies. En MAYÚSCULAS y con tracking; las cifras van en tabular-nums para que las columnas alineen.The lowest step: eyebrows, metadata, captions. Uppercase and tracked; figures set in tabular-nums so columns align.

HAZ · JERARQUÍA POR TAMAÑODO · HIERARCHY BY SIZE

AaAa aa bb ccaa bb cc

Display grande contra cuerpo pequeño. El salto de tamaño hace el trabajo; el peso se queda en 400.Big display against small body. The size jump does the work; weight stays at 400.

EVITA · JERARQUÍA POR PESODON'T · HIERARCHY BY WEIGHT

AaAa aa bb ccaa bb cc

Mismo tamaño, todo en negrita para "destacar". No hay jerarquía: solo ruido. Engorda el título, no lo agranda.Same size, everything bold to "stand out". No hierarchy, only noise. It fattens the heading instead of growing it.

Una escala, no diez tamañosOne scale, not ten sizes

Cinco peldaños bastan: display, título, bajada, cuerpo, micro. Si buscas un intermedio, casi siempre falta espacio, no otro tamaño.Five steps suffice: display, heading, lede, body, micro. If you reach for an in-between size, what's usually missing is space, not another size.

El cuerpo es sagradoThe body is sacred

El texto de lectura conserva su medida e interlínea pase lo que pase. Se agranda el título, no el párrafo.Reading text keeps its measure and leading no matter what. Grow the heading, not the paragraph.

Peso como excepciónWeight as exception

En Claro el peso apenas se mueve. En Showcase el peso alto acompaña al tamaño en los grotescos —pero el que decide sigue siendo el tamaño.In Claro weight barely moves. In Showcase heavy weight rides along with size in the condensed caps —but size still decides.

19 · Reglas tipográficas19 · Type rules

// Cómo se comporta la letraHow the type behaves

Inter cose las dos pieles: el cuerpo nunca se toca. Lo único que cambia es el display.Inter stitches both skins: the body copy never changes. Only the display does.

Cuerpo · siempreBody · always

Inter

Texto, tablas, datos y etiquetas en las dos pieles. La voz neutra: se lee, no se nota.Text, tables, data and labels across both skins. The neutral voice: it reads, it doesn't show off.

Display · Claro MinimalDisplay · Claro Minimal

Space Grotesk 400

Interno, sin bold: manda el tamaño. Si algo pesa, crece; no engorda.Internal, no bold: size does the ranking. If something must weigh more, it grows; it doesn't fatten.

Display · ShowcaseDisplay · Showcase

Grotesco condensadoCondensed grotesque

Público: condensado pesado en mayúsculas, apilado. El color lo pone la imagen, no la letra.Public: heavy condensed caps, stacked. Colour comes from the image, never from the type.

render 3·6 — la voz alta de la marca vive sobre la imagen

La voz alta vive sobre la imagen: el display pesa, pero el color y la emoción los pone el render. La letra nunca compite con la foto.The loud voice lives over the image: the display carries weight, but colour and emotion come from the render. Type never competes with the photo.

El serif editorialThe editorial serif

Solo para lo poéticoOnly for the poetic

Un serif tipo Sabon solo en momentos poéticos: una frase, un manifiesto, un respiro. Nunca para señalética ni datos.A Sabon-like serif only in poetic moments: one line, a manifesto, a breath. Never for wayfinding or data.

«We work like painters.»"We work like painters."

MicroetiquetasMicrolabels

Metadatos en mayúsculasMetadata in caps

Mayúsculas con tracking abierto para los metadatos: 10px, tracking 1.8–2px, cifras tabulares.Caps with open tracking for metadata: 10px, 1.8–2px tracking, tabular figures.

PROJECTPROJECT · CLIENTCLIENT · LOCATIONLOCATION · YEARYEAR

HazloDo

El prefijo // abreThe // prefix opens

Las secciones se abren con //. Es el marcador editorial que dice «aquí empieza algo».Sections open with //. The editorial marker that says "something begins here."

No lo hagasDon't

Nada de subrayadosNo underlines

El subrayado se reserva al enlace. El énfasis lo dan el tamaño y el espacio, no una línea debajo.The underline belongs to the link. Emphasis comes from size and space, not a line underneath.

20 · Retícula editorial20 · Editorial grid

La página // es otro renderThe page // is another render

Una sola retícula para impresos, portafolio y propuestas. La página no compite con la obra: la enmarca y la deja respirar.One grid for print, portfolio and proposals. The page never competes with the work: it frames it and lets it breathe.

Render a página completa 3·6

Página a sangre: el render manda, el texto entra por encima solo si hace falta.Full-bleed page: the render leads, type enters on top only when needed.

Anatomía // de la retículaAnatomy // of the grid

ColumnasColumns

12 → 5–7

Rejilla de 12; el cuerpo ocupa 5–7, nunca las doce. Línea de 60–70 caracteres.12-column base; body sits in 5–7, never all twelve. Line of 60–70 characters.

MárgenesMargins

≥ 18–24 mm

Aire generoso en A4; más al lomo si va cosido. El margen es marco, no desperdicio.Generous air on A4; larger gutter if bound. The margin is a frame, not waste.

PanelesPanels

Metadatos que flotanFloating metadata

Coordenadas, hora, fase en cifras tabulares — panel semitransparente arriba-derecha, jamás sobre el foco.Coordinates, time, phase in tabular figures — semi-transparent panel top-right, never over the focal point.

Ritmo // por colorRhythm // by color

Un portafolio es secuencia, no fila. Cuatro tipos de página para que la vista descanse y el render vuelva a golpear.A portfolio is a sequence, not a row. Four page types so the eye rests and the render lands again.

  1. a sangrefull-bleedEl render a página completa: el golpe.Full-page render: the punch.
  2. oscuradarkTinta para una cifra o una frase. Baja las luces.Ink for one figure or one line. Dims the lights.
  3. blancawhiteArgumento en columnas: el descanso legible.Argument in columns: the readable rest.
  4. banda ámbaramber bandÁmbar a sangre: separador de capítulo.Full-bleed amber: chapter divider.
Render a sangre en secuencia 3·6 Render a sangre en secuencia 3·6

Golpe → descanso → golpe: la secuencia hace que cada render vuelva a impactar.Punch → rest → punch: the sequence makes each render land again.

SiempreAlways

● Texto sobre render solo con panel o degradado detrás. ● Folios y metadatos en cifras tabulares. ● Microetiqueta vertical al borde, gris. ● Título grande abajo-izquierda.● Type over a render only with a panel or gradient behind. ● Folios and metadata in tabular figures. ● Vertical microlabel at the edge, grey. ● Large title bottom-left.

NuncaNever

● Texto blanco crudo sobre render claro. ● Cajas opacas tapando la obra. ● Márgenes apretados o cuerpo a todo el ancho. ● Wordmark tecleado: siempre el asset oficial.● Raw white text over a bright render. ● Opaque boxes covering the work. ● Tight margins or full-width body. ● Typed wordmark: always the official asset.

21 · Retícula de pantalla21 · Screen grid

// La pantalla se llena, no se centraThe screen fills — it doesn't hide in the middle

Regla firma del fundador: layout fluido y calibrado. Flex y grid con gap, ancho amplio, tres anchuras resueltas. Nunca una columna estrecha centrada que deje los costados muertos en PC.Founder's signature rule: fluid, calibrated layout. Flex and grid with gap, generous width, three breakpoints resolved. Never a narrow centred column leaving dead margins on desktop.

render 3·6 a sangre — el plano ocupa todo el ancho

Regla hecha imagen: el plano ocupa todo el ancho, sin franjas muertas. Así se siente una vista calibrada.The rule as an image: the plane takes the full width, no dead bands. That's what a calibrated view feels like.

PC · escritorioPC · desktop

Ancho amplioWide by design

Contenedor a max-width ≈1500px con padding clamp lateral. El aire vive en el gap entre piezas, no en dos franjas vacías a los lados.Container at max-width ≈1500px with a clamp side padding. Breathing room lives in the gap between pieces, not in two empty side bands.

Tablet · iPadTablet · iPad

Se recomponeRecomposed

Las rejillas .g3 caen a dos columnas; .g2 a una. Recalibrar, no rebotar: la página sigue viéndose resuelta, con la misma tensión.Grids .g3 drop to two columns; .g2 to one. Recalibrate, don't bounce: the page still reads as resolved, same tension.

MóvilMobile

Base táctilTouch baseline

Inputs ≥16px (sin zoom de iOS), safe-areas, touch-action declarado y alturas en dvh (no vh) para que la barra del navegador no rompa el alto.Inputs ≥16px (no iOS zoom), safe-areas, explicit touch-action, and heights in dvh (not vh) so the browser bar never breaks layout.

La única columna estrechaThe one narrow column

La excepción a "llenar la pantalla" es el texto de lectura: párrafos largos conservan ~65ch de medida para que el ojo no se canse. Todo lo demás —tarjetas, datos, galerías— usa el ancho completo.The exception to "fill the screen" is reading text: long paragraphs keep a ~65ch measure so the eye doesn't tire. Everything else — cards, data, galleries — takes the full width.

Feedback real del fundadorFounder feedback, verbatim

«En PC sobra demasiado espacio en los costados.» Ese es el defecto a cazar antes de dar por buena una vista: si en un monitor ancho quedan dos franjas vacías, el layout no está calibrado todavía."On desktop there's far too much space on the sides." That's the defect to hunt before a view ships: if a wide monitor shows two empty bands, the layout isn't calibrated yet.

Correcto vs. incorrectoRight vs. wrong

● Correcto● Right

Tres piezas al ancho, gap parejo, márgenes finos y proporcionados. El contenido respira dentro, no a los lados.Three pieces edge to edge, even gap, thin proportional margins. Content breathes inside, not on the flanks.

■ Incorrecto■ Wrong

Columna estrecha centrada: dos franjas muertas a los costados en PC. Responsive de rebote, no calibrado. Esto es lo que evitamos.Narrow centred column: two dead bands on desktop. Bounce-responsive, not calibrated. This is what we avoid.

render 3·6 — composición al ancho completo, misma tensión
FormaForm

Radios & sombraRadii & shadow

Tarjetas 14px, píldoras/botones/toggles 999px. Sombra solo al hover. Sin bordes 2px+, sin gradientes, sin glassmorphism.Cards 14px, pills/buttons/toggles 999px. Shadow on hover only. No 2px+ borders, no gradients, no glassmorphism.

999PX
EspacioSpace

Aire y retículaAir and grid

Mucho aire. Grillas de tarjetas 5→3→2→1 col. Separadores = línea 1px, nunca cajas. La respiración es parte del lujo.Plenty of air. Card grids 5→3→2→1 col. Dividers = 1px line, never boxes. Breathing room is part of the luxury.

Motion tokens

Curvas & tiemposCurves & timing

Claro: 0.12–0.15s ease, único desplazamiento translateY(-1px). Showcase: motion protagonista pero disciplinado. Siempre con prefers-reduced-motion.Claro: 0.12–0.15s ease, a single translateY(-1px) shift. Showcase: motion as protagonist but disciplined. Always with prefers-reduced-motion.

// 03

La aplicaciónThe application

La obra: cómo vive el sistema en la imagen, la web, el 3D, la papelería, las redes y las propuestas.In practice: how the system lives across image, web, 3D, stationery, social and proposals.

22 · Imagen: principios22 · Image: principles

// La imagen es soberanaThe image is sovereign

Cuando entra el render, la marca se aparta. No competimos con la imagen: la servimos. Silencio alrededor para que la luz hable.When the render enters, the brand steps aside. We do not compete with it: we serve it. Silence around it so the light can speak.

Render soberano a sangre 3·6
TesisThesis

Trabajamos como pintoresWe work like painters

El lienzo es un computador. El fotorrealismo es el lenguaje, no la meta: el render como oportunidad de soñar.The canvas is a computer. Photorealism is the language, not the goal: the render as a chance to dream.

LinajeLineage

Junto a la pintura clásicaBeside classical painting

Canaletto, Piero della Francesca: la misma obsesión por la luz y el aire. No es nostalgia, es linaje.Canaletto, Piero della Francesca: the same obsession with light and air. Not nostalgia — lineage.

Los cuatro principiosThe four principles

01 · Luz01 · Light

La luz es el autorLight is the author

Antes que el material, decidimos de dónde viene la luz. La hora del día es una tesis emocional.Before material, we decide where light comes from. The hour of day is an emotional thesis.

02 · Atmósfera02 · Atmosphere

El aire tiene cuerpoAir has a body

Polvo, bruma, profundidad. La atmósfera es la distancia hecha visible — y la distancia es sentimiento.Dust, haze, depth. Atmosphere is distance made visible — and distance is feeling.

03 · Narrativa03 · Narrative

Alguien acaba de irseSomeone just left

Una taza tibia, una puerta entreabierta. El espacio no está vacío: está a punto de habitarse.A warm cup, a door ajar. The space is not empty: it is about to be inhabited.

04 · Tiempo04 · Time

El paso de las horasThe passing of hours

Sombras que se alargan, materiales que envejecen. No el instante congelado: el justo antes de cambiar.Lengthening shadows, aging materials. Not the frozen instant: the one just before it changes.

Atmósfera y luz en render 3·6
HacerDo

Dejar respirar la imagen a sangre. Que la luz cuente. Editar sin miedo: menos elementos, más intención.Let the image breathe full-bleed. Let light tell it. Edit without fear: fewer elements, more intention.

EvitarAvoid

Marca gruesa sobre el render. Saturar por saturar. El fotorrealismo correcto y sin alma.Heavy brand over the render. Saturation for its own sake. Correct, soulless photorealism.

RecordarRemember

The power of images: la imagen manda, nosotros la acompañamos.The power of images: the image leads, we accompany it.

La imagen lidera — render 3·6
23 · Imagen: taxonomía23 · Image: taxonomy

Seis ejes // la galería se filtra solaSix axes // the gallery filters itself

Cada imagen entra etiquetada por seis ejes. En la web esos ejes son filtros: el visitante arma su propia lectura.Every image enters tagged along six axes. On the site those axes become filters: the visitor builds their own reading.

render 3·6 — interior nocturno
Eje 01 · VistaAxis 01 · View

Dónde está la cámaraWhere the camera sits

Exterior · Interior · Aérea. El punto de vista antes que el estilo.Exterior · Interior · Aerial. Vantage point before style.

Eje 02 · LuzAxis 02 · Light

La hora que pintaThe hour that paints

Día · Tarde · Noche · Hora azul. La luz no ilumina: decide.Day · Evening · Night · Blue hour. Light doesn't lit — it decides.

Eje 03 · TipoAxis 03 · Type

Qué se construyeWhat is built

Residencial · Comercial · Hospitality · Cultural. El programa del proyecto.Residential · Commercial · Hospitality · Cultural. The project's program.

Eje 04 · UbicaciónAxis 04 · Location

De dónde es la escenaWhere the scene lives

Ámsterdam · Nueva York · Bogotá —nuestras sedes— y cualquier ciudad. Filtro, no límite.Amsterdam · New York · Bogotá —our studios— and any city. A filter, not a border.

Eje 05 · PremioAxis 05 · Award

Lo que ganó, en formasWhat it won, in shapes

1.º1st
2.º2nd
FinalistaFinalist

▲ oro · ● plata · ■ finalista. El trío de la marca como podio.▲ gold · ● silver · ■ finalist. The brand trio as a podium.

Eje 06 · ClienteAxis 06 · Client

Para quién se hizoWho it was made for

Estudio, desarrollador, agencia, marca. Eje discreto: solo con permiso del cliente.Studio, developer, agency, brand. A discreet axis: shown only with the client's consent.

La regla: un eje es faceta, no carpeta. Una imagen vive a la vez en interior · noche · hospitality · Nueva York · ● plata y aparece en cada filtro que la reclame. Ordena la obra más fuerte, no la más reciente.The rule: an axis is a facet, not a folder. One image lives at once in interior · night · hospitality · New York · ● silver and surfaces in every filter that claims it. Sorted by the strongest work, not the newest.

24 · Imagen: entrega24 · Image: delivery

El bucket render // cómo nace y se entrega la imagenThe bucket render // how the image is born and delivered

Cada imagen nace por buckets: del negro, al marco ámbar que la calcula, a la geometría nítida. Se entrega a 5000 px, y la retícula tenue de las baldosas —gris clarito— queda como firma de que nació renderizada. Debajo, el lenguaje Showcase en vivo.Every image is born by buckets: from black, to the amber frame that computes it, to crisp geometry. It ships at 5000 px, and the faint tile grid —light grey— remains as the signature that it was rendered. Below, the Showcase language, live.

Piel B — el ADN del portafolioSkin B — the portfolio's DNA

Showcase // el lenguaje que ya construisteShowcase // the language you already built

La imagen es soberana; la web cuenta el oficio. Se construye sobre tu portafolio: el trío geométrico, el punto ●, el prefijo //, el display condensado, el ámbar divisor, los metadatos, el encuadre de arte.The image is sovereign; the web tells the craft. It's built on your portfolio: the geometric trio, the ● dot, the // prefix, the condensed display, the amber divider, the metadata, the art framing.

Firma gráficaGraphic signature

El tríoThe trio

▲ siempre amarillo · ● siempre azul · ■ siempre rojo. A veces los tres en tinta plana (negro); a veces solo el punto ●. Viñetas con significado (1er/2do/finalista), acento inline o device de esquina.▲ always yellow · ● always blue · ■ always red. Sometimes all three in flat ink (black); sometimes only the ● dot. Bullets with meaning (1st/2nd/finalist), inline accent or corner device.

MarcadoresMarkers

El // y el punto ●The // and the ● dot

// Exteriors
Renders ● Works

El // abre sección; el ● separa y es guiño de marca.The // opens a section; the ● separates and is a brand wink.

MetadatosMetadata

Ficha de proyectoProject sheet

ProyectoProjectTorre Valle
ClienteClientElephant,
UbicaciónLocationRotterdam
AñoYear2026

Composición · render a sangre + overlay + serifComposition · full-bleed render + overlay + serif

// Obra seleccionada// Selected work
Proyectos que existieron
en imagen antes que en obra.Projects that existed
in image before they were built.

Ámbar a sangre = divisor de sección (gesto de marca)Full-bleed amber = section divider (brand gesture)

// image pricing
Architectural
Renderings ● Exteriors
Ideas firma · ShowcaseSignature ideas · Showcase

El hero se pinta // el scroll es el pipelineThe hero paints itself // the scroll is the pipeline

Hero "bucket render""Bucket render" hero

La home nace como nace un render: por buckets. No se calcula V-Ray en vivo — se hornea el orden y se reproduce. Es también el preloader. La rejilla gris clarito que queda sobre la imagen es la firma del render.The home is born the way a render is: by buckets. No live V-Ray — the order is baked and replayed. It's also the preloader. The light-grey grid left over the image is the render's signature.

0%Renderizando

Scroll = pipeline (tu diagrama, ya diseñado)Scroll = pipeline (your diagram, already designed)

La misma línea de tiempo del deck, hecha experiencia. Es tu proceso real; no inventamos otro.The same timeline from the deck, turned into experience. It's your real process; we didn't invent another.

1
PlanoPlan

2D

2
AxonometríaAxonometric

2D

3
GeometríaGeometry

3D aparece3D appears

▲
LuzLight

Feedback

4
TexturaTexture

MaterialidadMateriality

●
Final 5KFinal 5K

Zoom detalleDetail zoom

25 · La firma gráfica25 · The graphic signature

// Las tres formasThe three shapes

Triángulo, círculo, cuadrado. Tres formas puras, tres colores fijos. Cuando aparecen, hablan — nunca adornan.Triangle, circle, square. Three pure forms, three fixed colours. When they show up, they mean something — never decorate.

Triángulo · #FBCB4CTriangle · #FBCB4C

Primer lugarFirst place

Amarillo. La cúspide, lo premiado.Yellow. The apex, the awarded.

Círculo · #5C93CECircle · #5C93CE

Segundo lugarSecond place

Azul. El punto que también acentúa inline.Blue. The dot that also accents inline.

Cuadrado · #E8443ASquare · #E8443A

FinalistaFinalist

Rojo, macizo. Mención, shortlist, lo que quedó cerca.Red, solid. Mention, shortlist, the near-miss.

Regla A · Mismo tamañoRule A · Same size

Juntas, misma cajaTogether, one box

El trío se dibuja en SVG, IDÉNTICA caja. Nunca glifos ▲●■ tipográficos: salen disparejos.The trio is drawn in SVG, IDENTICAL box. Never typographic ▲●■ glyphs: they come out uneven.

Regla B · Un color reinaRule B · One colour reigns

Una sección, un colorOne section, one colour

Dentro de un bloque manda UN color. Los tres del trío solo conviven cuando actúan como podio (▲●■).Within a block ONE colour rules. The trio's three coexist only when acting as the podium (▲●■).

Regla C · El punto pegadoRule C · The attached dot

36·RENDER STUDIOThe dot inherits

El ● suelto es azul. Pegado a un texto HEREDA su color — tinta sobre claro, blanco sobre oscuro. Nunca azul dentro de una palabra.The loose ● is blue. Attached to text it INHERITS its colour — ink on light, white on dark. Never blue inside a word.

36· · FASE·02 · 3·6

Regla D · Tinta planaRule D · Flat ink

Contextos quietosQuiet contexts

En pie de página, papelería o tabla, el trío va en TINTA PLANA. El color se guarda para cuando significa. La forma sola ya es la marca.In a footer, stationery or table, the trio goes FLAT INK. Colour is saved for when it means something. The form alone already reads as the brand.

Regla E · El punto que reemplaza una letraRule E · The dot that replaces a letter

Acento inlineInline accent

RENDER ST●DI●

El ● entra donde iría una vocal. Uno o dos por título; hereda el color del texto (Regla C).The ● steps in where a vowel would go. One or two per title; it inherits the text colour (Rule C).

Palabra del fundadorFounder's word

"Un punto azul dentro de una palabra es un error." · "Prefiero un color mandando y las formas en negro a un arcoíris." · "Nunca las tecleen: dibújenlas.""A blue dot inside a word is a bug." · "I'd take one colour ruling with the shapes in black over a rainbow." · "Never type them: draw them."

render 3·6 — la firma en contexto
26 · Otros elementos26 · Other elements

Cuatro gestos // que firman todoFour gestures // that sign it all

Más allá del logo y el color: el //, la banda ámbar, el panel de metadatos y la microetiqueta vertical. Pequeños, repetidos, inconfundibles.Beyond logo and color: the //, the amber band, the metadata panel and the vertical microlabel. Small, repeated, unmistakable.

Render 3·6 con gestos de sistema

El // abre, nunca interrumpeThe // opens, never interrupts

Doble barra en ámbar o color reinante. Al frente o partiendo el título — jamás a mitad de frase.Double slash in amber or reigning color. Up front or splitting the title — never mid-sentence.

Al frenteUp front
// El proyectoThe project

Descorre la cortina. Media eme de aire tras la barra.Draws the curtain. Half an em of air after it.

PartiendoSplitting
IdeaIdea // obrabuilt

La bisagra entre concepto y resultado.The hinge between concept and result.

MicroetiquetaMicrolabel
// Fase concepto · 03Concept phase · 03

También abre etiquetas. En cuerpo corrido, jamás.Also opens labels. In running text, never.

Banda ámbar // a sangreAmber band // full-bleed

#FDB92B divide y anuncia. Nunca es fondo de contenido. Tipo blanca, a sangre — el latido entre renders.#FDB92B divides and announces. Never a content background. White type, full-bleed — the heartbeat between renders.

// Capítulo 04Chapter 04
La obra construidaThe built work

Blanca sobre ámbar, siempre. Solo divide y titula — nunca detrás de párrafos.White on amber, always. Only divides and titles — never behind paragraphs.

Metadatos // panel flotanteMetadata // floating panel

PROJECT · CLIENT · LOCATION · YEAR. Panel translúcido, cifras tabulares, arriba-derecha. Flota sin tapar el foco.PROJECT · CLIENT · LOCATION · YEAR. Translucent panel, tabular figures, top-right. Floats without covering the focus.

Sobre renderOver a render
Render con panel de metadatos
ProjectHavenkwartier
ClientDe Vries BV
LocationÁmsterdamAmsterdam
Year2026

Translúcido con desenfoque, esquina superior derecha.Translucent with blur, top-right corner.

Sobre página claraOn a light page
ProjectHavenkwartier
ClientDe Vries BV
LocationÁmsterdamAmsterdam
Year2026

En impreso, al pie: dos columnas sobre un filete fino.In print, at the foot: two columns over a hairline rule.

Microetiqueta // vertical en el cantoVertical microlabel // at the spine

Rotada 90°: plancha, coordenadas, sede. Gris y discreta, corre por el borde como el lomo de un libro.Rotated 90°: plate, coordinates, office. Grey and discreet, it runs the edge like a book's spine.

En el cantoOn the spine
Render con microetiqueta vertical en el canto
Plancha 04 · Ámsterdam · 2026Plate 04 · Amsterdam · 2026
Havenkwartier

Borde izquierdo, base hacia afuera. Nunca pisa el foco.Left edge, baseline outward. Never treads on the focus.

La recetaThe recipe

Cómo se componeHow it's set

● vertical-rl + rotate(180deg). ● Mayúsculas, tracking 2–2.5px, 8–9px. ● Gris 70% sobre oscuro, tinta discreta sobre claro. ● Metadato de archivo, no titular.● vertical-rl + rotate(180deg). ● Uppercase, 2–2.5px tracking, 8–9px. ● 70% grey on dark, discreet ink on light. ● Archival metadata, not a headline.

Encuadre de arte // el passe-partoutArt framing // the passe-partout

A veces el render se cuelga como cuadro: paspartú ancho, filete fino, cartela al pie. El aire dice «esto es obra».Sometimes the render hangs like a painting: wide passe-partout, hairline rule, foot caption. The air says «this is a work».

EnmarcadoFramed
Render enmarcado como cuadro
Havenkwartier · Vista 03Havenkwartier · View 03 2026

Paspartú generoso, filete fino, cartela al pie.Generous passe-partout, hairline rule, foot caption.

Cuándo enmarcarWhen to frame

Galería, no catálogoGallery, not catalogue

● Solo la pieza estrella, no cada lámina. ● Alterna con páginas a sangre: el marco descansa, el sangrado golpea. ● Paspartú en crema o blanco — el color lo pone la imagen.● Hero piece only, not every plate. ● Alternate with full-bleed: the frame rests, the bleed punches. ● Cream or white passe-partout — color comes from the image.

SiempreAlways

Lo que hace sistemaWhat makes it a system

● // al frente o partiendo, con aire. ● Ámbar solo para dividir, tipo blanca. ● Metadatos tabulares, arriba-derecha o al pie. ● Microetiqueta vertical gris en el canto.● // up front or splitting, with air. ● Amber only to divide, white type. ● Tabular metadata, top-right or foot. ● Grey vertical microlabel on the spine.

NuncaNever

Lo que lo rompeWhat breaks it

● // a mitad de frase. ● Ámbar de fondo o con tinta. ● Paneles opacos tapando el foco. ● Paspartú de color, o enmarcar cada lámina.● // mid-sentence. ● Amber as background or with ink. ● Opaque panels covering the focus. ● Colored passe-partout, or framing every plate.

27 · Iconografía27 · Iconography

Sin librería // solo glifosNo library // just glyphs

Sin packs de iconos, sin librerías de UI. Un icono es un glifo de texto o una forma simple — mismo trazo que la tipografía, misma línea de base, misma tinta reinante. Cero dependencias.No icon packs, no UI libraries. An icon is a text glyph or a simple shape — same stroke as the type, same baseline, same reigning ink. Zero dependencies.

La reglaThe rule

El icono hereda color, tamaño y peso del texto que acompaña — nunca se tiñe aparte ni se importa de fuera. Si un carácter Unicode ya lo dice, ese carácter es el icono.The icon inherits the color, size and weight of the text it sits with — never tinted, never imported. If a Unicode character already says it, that character is the icon.

El límiteThe limit

Set mínimo y cerrado: flechas, chevrons, más y menos, cierre y el punto como viñeta. Antes de dibujar uno nuevo, pregúntate si el texto ya lo dice. Casi siempre lo dice.A minimal, closed set: arrows, chevrons, plus and minus, close and the dot as a bullet. Before drawing a new one, ask if the text already says it. It almost always does.

El set mínimoThe minimal set

Trazo consistente, tamaño por contexto, siempre en la tinta reinante:Consistent stroke, sized by context, always in the reigning ink:

← → ↑ ↓

FlechasArrows

Navegar, avanzar, volver.Navigate, advance, return.

‹ › ⌃ ⌄

ChevronsChevrons

Desplegar, paginar, jerarquía.Expand, paginate, hierarchy.

+ − ×

Más · menos · cerrarPlus · minus · close

Añadir, quitar, descartar.Add, remove, dismiss.

Idea · dato · citaIdea · fact · quote

El punto como viñetaThe dot as bullet

El punto pegado al texto hereda su tinta — aquí no es azul.The dot next to text inherits its ink — it is not blue here.

✓ / //

Check y barraCheck and slash

Hecho, separar, abrir sección.Done, separate, open a section.

El trío, aparteThe trio, apart

Device de marca, no icono de UI: ▲ amarillo · ● azul · ■ rojo, misma caja.A brand device, not a UI icon: ▲ yellow · ● blue · ■ red, equal box.

El glifo en su hábitatThe glyph in the wild
render 3·6

Sobre la imagen mandan el render y la tipografía: la flecha, el chevron o el punto se leen como una palabra más — nunca como una barra de iconos pegada encima.On top of the image, the render and the type rule: the arrow, chevron or dot read as one more word — never as an icon bar stuck on top.

HazloDo

Alinéalos a la base de la línea, dales el color del texto y déjalos escalar con la fuente. Un icono debe leerse como una palabra más de la frase.Align them to the baseline, give them the text color, and let them scale with the font. An icon should read as one more word in the sentence.

EvítaloAvoid

Nada de iconos multicolor, rellenos degradados, packs externos ni SVGs importados de una librería. Si necesitas una metáfora nueva, casi siempre sobra con una palabra.No multicolor icons, gradient fills, external packs or SVGs pulled from a library. If you need a new metaphor, a word almost always does the job.

28 · Marca digital28 · Digital brand

La marca en pantalla // UI, patrones, 3D y motionThe brand on screen // UI, patterns, 3D and motion

Aquí la marca se mueve. Los componentes de Claro Minimal, los patrones que amamos de nuestras apps, el momento 3D y el motion “Bucket Kinetics”. El chrome se queda quieto; la imagen anima.Here the brand moves. The Claro Minimal components, the patterns we love from our apps, the 3D moment and the “Bucket Kinetics” motion. The chrome stays still; the image animates.

Piel ASkin A

Claro Minimal // componentes vivosClaro Minimal // live components

Editorial, cálido y silencioso. Papel crema, tinta, aire. Un solo botón negro por vista; iconos como glifos; modales propios; el color solo en datos, en pastel.Editorial, warm and quiet. Cream paper, ink, air. A single black button per view; icons as glyphs; custom modals; color only in data, in pastel.

Registro de horas · demoTime tracking · demo
ESEN
Horas · semanaHours · week
55.5
ProyectosProjects
4
Chips pastel · identifican datosPastel chips · identify data
074 · Torre Valle 111 · ConcursoCompetition 129 · Loft Chelsea

Patrones que viajan: undo/redo ↶↷ · slider antes/después · blur al abrir · grid⇄lista · reloj global · drag&drop con paridad táctil.Patterns that travel: undo/redo ↶↷ · before/after slider · blur on open · grid⇄list · global clock · drag&drop with touch parity.

Piel A · patrones que viajanSkin A · patterns that travel

Patrones que amamos // demos vivasPatterns we love // live demos

Gestos que ya cruzan de una app a otra: pequeños, interactivos, discretos. Toca, arrastra y compara — cada uno viene de una herramienta real del estudio. Ya viven en el manual: toggle ES/EN partido (arriba a la derecha), count-ups, favicon único copiado por código y undo/redo ↶↷.Gestures that already travel from one app to another: small, interactive, quiet. Touch, drag and compare — each one comes from a real studio tool. Already in this manual: the split ES/EN toggle (top right), count-ups, the single favicon copied by code, and undo/redo ↶↷.

render AntesBefore DespuésAfter
⇄
Slider antes / despuésBefore / after slider Un divisor arrastrable sobre una misma imagen: gris apagado a la izquierda, render a color a la derecha. Ratón y táctil.A draggable divider over one image: muted grey on the left, full-color render on the right. Mouse and touch. de · Storyboardsfrom · Storyboards
☾Ámsterdam
--:--
—
☾Nueva YorkNew York
--:--
—
☾Bogotá
--:--
—
Reloj global · tres sedesGlobal clock · three offices Hora en vivo por zona horaria (se actualiza sola); el ícono ☀/☾ cambia si es de día o de noche en cada ciudad.Live time per time zone (updates on its own); the ☀/☾ icon flips for day or night in each city. de · Cronogramafrom · Timeline
TamañoSize
074 · Torre ValleExterior
111 · ConcursoCompetitionInterior
129 · Loft Chelsea360°
140 · Villa NorteAerial
Grilla ⇄ lista + tamaño vivoGrid ⇄ list + live size Un toggle cambia la vista; el slider redimensiona las tarjetas en tiempo real, sin recargar.A toggle switches the view; the slider resizes the cards in real time, no reload. de · Biblioteca de Assetsfrom · Asset Library
Blur al abrir · lightboxBlur on open · lightbox Al abrir una miniatura, el fondo se difumina (backdrop-filter) para aislar la imagen. Cierra al clic fuera o con Esc.Opening a thumbnail blurs the background (backdrop-filter) to isolate the image. Close by clicking outside or with Esc. de · Assetsfrom · Assets
074 · Torre Valle
111 · ConcursoCompetition
129 · Loft Chelsea
Ficha arrastrable · asa de 6 puntosDraggable chip · 6-dot handle El asa ⠿ invita a mover; cada ficha se arrastra libre por el tablero, con paridad ratón/táctil. Se queda dentro del marco.The ⠿ handle invites moving; each chip drags freely across the board, with mouse/touch parity. It stays inside the frame. de · Cronograma / Storyboardsfrom · Timeline / Storyboards
Momento 3D · interactivo3D moment · interactive

El render en vivo // en 3DThe render, live // in 3D

El trío geométrico existe en el espacio y se pinta por buckets de V-Ray — del negro, al marco ámbar, a la geometría nítida. Arrastra para orbitar · mueve el cursor para re-renderizar · rueda para rehacer el render.The geometric trio lives in space and paints itself by V-Ray buckets — from black, to the amber frame, to crisp geometry. Drag to orbit · move the cursor to re-render · scroll to redo the render.

El entorno es un espacio infinito crema — un limbo de estudio sin horizonte. Las figuras son cerámica/terracota mate que conserva su color de marca: ▲ amarillo, ● azul, ■ rojo. La textura es cerámica; el color es el de la marca.The environment is an infinite cream space — a studio limbo with no horizon. The figures are matte ceramic/terracotta keeping their brand color: ▲ yellow, ● blue, ■ red. The texture is ceramic; the color is the brand’s.

AnimaciónAnimation

El chrome quieto,
la imagen animaThe chrome stays still,
the image animates

El movimiento donde escasea = donde miras. Reservamos el "wow" (bucket-render, transiciones de proyecto) para 1–2 momentos; el resto respira quieto. Siempre con guardia prefers-reduced-motion.Motion where it's scarce = where you look. We reserve the "wow" (bucket-render, project transitions) for 1–2 moments; the rest breathes still. Always guarded by prefers-reduced-motion.

Count-up
0
Trío escalonadoStaggered trio

Catálogo: viewIn · modalPop · sheetUp · stagger · count-ups · blur-up.

Gráfica e impresosGraphics & print

Tratamiento de imagenImage treatment

Imagen a sangre, AVIF/WebP + srcset, master 5K solo al zoom. Portadas de presentación y PDF de marca con metadatos y el trío. Print A4/A1. El "modo cine / showreel" para recorrer obra a pantalla completa.Full-bleed image, AVIF/WebP + srcset, 5K master only on zoom. Presentation covers and brand PDFs with metadata and the trio. A4/A1 print. A "cinema / showreel mode" to browse work full-screen.

Render a sangreFull-bleed renderOverlay legibilidadLegibility overlay5K / zoom Portada 16:9 / A1Cover 16:9 / A1Modo showreelShowreel modeMetadatos // fichaMetadata // sheet
La imagen manda · selección del portafolioThe image rules · portfolio selection
render Three Point Six render Three Point Six render Three Point Six render Three Point Six

29 · Estados y accesibilidad29 · States & accessibility

// El foco se ve, el motion se apagaFocus stays visible, motion stands down

La interfaz responde igual para todos: teclado o dedo, con o sin animación. El estado se dice por forma y etiqueta — nunca solo por color.The interface answers everyone the same: keyboard or thumb, motion on or off. State is told by shape and label — never by color alone.

Render 3·6 — la luz alcanza cada rincón
FocoFocus

Contorno siempre visibleOutline, always visible

Nunca outline:none sin reemplazo. Anillo de 2px con desplazamiento.Never outline:none without a replacement. A 2px ring with offset.

MotionMotion

Guardia de reducciónReduced-motion guard

Todo el movimiento bajo prefers-reduced-motion. Si se pide calma, se apaga.All motion under prefers-reduced-motion. Ask for calm, it goes quiet.

ContrasteContrast

AA y no solo colorAA, not color alone

Contraste AA. La info se dobla en forma o etiqueta: ícono, texto, patrón.AA contrast. Info doubled in shape or label: icon, word, pattern.

No dependas solo del colorDon't rely on color alone

Cada estado firma con una forma distinta. Verde no basta: hace falta el signo.Each state signs with a distinct shape. Green isn't enough: the mark must be there.

Triángulo ▲. También en el texto y el ✓, no solo en el amarillo.Triangle ▲. Also in the label and the ✓, not only the yellow.

Círculo ●. La etiqueta dice el estado; el color refuerza.Circle ●. The label says the state; color reinforces.

Cuadrado ■. Inequívoco para quien no distingue rojo de verde.Square ■. Unmistakable for anyone who can't tell red from green.

Los cuatro estadosThe four states

Hover · active · disabled · focusHover · active · disabled · focus

Hover: elevación y sombra suave. Active: translateY(1px) o scale(.98). Disabled: opacidad baja, sin cursor ni foco. Focus: anillo que gana a todos.Hover: subtle lift, soft shadow. Active: translateY(1px) or scale(.98). Disabled: low opacity, no cursor or focus. Focus: a ring that beats them all.

Paridad táctilTouch parity

El dedo pesa 44pxA thumb weighs 44px

Táctiles ≥44px. Inputs ≥16px en móvil (sin zoom iOS). Safe-areas en todo lo fijo. Alturas en dvh, no vh.Targets ≥44px. Inputs ≥16px on mobile (no iOS zoom). Safe-areas on anything fixed. Heights in dvh, not vh.

Un compromiso, no un extra. Una imagen que no todos alcanzan es una imagen a medias — se diseña desde el primer trazo, igual que la luz de un render.A commitment, not an extra. An image not everyone can reach is half-made — designed from the first stroke, like the light in a render.

30 · Portada de portafolio30 · Portfolio cover

// La primera imagen mandaThe first image commands

Una portada abre con un render a sangre, oscurecido por un degradado que deja respirar la tipografía. Wordmark oficial, un statement corto con // y metadatos discretos. Nada más. La imagen fija el tono antes de la primera palabra.A cover opens with a full-bleed render, darkened by a gradient that lets the type breathe. Official wordmark, a short // statement, discreet metadata. Nothing else. The image sets the tone before the first word.

Portafolio 2026 · Vol. 01Portfolio 2026 · Vol. 01Ámsterdam · Nueva York · Bogotá
wordmark oficial aquíofficial wordmark here
Renders que materializan la fantasíaRenders that materialize the fantasy// the power of images// the power of images

Mock esquemático sobre un render real. El wordmark y la imagen definitiva los coloca el ensamblador; el logo nunca se teclea.Schematic mock over a real render. The wordmark and final image are placed by the assembler; the logo is never typed.

ImagenImage

A sangre, sin marcoFull-bleed, no frame

El mejor render del proyecto ocupa todo el pliego. Degradado oscuro de abajo hacia arriba para asentar el texto; nunca aclarar la imagen para "que se lea".The project's strongest render fills the whole spread. A dark bottom-up gradient beds the text; never wash the image out to "make it readable".

TítuloTitle

Grande, abajo-izquierdaLarge, bottom-left

Grotesco condensado pesado en mayúsculas, anclado abajo a la izquierda o centrado. Un solo statement con //. El color lo pone la imagen, no una caja de fondo.Heavy condensed grotesque in caps, anchored bottom-left or centered. A single // statement. Color comes from the image, not a backing box.

MetadatosMetadata

Arriba-derecha, discretosTop-right, discreet

Volumen, año y las tres sedes en microtipografía espaciada. Susurran; nunca compiten con el título ni con el wordmark.Volume, year and the three cities in spaced micro-type. They whisper; never competing with the title or the wordmark.

Banco de portadas · candidatas a sangreCover bank · full-bleed candidates
render 3·6render 3·6render 3·6

Se elige una sola: la más potente. Imagen soberana, sin veladura; el degradado de portada llega solo al ensamblar, para acostar el texto.Only one is chosen: the strongest. Sovereign image, no veil; the cover gradient arrives only at assembly, to bed the text.

31 · Aplicaciones · Papelería31 · Applications · Stationery

// Correo y tarjetaEmail & card

La marca también se firma: firma de correo sobria y tarjeta crema, tinta sobre claro y el wordmark bien respirado.The brand signs off too: a sober email signature and a cream card — ink on light, the wordmark given room to breathe.

render 3·6

Firma de correo · esquemaEmail signature · schematic

logo oficialofficial logo

Orden fijo: logo · nombre · cargo · las tres sedes · redes. Tinta sobre claro, un solo peso de color. Sin fondos, sin banners.Fixed order: logo · name · role · the three studios · social. Ink on light, a single weight of color. No backgrounds, no banners.

Contenido de la firmaSignature content

Nombre & cargoName & role

Nombre en un peso; cargo debajo, apagado. Sin frases, sin citas, sin imágenes decorativas.Name in one weight; role below, muted. No taglines, no quotes, no decorative images.

ÁmsterdamAmsterdam Nueva YorkNew York BogotáBogotá

Las tres sedes van siempre juntas y en ese orden. Redes: IG @3.6.renderstudio · Behance 36renders · FB · TikTok · LinkedIn · Pinterest · YouTube.The three studios always travel together, in that order. Social: IG @3.6.renderstudio · Behance 36renders · FB · TikTok · LinkedIn · Pinterest · YouTube.

Tarjeta · frenteCard · front

wordmark oficialofficial wordmark

Crema y tinta. El wordmark con su punto y los mínimos de aire respetados; nunca teclearlo con una fuente cualquiera. El nombre abajo, discreto.Cream and ink. The wordmark with its dot and its minimum clearance respected; never keyed in with just any font. Name below, discreet.

Tarjeta · reverso — elige unoCard · back — pick one

render 3·6

El trío ▲●■ centrado sobre tinta plana, o un render a sangre. Una cosa o la otra, nunca ambas apretadas.The ▲●■ trio centered on flat ink, or a full-bleed render. One or the other — never both crammed together.

Sobria por defectoSober by default

Tinta sobre claro, un peso de color, sin degradados ni sombras. La firma acompaña, no compite con el mensaje.Ink on light, one weight of color, no gradients or shadows. The signature accompanies — it doesn't compete with the message.

El punto no es azulThe dot isn't blue

Pegado al wordmark, el punto ● hereda la tinta del texto. El azul es solo para el ● suelto del trío.Attached to the wordmark, the ● dot inherits the text's ink. Blue is reserved for the loose ● of the trio.

Aire innegociableNon-negotiable clearance

Respeta el área de protección del logo en firma y tarjeta. Si dudas, deja más margen, nunca menos.Respect the logo's clearance in both signature and card. When in doubt, leave more margin, never less.

32 · Redes sociales32 · Social media

// La imagen manda, el texto obedeceImage leads, text follows

Un solo estudio, un solo avatar, un solo tono. El render entra a sangre; el titular abre con // y desaparece. Cada post es una ventana, no un anuncio.One studio, one avatar, one tone. The render bleeds to the edge; the headline opens with // and steps back. Every post is a window, not an ad.

render 3·6
Cuentas oficialesOfficial accounts

Dónde estamosWhere we are

Instagram @3.6.renderstudio · Behance 36renders · Facebook · TikTok · LinkedIn · Pinterest · YouTube. Un mismo nombre, un mismo avatar en todas.Instagram @3.6.renderstudio · Behance 36renders · Facebook · TikTok · LinkedIn · Pinterest · YouTube. Same name, same avatar everywhere.

AvatarAvatar

Marca reducidaReduced mark

La misma marca reducida en cada plataforma, centrada, con aire. Nada de recortes distintos por red: si cambia el avatar, cambia el estudio.The same reduced mark on every platform, centered, with air. No per-network crops: if the avatar changes, the studio changes.

TonoTone

Coherencia · mínimoCoherence · minimal

El color lo pone la imagen. El texto es corto, en mayúsculas del grotesco condensado o en Inter. Nunca compite con el render.Color comes from the image. Text stays short, in condensed grotesque caps or Inter. It never competes with the render.

Plantilla de postPost template

Render a sangre — sin marco ni margen — con un titular // sobre la zona más tranquila de la imagen y una línea de metadatos al pie: proyecto, sede, año.Full-bleed render — no frame, no margin — with a // headline over the calmest zone of the image and one metadata line at the foot: project, location, year.

render 3·6
3·6
// Luz de la mañanaMorning light
Torre Residencial · Ámsterdam · 2026Residential Tower · Amsterdam · 2026
AnatomíaAnatomy

1 · Render a sangre. Ocupa todo el marco, sin bordes.1 · Full-bleed render. Fills the frame, no borders.

2 · Titular //. Máximo cuatro palabras, en la zona tranquila.2 · // headline. Four words max, over the calm zone.

3 · Metadatos al pie. Proyecto · sede · año, en versalitas discretas.3 · Footer metadata. Project · location · year, in quiet caps.

4 · Marca esquina. El 3·6 arriba a la izquierda, pequeño.4 · Corner mark. The 3·6 top-left, small.

El feed respira — 3×3The feed breathes — 3×3

Visto en cuadrícula, el feed alterna planos y valores para que ninguna imagen ahogue a su vecina. La retícula es el ritmo; el render, la voz.Seen as a grid, the feed alternates shots and values so no image drowns its neighbor. The grid is the rhythm; the render, the voice.

render 3·6
render 3·6
render 3·6//
render 3·6
render 3·6//
render 3·6
render 3·6
render 3·6
render 3·6//

Regla del ritmo: nunca dos claros ni dos oscuros pegados; el // aparece en uno de cada tres, no en todos. El aire entre posts es tan importante como el post.Rhythm rule: never two lights or two darks adjacent; the // shows on one in three, not on all. The air between posts matters as much as the post.

33 · Cotización y tarifas33 · Quoting & rates

El precio // se cotiza por imagenPrice // is quoted by the image

No vendemos horas ni polígonos: vendemos el poder de una imagen. La tarifa se lee por entregable y por complejidad, no por el reloj.We don't sell hours or polygons: we sell the power of an image. The rate reads by deliverable and complexity, not by the clock.

render 3·6 — el valor está en la imagen

La unidad de venta // una imagen entregada.The unit of sale // one delivered image.

El puente con la herramientaThe bridge to the tool

Cotizador interno · Claro MinimalInternal quoter · Claro Minimal

El número se calcula, no se improvisaThe number is computed, not improvised

Aquí no hay lista de precios. El manual explica cómo; el monto sale del Cotizador. Nunca se cita de memoria.No price list here. The manual explains how; the amount comes from the Quoter. Never cited from memory.

Anatomía de una cotización: partidas arriba, total en la pastilla negra —el único acento fuerte—.Anatomy of a quote: line items up top, total on the black pill —the only strong accent—.

Qué mueve el precioWhat moves the price

Cuatro variables // nada másFour variables // nothing else

01 · Número de imágenes01 · Number of images

Cada imagen es una unidad de valor. Más vistas del mismo proyecto bajan el costo por imagen.Each image is a unit of value. More views of the same project lower the per-image cost.

02 · Resolución y entrega02 · Resolution & delivery

Master a 5000px por el lado largo + derivados AVIF/WebP + archivo de impresión. Ampliaciones se cotizan aparte.Master at 5000px on the long edge + AVIF/WebP derivatives + print file. Enlargements quoted separately.

03 · Revisiones03 · Revisions

Encuadre, luz y material entran. Cambio de diseño, geometría o partido = nuevo entregable. Se dice antes, no después.Framing, light and material are in. A change of design, geometry or concept = new deliverable. Said beforehand, not after.

04 · Tiempos04 · Timelines

El plazo lo fija la complejidad. La urgencia se cotiza como recargo explícito en el Cotizador, nunca oculto.Complexity sets the deadline. Urgency is quoted as an explicit surcharge in the Quoter, never hidden.

Los tres niveles de servicioThe three service tiers

Un trío // para tres alcancesA trio // for three scopes

Rangos cualitativos —desde / según alcance—; el monto exacto siempre lo entrega el Cotizador.Qualitative ranges —from / by scope—; the exact amount always comes from the Quoter.

Esencial · desdeEssential · from

Una imagen, una vistaOne image, one view

Vista directa, una ronda. Para validar una idea o alimentar una ficha. El punto más accesible.Straight view, one round. To validate an idea or feed a listing. The most accessible point.

Estándar · según alcanceStandard · by scope

Un set de vistasA set of views

Varias imágenes coordinadas —exterior, interior, detalle— con luz coherente. Baja el costo por imagen.Several coordinated images —exterior, interior, detail— with coherent light. Per-image cost drops.

Showcase · a medidaShowcase · bespoke

Narrativa completaFull narrative

Campaña, atmósferas complejas, animación. Alta complejidad, cotizado uno a uno.Campaign, complex atmospheres, animation. High complexity, quoted one-to-one.

render 3·6 — nivel Showcase, narrativa completa

Showcase // el proceso contado como en el portafolio.Showcase // the process told as in the portfolio.

La regla de oroThe golden rule

El manual dice cómo se cotiza; nunca cuánto. Cero cifras de dinero aquí. El precio es vivo y se calcula en el Cotizador (Ámsterdam · Nueva York · Bogotá, misma lógica, su moneda). Transparencia no es una lista: es ver, línea por línea, de dónde sale el número.The manual says how we quote; never how much. Zero money figures here. Price is alive and computed in the Quoter (Amsterdam · New York · Bogotá, same logic, each currency). Transparency isn't a list: it's seeing, line by line, where the number comes from.

34 · Submarcas y co-marcas34 · Sub-brands & co-brands

// Una familia, una firmaOne family, one signature

Algunas líneas necesitan voz propia —BSIDE, la submarca experimental— y a veces firmamos junto a otro estudio —una co-marca como HuevoFrito. Pueden tener carácter, pero cuelgan del paraguas 3·6.Some lines need their own voice —BSIDE, the experimental sub-brand— and sometimes we sign alongside another studio —a co-brand like HuevoFrito. They may have character, but they hang from the 3·6 umbrella.

render 3·6 — la casa madre bajo la que cuelgan las líneas

Un paraguas // muchas voces bajo el mismo oficio.One umbrella // many voices under the same craft.

SubmarcaSub-brand

Voz propia, misma sangreOwn voice, same blood

BSIDE: nombre, tono y acento propios, pero hereda tipos, retícula y filosofía. Vive dentro de la casa.BSIDE: own name, tone and accent, but inherits type, grid and philosophy. Lives inside the house.

Co-marcaCo-brand

Dos firmas, un proyectoTwo signatures, one project

HuevoFrito: socio externo, lado a lado, cada logo intacto, unidos por un conector neutro. Ni se funden ni se subordinan.HuevoFrito: external partner, side by side, each logo intact, joined by a neutral connector. Neither merges nor subordinates.

EndosoEndorsement

La firma de respaldoThe backing signature

Cuando el maestro solo avala: «by 3·6» o «a 3·6 studio», en microtexto, jamás compitiendo con el logo.When the master merely backs: "by 3·6" or "a 3·6 studio", in microtype, never competing with the logo.

El esquemaThe scheme

Cómo cuelga cada relaciónHow each relationship hangs

LOGO MAESTRO · MASTER SUBMARCA BSIDE · comparte piel ENDOSO "by 3·6" CO-MARCA HuevoFrito · aparte LOCKUP CO-MARCA · CO-BRAND LOCKUP 3·6 × HUEVOFRITO

Piel compartida vs. separadaShared vs. separate skin

Cuándo se junta, cuándo se apartaWhen to share, when to split

Comparte piel // la submarca extiende el oficio 3·6: misma retícula, mismos tipos, el trío ▲●■. BSIDE hereda todo y solo cambia el acento.Share the skin // the sub-brand extends the 3·6 craft: same grid, same type, the ▲●■ trio. BSIDE inherits it all and only shifts the accent.

Se separa // hay un socio con identidad propia o una audiencia que no debe leerse como 3·6. Dos sistemas unidos por un conector neutro, nunca fundidos.Split the skin // a partner with its own identity or an audience that must not read as 3·6. Two systems joined by a neutral connector, never merged.

Lo intocable del logo maestroUntouchable in the master logo

Ninguna submarca ni co-marca puede: reteclear el wordmark, recolorear el trío ▲●■, encajonar el logo dentro del suyo, ni saltarse el área de respeto. El maestro es siempre el asset oficial, nunca una recreación.No sub-brand or co-brand may: retype the wordmark, recolor the ▲●■ trio, box the logo inside their own, or skip the clear space. The master is always the official asset, never a recreation.

Regla de endosoEndorsement rule

«by 3·6» — el respaldo discreto"by 3·6" — the quiet backing

La línea lidera, 3·6 avala. Microtexto neutro bajo el nombre, menor que el logo de la submarca. Nunca en acento.The line leads, 3·6 endorses. Neutral microtype under the name, smaller than the sub-brand logo. Never in accent.

Regla de pertenenciaBelonging rule

«a 3·6 studio» — la casa habla"a 3·6 studio" — the house speaks

Cuando la submarca es 3·6. Firma de cierre al pie, con el punto ● heredando la tinta del texto —no azul—.When the sub-brand is 3·6. A closing signature at the foot, with the ● dot inheriting the text's ink —not blue—.

35 · Nomenclatura y créditos35 · Naming & credits

// Un proyecto es tres dígitos. Una imagen es un nombre que se lee sin abrirlaA project is three digits. An image is a name you read without opening it

El número NNN nace con el encargo, no cambia nunca y ordena todo el archivo. Todo lo demás cuelga de él.The NNN number is born with the brief, never changes, and orders the whole archive. Everything else hangs off it.

Anatomía de un nombre de archivoAnatomy of a filename

ProyectoProject
042
_
VistaView
lobby-noche
_
VersiónVersion
v11
_
MásterMaster
final
_
CalidadQuality
4K
FormatoFormat
.jpg

Minúsculas, guion bajo, sin acentos ni espacios. El número manda, la vista describe, la versión (dos dígitos) cierra.Lowercase, underscores, no accents or spaces. The number leads, the view describes, the version (two digits) closes.

render 3·6
IdentificadorIdentifier

Número NNNNumber NNN

Tres dígitos, con ceros a la izquierda, correlativo y perpetuo: 001 · 042 · 360. Viaja en cada carpeta, factura, entrega y contrato. Un proyecto = un número, para siempre.Three digits, zero-padded, sequential and permanent: 001 · 042 · 360. Carried across every folder, invoice, delivery and contract. One project = one number, forever.

Trabajo en cursoWork in progress

proyecto_vista_v##project_view_v##

Cada revisión sube la versión, nunca la sobrescribe: 042_aerea_v03 → _v04 → _v05. El historial se lee en el nombre.Each revision bumps the version, never overwrites it: 042_aerial_v03 → _v04 → _v05. History reads in the name.

MásterMaster

_final_4K.jpg_final_4K.jpg

La entrega se marca _final una sola vez; nunca final_final. Formato y resolución al final del nombre cuando importan.The delivery is tagged _final once; never final_final. Format and resolution at the tail when they matter.

SíDo

042_lobby-noche_v11_final_4K.jpg042_lobby-night_v11_final_4K.jpg

Se ordena solo, se busca por número, se lee sin abrirlo.Self-sorting, searchable by number, readable without opening.

NoDon't

Lobby FINAL (2) copia.jpgLobby FINAL (2) copy.jpg

Sin número, con espacios y mayúsculas: ilocalizable en tres meses.No number, spaces and caps: unfindable in three months.

Colofón · cómo se firma un proyectoColophon · how a project is signed

Toda entrega lleva su pie de imprenta: número, año, sedes y autoría. La fórmula no cambia — solo la obra.Every delivery carries its imprint: number, year, cities and authorship. The formula does not change — only the work does.

Proyecto 042 · 2026 — visualización por 3·6 Render Studio. Ámsterdam · Nueva York · Bogotá. @3.6.renderstudioProject 042 · 2026 — visualization by 3·6 Render Studio. Amsterdam · New York · Bogotá. @3.6.renderstudio

Colofón · cómo se firma este manualColophon · how this manual is signed

Grotesco condensado de la casa e Inter, con serif editorial para los respiros. Ámbar #FDB92B en los divisores, rojo firma #850110 en los acentos.House condensed grotesque and Inter, with an editorial serif for the pauses. Amber #FDB92B on the dividers, signature red #850110 on the accents.

Manual de marca 3·6 · edición 2026. Escrito, diseñado y mantenido por el estudio. Documento vivo.3·6 brand manual · 2026 edition. Written, designed and maintained by the studio. A living document.

Aquí termina el libro y empieza el trabajo. En este universo, las fantasías son realidades.Here the book ends and the work begins. In this universe, fantasies are realities.

// Apéndice

ConstrucciónBuild

Cómo se construye técnicamente lo que ves — stack, persistencia y seguridad. La doctrina de ingeniería del estudio.How what you see is technically built — stack, persistence and security. The studio’s engineering doctrine.

Cómo se construyeHow it's built

Árbol de stackStack tree

  • Estado complejo (visores, drag&drop) → React 18 UMD + Babel 7.26.4Complex state (viewers, drag&drop) → React 18 UMD + Babel 7.26.4
  • Lógica simple (calc, contador, catálogo) → Vanilla (S + render() + esc())Simple logic (calc, counter, catalog) → Vanilla (S + render() + esc())
  • Artifact / offline → build propio que incrusta todoArtifact / offline → self-contained build that embeds everything
  • Datos compartidos → api.php + JSON fuera del webroot · personales → localStorageShared data → api.php + JSON outside the webroot · personal → localStorage

Sin bundler, sin npm en runtime, sin librerías de UI/iconos. Dependencias congeladas = longevidad.No bundler, no npm at runtime, no UI/icon libraries. Frozen dependencies = longevity.

Los datos son sagradosData is sacred

Persistencia seguraSafe persistence

  • Escritura atómica (tmp + rename)Atomic writes (tmp + rename)
  • Respaldos rotativos .bak1–3 (escalera 10 min)Rotating backups .bak1–3 (10-min ladder)
  • Guardia anti-borrado refuse_shrinkAnti-deletion guard refuse_shrink
  • Campos nuevos siempre opcionales · migraciones que nunca destruyenNew fields always optional · migrations that never destroy
Seguridad — las reglas de la auditoríaSecurity — the audit rules

No repetir lo que ya mordióDon't repeat what already bit us

  1. datosdataFlush del guardado al ocultar/cerrar (visibilitychange/pagehide + keepalive).Flush the save on hide/close (visibilitychange/pagehide + keepalive).
  2. datosdataBloquear autosave hasta el primer GET exitoso (no pisar con caché rancia).Block autosave until the first successful GET (don't overwrite with stale cache).
  3. concurrenciaconcurrencyVersión/revisión en el POST, no last-write-wins; el poll no pisa ediciones locales.Version/revision in the POST, not last-write-wins; the poll doesn't overwrite local edits.
  4. authToken en cabecera X-Admin-Token, no en query string. Throttle en el 401.Token in the X-Admin-Token header, not the query string. Throttle on 401.
  5. supply-chainCDN con versión exacta + SRI o autoalojado. No cargar scripts de subdominios que no se usan.CDN with exact version + SRI or self-hosted. Don't load scripts from unused subdomains.
  6. deploy.htaccess con gzip (application/json) + no-cache para index.html..htaccess with gzip (application/json) + no-cache for index.html.
  7. privacidadprivacyNo exponer rutas internas de red/disco en JSON públicos.Don't expose internal network/disk paths in public JSON.
  8. móvilmobileParidad táctil como criterio de aceptación (drag ↑↓, swipe, gestión operable).Touch parity as acceptance criteria (drag ↑↓, swipe, operable management).
✓ Do
  • Elegir la piel primero (interno = Claro · público = Showcase).Choose the skin first (internal = Claro · public = Showcase).
  • Favicon y logo copiados por código, verificados por hash.Favicon and logo copied by code, verified by hash.
  • Un solo botón negro por vista; el color solo en datos.A single black button per view; color only in data.
  • Móvil de primera clase; validar el flujo real, no solo compilar.First-class mobile; validate the real flow, not just the build.
✕ Don't
  • Transcribir el logo/favicon a mano (un carácter = ícono roto).Hand-transcribe the logo/favicon (one character = broken icon).
  • Gradientes, glassmorphism, sombras de color, bold en displays Claro.Gradients, glassmorphism, colored shadows, bold in Claro displays.
  • Texto blanco sobre pasteles; pastel como fondo de página.White text on pastels; pastel as a page background.
  • Inventar un cuarto sistema tipográfico o una piel nueva.Inventing a fourth type system or a new skin.