Sistema de diseño · v1

Basoa

Basoa significa bosque en euskera: donde viven las ramas, las cornamentas y el musgo. Es el lenguaje visual de Adar: un símbolo, una paleta con nombres del bosque de noche, tres tipografías y un grafo del que crece todo lo demás.

fig. 6 el símbolo, extruido — arrástralo para girarlo

01

Principios

Crecido, no construido.

Las formas se ramifican y se afinan como algo vivo. Las curvas son suaves, los extremos redondos y nada es cuadrado porque sí.

La historia es la protagonista.

El grafo de commits es la imagen más importante. El color, el brillo y el movimiento existen para que se lea mejor.

Calma hasta que importa.

Superficies oscuras como la noche y texto gris niebla; el helecho solo donde debe ir la vista. Un acento por vista.

Vasco de corazón, abierto a todos.

Los nombres y los pequeños detalles vienen del euskera; la web habla inglés, castellano y euskera, y la app lo hará también.

03

Color

Cada color tiene un nombre en euskera tomado del bosque. Las superficies de noche sostienen la interfaz; los acentos se usan con mesura y siempre significan lo mismo. Haz clic en una muestra para copiarla.

Neutros

Tokens semánticos

TokenUsoNocheDía

04

Tipografía

Geist hace el trabajo, Instrument Serif pone el sentimiento y Geist Mono etiqueta la máquina. Usa la serif cursiva para una o dos palabras por titular, nunca para párrafos enteros.

Aa

Geist

--font-sans · 300–700

Interfaz, titulares y texto. Interletraje ajustado en tamaños grandes.

Aa

Instrument Serif Cursiva

--font-serif · 400

Palabras expresivas en titulares, términos en euskera, pies de figura.

Aa

Geist Mono

--font-mono · 400–600

Código, SHAs, refs, atajos de teclado y etiquetas.

display

Mira tu git

3xl

Elige una rama.

2xl

Merge feature/login into main

xl

Prepara archivos, bloques o líneas sueltas.

md

Adar usa el git que ya tienes instalado en tu Mac, así que funciona con las credenciales que ya usas.

sm

Las acciones destructivas preguntan antes y se pueden deshacer.

mono

a0381a2 · origin/main · ⇧⌘F

05

Espacio, forma y profundidad

Una retícula de 4 px, radios generosos y una luz que sale del contenido: brillos, no sombras pesadas.

Espaciado

    Radio

    Profundidad y brillo

    shadow-1shadow-2shadow-3glow-accent

    06

    Movimiento

    Las cosas hazi (crecen) hasta su sitio: arrancan rápido y se asientan despacio. El movimiento sigue la dirección de la historia, se detiene para quien pide reducir el movimiento, y cualquier bucle se puede pausar con el botón flotante de la esquina.

    --dur-1 · 120ms
    Hover, pulsaciones, cambios de color.
    --dur-2 · 240ms
    Interruptores, menús, movimientos pequeños.
    --dur-3 · 520ms
    Paneles, tarjetas, notas que aparecen.
    --dur-4 · 1100ms
    Apariciones y carriles que se dibujan solos.

    07

    Iconos

    Una retícula de 24 px con trazos redondos de 1,75 px, dibujados para convivir con el símbolo. La app usa Lucide; estos son los de la web. Haz clic en un icono para copiar su <use>.

    08

    Lenguaje del grafo

    El mismo vocabulario dibuja el grafo de commits de la app, la hoja de ruta y el logo. Los carriles toman los colores en un orden fijo, así que una rama conserva su color allí donde aparece.

    Vocabulario del grafo: carriles, commit, merge, trabajo en curso, HEAD y raízHEAD — relleno y brillante: dónde estás// WIP — anillo discontinuo: aún sin commitmerge — punto pequeño en el carril de destinocommit — anillo del color de su carrilplaneado — carril discontinuo (hoja de ruta)raíz — el primer commit, al pie del tronco

    09

    Componentes

    Las piezas de la web, cada una hecha solo con tokens. Cambia la vista previa para verlas de día.

    Refs
    mainfeature/graphorigin/mainorigin/experimentv0.4.0
    Chips y teclas
    NuevoMIT⌘P⇧⌘F
    Código
    $adar ~/code/shop
    Tarjeta
    Antetítulo

    Una tarjeta crece

    Superficie, borde fino y una luz suave arriba.

    10

    Voz

    Palabras sencillas, frases cortas y el nombre real de las cosas en git. Di lo que va a pasar antes de que pase.

    Sí

    • Hacer merge de feature/login en main
    • Esta rama ya estaba subida. Al guardar se reescribe en el remoto.
    • Deshecho «Borrar la rama experiment»

    No

    • Ejecutar la operación de fusión sobre las referencias seleccionadas
    • ¡Atención! ¿Estás completamente seguro?
    • ¡Ups! Algo ha salido mal 😅

    11

    Historia

    La historia es lo que hace diferente a Adar. En euskera una sola palabra, adar, nombra la rama de un árbol y la cuerna de un ciervo, y una rama de git crece igual. La web lo cuenta como una noche en el bosque, de la oscuridad al amanecer, y cada capítulo une una palabra en euskera con una parte del producto.

    #EuskeraSignificadoEn el bosqueEn Adar
    0GauaNocheLa cornamenta crece en la oscuridadQué es Adar, descarga
    IAdarEl nombreCuerna → rama de árbol → rama de gitPor qué se llama Adar
    IIEnborraEl troncoTodo bosque empieza con un troncoLa app y su grafo de commits
    IIIAdarrakLas ramasLas ramas se separan y vuelven a unirseRamas, merge, rebase, staging
    IVEraztunakLos anillosUn árbol suma un anillo al año y los guarda todosHistorial, blame, deshacer; las versiones de Adar como anillos
    VSustraiakLas raícesLas raíces beben de lo que ya hay en la tierraTu git, tus claves, tu terminal
    VIEgunsentiaAmanecerEl ciervo muda la cornamenta y le crece otra mayorVersiones y descarga
    VIIAuzolanaHecho entre todosVecinos trabajando en lo que es de todosCódigo abierto, hoja de ruta, contribuir
    1. La historia enmarca, el producto vende. Una frase de bosque y después un titular literal sobre lo que hace Adar.
    2. Solo imágenes verdaderas. Los ciervos mudan la cornamenta cada año y los árboles suman un anillo al año. Si no es verdad en el bosque, no entra.
    3. Primero el euskera, luego su significado. Las palabras en euskera, en la serif cursiva y marcadas con lang="eu", con su significado en el idioma de la página al lado.
    4. Nunca renombres git. Ramas, commits y rebases conservan su nombre; la metáfora vive en los pies de figura y en los títulos de capítulo.
    5. Sugiere el ciervo. Su cornamenta basta: nada de ciervos ilustrados, hojas ni texturas de madera en la interfaz.
    6. De la noche al amanecer. La luz crece a medida que avanza la historia, y la descarga está al amanecer.

    12

    Descargas

    Todo tiene licencia MIT, como el resto de Adar. Úsalo en artículos, charlas, forks e integraciones; solo no presentes un fork como el Adar oficial.