Tokens
Valores do sistema
Preme calquera mostra para copiar o valor. Todos existen como variable CSS en tokens.css e como chave en tokens.json.
Paleta principal
As cinco cores do logotipo, máis os neutros de superficie e o verde escurecido que si acada contraste AA en texto pequeno.
Paleta secundaria e roles
A paleta da costa de Baiona úsase para codificar categorías (etapas, tipos de aviso, cores de calendario), non como cor xeral de interface.
Tipografía
Fredoka para titular, Nunito para ler. Ambas de Google Fonts con licenza SIL Open Font License.
| Token | Tamaño | Uso | Mostra |
|---|---|---|---|
--bl-txt-3xl | 38 px | Titular de páxina | Belesar |
--bl-txt-2xl | 26 px | Título de sección | Belesar |
--bl-txt-xl | 22 px | Subtítulo, título de tarxeta | Belesar |
--bl-txt-lg | 17 px | Entradilla | Belesar |
--bl-txt-base | 15 px | Texto corrido e formularios | Soñamos o porvir |
--bl-txt-sm | 13.5 px | Táboas, botóns, texto auxiliar | Soñamos o porvir |
--bl-txt-xs | 12 px | Etiquetas e metadatos | Soñamos o porvir |
Espazado, radios e sombras
| Espazado | Valor |
|---|---|
--bl-e1 … e3 | 4 · 8 · 12 px · dentro dun compoñente |
--bl-e4 … e6 | 16 · 20 · 24 px · entre elementos |
--bl-e8 … e12 | 32 · 40 · 48 px · entre bloques |
| Radio | Valor |
|---|---|
--bl-r-sm | 8 px · campos e chips |
--bl-r-md | 12 px · botóns |
--bl-r-lg | 16 px · tarxetas |
--bl-r-xl | 20 px · paneis grandes |
Puntos de corte
| Corte | Comportamento |
|---|---|
< 768 px | Móbil. Unha columna, menú agochado tras a icona de tres liñas, táboas convertidas en tarxetas cun rexistro por tarxeta. |
768–1023 px | Tableta. Dúas columnas, menú visible en fila, cabeceira con símbolo e nome do centro. |
≥ 1024 px | Escritorio. Ata tres columnas, ancho máximo de contido 1280 px centrado. |