Sistema de design · v2.0

Isolinha

A linguagem visual do site 2.0. Herda do site original o carmim, as curvas de nível e os títulos de grande presença, mas reconstrói tudo como tokens e componentes reutilizáveis.

Princípios

Cartografia como linguagem

Carmim como território. A cor de marca do site original (#A40000) vira uma escala de dez tons. O carmim ocupa capas e ações; o resto da página fica em neutros quentes de papel e tinta, como num mapa impresso.

Isolinhas. As curvas de nível da capa original agora são geradas por código (marching squares sobre um relevo sintético), a cada build, em SVG leve e herdando a cor do tema.

Anotação cartográfica. Datas, horários, coordenadas e rótulos usam fonte monoespaçada em caixa alta, como legendas de carta topográfica. A escala gráfica no rodapé é a assinatura do sistema.

Editorial e acadêmico. Títulos em serifa (Newsreader) substituem a fonte condensada em caixa alta, mantendo a presença e trazendo leitura de periódico científico.

Isolinhas · componente .isolinhas

0 — 400 mEscala gráfica · .escala

Cor

Primitivos

Carmim

--carmim-50#fbf2f0

--carmim-100#f7e0dc

--carmim-200#f0bfb7

--carmim-300#e3928a

--carmim-400#cf5f52

--carmim-500#b8342a

--carmim-600#a01c14 · marca

--carmim-700#80150f

--carmim-800#5e100c

--carmim-900#3c0a08

Papel & Tinta

--papel-0#ffffff

--papel-50#faf8f4

--papel-100#f3efe8

--papel-200#e8e1d7

--papel-300#d6ccbe

--tinta-400#9a9086

--tinta-500#736a61

--tinta-600#554e47

--tinta-700#3b3631

--tinta-800#26221f

--tinta-900#171412

Oceano

--oceano-100#dcebee · acento

--oceano-500#2c6a78 · acento

--oceano-700#1c4a55 · acento

Semânticos

Componentes usam apenas estes tokens. Eles mudam de valor no tema escuro (prefers-color-scheme), então nada precisa ser redesenhado.

--cor-fundo

--cor-superficie

--cor-superficie-alt

--cor-borda

--cor-texto

--cor-texto-2

--cor-marca

--cor-marca-suave

--cor-acento

--cor-capa

Tipografia

Três vozes

--fs-display · Display · Newsreader 400Geocrítica

--fs-3xl · Título de páginaEdições anteriores

--fs-2xl · Título de seçãoUm reencontro do Grupo

--fs-lg · Subtítulo / destaqueA geografia ibero-americana no contexto contemporâneo

--fs-base · Corpo · Public Sans 400Os Colóquios Internacionais de Geocrítica se realizam desde o ano de 1999.

--fs-xs · Rótulo · IBM Plex Mono 50022°54′40″S 43°14′10″W

Espaço

Base de 4 px

--esp-1

--esp-2

--esp-3

--esp-4

--esp-5

--esp-6

--esp-7

--esp-8

--esp-9

--esp-10

Forma

--raio-1

--raio-2

--raio-3

--raio-pilula

Componentes

Biblioteca

Botões · .botao

Primário Secundário PequenoClaro Contorno

Rótulos e etiquetas · .rotulo .etiqueta

Rótulo de seçãoMarcaNeutraAcento

Aviso · .aviso

Marca

Prazos, status e chamadas.

Neutro

Informação complementar.

Acento

Destaques pontuais.

Cartões e pessoas · .cartao .pessoa

Mesa 01

Redes técnicas, Indústria e Território

06/05 · 9:00–12:003 trabalhos

Horácio Capel
Grupo Geocrítica · Universidade de Barcelona
Nome Sem Foto
Iniciais automáticas

15Edições

1.790Apresentações

Uso

<link rel="stylesheet" href="assets/css/fonts.css">
<link rel="stylesheet" href="assets/css/tokens.css">      <!-- camada 1: tokens -->
<link rel="stylesheet" href="assets/css/geocritica.css">  <!-- camada 2: componentes -->

<a class="botao botao--secundario" href="...">Apresentação</a>
<p class="rotulo">Programação</p>