Así se ve Kodeval.

La idea

Kodeval se reconoce por cómo está hecho antes que por cómo se adorna. La marca es poca cosa a propósito: un logo, un rojo, un gris piedra, dos tipografías y una forma de escribir. Todo lo demás sale de ahí.

Si una decisión de diseño no se puede justificar con una de estas reglas, probablemente sobra. Si una regla de aquí contradice lo que ves en el sitio, el error es del sitio.

Logo

El logo es el chevron rojo seguido de «odeval» en claro: el chevron hace de «K». Existe en una sola versión, para fondos oscuros.

Fondo

Siempre sobre grafito, sobre un tono o sobre una foto oscura. Sobre fondos claros todavía no hay versión: se usa el nombre «Kodeval» escrito en Space Grotesk.

Tamaño mínimo

24 px de alto en pantalla. Por debajo, el chevron se pierde.

Aire

Alrededor, como mínimo, el alto de la «o» libre de otros elementos.

Archivos

WebP para el sitio y PNG para emails, donde muchos clientes no muestran WebP.

Así no

Color

Una paleta neutra y un solo color de marca. Los contrastes indicados son contra la piedra y cumplen WCAG AAA (7:1) para cualquier tamaño de texto.

• Piedra--k-bg#DCDFE4Fondo claro de todas las páginas.
• Superficie--k-surface#EEF0F2Tarjetas y bloques sobre la piedra.
• Borde--k-border#C3C8CFBordes de tarjetas, campos y separadores.
• Tinta--k-ink#1C1D21Texto principal y títulos.12,6:1
• Texto 2--k-text-2#30343BPárrafos secundarios.9,4:1
• Apagado--k-muted#3B4048Notas, fechas y metadatos.7,8:1
• Grafito--k-dark#16171AFondos oscuros: header, pie y heros. Nunca negro puro.
• Rojo Kodeval--k-red#8B0001Botones, enlaces de acción y rojo sobre claro.7,5:1
• Rojo sobre oscuro--k-red-on-dark#F8A094Etiquetas y acentos sobre grafito o tonos.8,9:1
• Claro--k-on-dark#ECEDEFTexto sobre fondos oscuros.15,3:1

• El rojo es para lo que se toca: botones, enlaces de acción, el punto de los títulos. Nunca como fondo grande.
• Sobre oscuro, el rojo pasa a --k-red-on-dark: el rojo Kodeval no se lee sobre grafito.
• Nada de negro puro (#000): los oscuros son grafito.
• Cada color se usa por su variable (var(--k-red)), nunca escrito a mano.

Colores de cada producto

Cada producto tiene su propia paleta y la usa dentro de su sitio. En Kodeval aparecen solo como marca chica, por ejemplo en el centro de ayuda.

• CoKodeval Connections
• RRaw
• KpKodeval Pages
• PoPockies
• NMNo Mercy Streets
• FuFutbolle
• CECrimson Entertainment

Tonos

Los heros usan un degradé en bandas diagonales que se mueve despacio. El tono dice en qué parte del sitio estás.

• CarmesíInstitucional: inicio, quiénes somos, el lema, contacto.
• GrafitoSistema: estado, changelog, preferencias de email.
• CiruelaBlog.
• TintaLegales: términos, privacidad, compras y normas.

Tipografía

• Títulos en oración, no en Title Case: «Tres plataformas hechas a mano», no «Tres Plataformas Hechas A Mano».
• Los títulos grandes terminan en punto, y en los heros ese punto va en rojo.
• Mayúsculas solo en etiquetas cortas, con espaciado (0,14 em). Nunca en párrafos ni en títulos.
• Las monoespaciadas (IBM Plex Mono, DM Mono) quedan para código y para los productos que las usan, no para el sitio principal.

Componentes

Botón principal

Rojo Kodeval con texto blanco. Uno por bloque: si todo es principal, nada lo es.

Sobre oscuro

Sobre carmesí un botón rojo se pierde: va claro con el texto en rojo.

Enlaces de acción

Texto en rojo terminado en flecha: «Ver plataformas →».

Etiquetas

Solo si dicen algo que el título no dice (un estado, una categoría). Si repiten el título, se borran.

Tarjetas

Superficie con borde de 1 px y radio de 20 px; 16 y 12 px para lo que va adentro. No todo es una tarjeta.

Foco y toque

Anillo de foco de 3 px, oscuro sobre claro y claro sobre oscuro. Todo lo que se toca mide al menos 44 × 44 px.

Movimiento

El degradé de los tonos recorre su ciclo en 16 segundos, a velocidad constante. Todo hero animado tiene su botón de pausa y la elección se recuerda.

Con «reducir movimiento» activado no se mueve nada: ni el degradé ni las transiciones del mouse.

El movimiento confirma algo (el frente de una ilustración que se levanta, una flecha que avanza al pasar el mouse). No hay apariciones en cascada ni elementos que entran al hacer scroll.

Voz

Kodeval escribe como habla una persona que sabe de lo que habla y no necesita convencerte.

• Español neutro con tuteo: «elige», «puedes». Sin voseo y sin regionalismos.
• Lo concreto antes que lo grande: qué hace, para quién, con qué datos. Nada de «la mejor experiencia» ni «de otro nivel».
• Honesto con el tamaño: nada de equipos, oficinas ni clientes que no existen.
• Números y fechas reales, o ninguno.
• Frases cortas. Los dos puntos y las comas antes que la raya.
• Los textos legales hablan en tono legal; el resto, no.

Imágenes

• Ilustraciones propias en dos capas, como las del carrusel de la home, con los colores de cada producto.
• Vistas previas para compartir de 1200 × 630, generadas con las fuentes y el tono de cada sección (scripts/og-images.mjs).
• Sin fotos de stock, sin personas genéricas sonriendo a una laptop y sin formas 3D flotantes.

Lo que Kodeval no hace

Son las marcas de un sitio hecho en piloto automático. Cada una está aquí porque alguna vez apareció en Kodeval y se sacó.

• Degradés violeta o índigo, y el índigo de las plantillas (#6366F1, #5865F2) en botones.
• Una etiqueta encima de cada título, o una que repite el título.
• Retículas de fondo, resplandores radiales, vidrio esmerilado y sombras de colores.
• Tres tarjetas con un ícono cada una como respuesta para cualquier sección.
• Contrastes forzados: «No es X. Es Y.»
• Titulares que no dicen nada: «Construye el futuro», «Lleva tu web al siguiente nivel».
• Emojis como viñetas o adorno.
• Datos, logos de clientes o testimonios inventados.

La lista completa, para quien escribe código o texto para Kodeval, está en el archivo CLAUDE.md del repositorio de Kodeval.

The idea

Kodeval is recognized by how it is made before how it is decorated. The brand is small on purpose: one logo, one red, one stone grey, two typefaces and one way of writing. Everything else comes from there.

If a design decision can’t be justified by one of these rules, it probably isn’t needed. If a rule here contradicts what you see on the site, the site is wrong.

Logo

The logo is the red chevron followed by “odeval” in light: the chevron is the “K”. It exists in a single version, for dark backgrounds.

Background

Always on graphite, on a tone or on a dark photo. There is no version for light backgrounds yet: use the name “Kodeval” set in Space Grotesk.

Minimum size

24 px tall on screen. Below that, the chevron gets lost.

Clear space

Around it, at least the height of the “o” free of other elements.

Files

WebP for the site and PNG for emails, where many clients don’t show WebP.

Not like this

Color

A neutral palette and a single brand color. The listed contrasts are against stone and meet WCAG AAA (7:1) for any text size.

• Stone--k-bg#DCDFE4Light background on every page.
• Surface--k-surface#EEF0F2Cards and blocks on stone.
• Border--k-border#C3C8CFCard, field and divider borders.
• Ink--k-ink#1C1D21Main text and headings.12,6:1
• Text 2--k-text-2#30343BSecondary paragraphs.9,4:1
• Muted--k-muted#3B4048Notes, dates and metadata.7,8:1
• Graphite--k-dark#16171ADark backgrounds: header, footer and heroes. Never pure black.
• Kodeval red--k-red#8B0001Buttons, action links and red on light.7,5:1
• Red on dark--k-red-on-dark#F8A094Labels and accents on graphite or tones.8,9:1
• Light--k-on-dark#ECEDEFText on dark backgrounds.15,3:1

• Red is for what you tap: buttons, action links, the dot in headings. Never as a large background.
• On dark, red becomes --k-red-on-dark: Kodeval red can’t be read on graphite.
• No pure black (#000): darks are graphite.
• Every color is used through its variable (var(--k-red)), never typed by hand.

Product colors

Each product has its own palette and uses it inside its own site. On Kodeval they only appear as a small mark, for example in the help center.

• CoKodeval Connections
• RRaw
• KpKodeval Pages
• PoPockies
• NMNo Mercy Streets
• FuFutbolle
• CECrimson Entertainment

Tones

Heroes use a gradient in diagonal bands that moves slowly. The tone tells you which part of the site you are in.

• CrimsonInstitutional: home, about, motto, contact.
• GraphiteSystem: status, changelog, email preferences.
• PlumBlog.
• Ink blueLegal: terms, privacy, purchases and guidelines.

Typography

• Headings in sentence case, not Title Case: “Three platforms built by hand”, not “Three Platforms Built By Hand”.
• Large headings end with a period, and in heroes that period is red.
• Capitals only in short labels, with tracking (0.14 em). Never in paragraphs or headings.
• Monospaced faces (IBM Plex Mono, DM Mono) are for code and for the products that use them, not for the main site.

Components

Primary button

Kodeval red with white text. One per block: if everything is primary, nothing is.

On dark

A red button gets lost on crimson: it goes light with red text.

Action links

Red text ending in an arrow: “See platforms →”.

Labels

Only if they say something the heading doesn’t (a status, a category). If they repeat the heading, delete them.

Cards

Surface with a 1 px border and 20 px radius; 16 and 12 px for what goes inside. Not everything is a card.

Focus and touch

3 px focus ring, dark on light and light on dark. Everything tappable is at least 44 × 44 px.

Motion

The tone gradient runs its cycle in 16 seconds, at a constant speed. Every animated hero has a pause button and the choice is remembered.

With “reduce motion” on, nothing moves: neither the gradient nor the hover transitions.

Motion confirms something (the front of an illustration lifting, an arrow moving on hover). There are no cascading entrances and nothing slides in on scroll.

Voice

Kodeval writes like someone who knows what they are talking about and doesn’t need to convince you.

• Spanish is neutral with “tú”. English is plain and direct.
• Concrete before grand: what it does, for whom, with which data. No “the best experience” or “next level”.
• Honest about size: no teams, offices or clients that don’t exist.
• Real numbers and dates, or none.
• Short sentences. Colons and commas before dashes.
• Legal texts speak in a legal tone; nothing else does.

Images

• Original two-layer illustrations, like the home page carousel, in each product’s colors.
• Share previews at 1200 × 630, generated with each section’s fonts and tone (scripts/og-images.mjs).
• No stock photos, no generic people smiling at a laptop and no floating 3D shapes.

What Kodeval doesn’t do

These are the marks of a site made on autopilot. Each one is here because it once appeared on Kodeval and was removed.

• Purple or indigo gradients, and template indigo (#6366F1, #5865F2) on buttons.
• A label above every heading, or one that repeats the heading.
• Background grids, radial glows, frosted glass and colored shadows.
• Three cards with an icon each as the answer to any section.
• Forced contrasts: “It’s not X. It’s Y.”
• Headlines that say nothing: “Build the future”, “Take your site to the next level”.
• Emoji as bullets or decoration.
• Made-up data, client logos or testimonials.

The full list, for anyone writing code or copy for Kodeval, is in the CLAUDE.md file in the Kodeval repository.