Uma marca sólida, precisa e clara. E o mesmo vocabulário no Figma e no CSS.

Marca

O símbolo é um A geométrico de topo plano com um travessão azul: a letra inicial, estável como um pico, e a linha que marca o corte de custo. Dois elementos, duas cores, nenhum efeito. Funciona de 16 px até um outdoor.

PositivoSVG

Fundos claros. Navy #0A1A3D + azul #1E8FFF.

NegativoSVG

Fundos escuros e fotos. Branco + azul #1E8FFF.

Monocromáticopreto

Uma cor só: carimbo, gravação, impressão em 1 cor. Há também a versão branca e a currentColor para uso em código.

Monocromático negativoSVG

Quando o azul não puder ser reproduzido sobre fundo escuro.

Isotipo

O símbolo sozinho, para favicon, avatar, ícone de app e espaços onde o nome já está por perto.

Ícone de appSVG

Fundo navy, raio 22%. Base do favicon e do ícone de app.

PositivoSVG

Sem fundo, para superfícies claras.

NegativoSVG

Sem fundo, para superfícies escuras.

Mono (currentColor)SVG

Herda a cor do texto. Use inline no HTML.

Área de proteção e tamanho mínimo

Reserve ao redor da marca uma margem igual à altura do travessão vezes seis, ou, na prática, a altura do A dividida por dois (x no diagrama). Nada entra nessa área: texto, borda, outro logo.

Arquivos

Todos os SVGs são paths puros: sem fontes, máscaras, gradientes, filtros ou grupos aninhados. O wordmark é a DM Sans Bold convertida em curvas, então não depende de a fonte estar instalada.

Cores

Duas camadas. Primitivos são as escalas fixas (o valor nunca muda). Semânticos são os papéis (fundo, texto, destaque) e mudam com o tema. No código, use sempre o semântico; o primitivo só entra quando a cor é a própria marca, como no logo. Todos os pares texto/fundo abaixo passam WCAG AA nos dois temas; o valor de contraste é calculado ao vivo no tema em que você está.

Marca

brand-500 é o azul do travessão. brand-950 é o navy do símbolo, do hero e do fundo escuro. brand-700 é o azul de ação no tema claro.

Neutros

Estado

Semânticos (tema atual, com contraste ao vivo)

O selo mostra a razão de contraste contra o fundo indicado no título ao passar o mouse. Verde: AAA (7:1 ou mais). Azul: AA. Vermelho: abaixo do mínimo. Troque o tema no topo para revalidar.

Tipografia

Duas famílias, cada uma com um papel. Fraunces só em títulos, pesos 600 e 700: dá a voz sólida. DM Sans em todo o resto, 400 a 700: clara e neutra, com números tabulares para tabelas de custo. Fallbacks reais no font-family, nada fica invisível se a fonte não carregar.

Escala (rem, base 16 px)

No site os títulos usam clamp() entre dois degraus da escala (--fs-4 a --fs-6 no styles.css) para fluidez entre 360 px e 1440 px. Entrelinha: --leading-tight 1.1 em títulos, --leading-body 1.6 em texto.

Espaçamento

Grid de 4 px. Todo espaço interno e externo é um múltiplo de 4, expresso em rem. Componentes usam 3, 4 e 6; seções usam 12 a 24. Largura máxima de conteúdo --wrap-max 72rem (1152 px); leitura longa em 46rem.

Forma e movimento

Cantos generosos mas não infantis: 8 em inputs e botões pequenos, 12 em cards internos, 16 em cards, 24 em painéis, pílula em CTAs. Sombra só em elevação real (card em hover, modal), nunca decorativa. Movimento curto e com a mesma curva sempre; tudo respeita prefers-reduced-motion.

Duração (passe o mouse)

Curva única: --ease-standard cubic-bezier(0.2, 0.7, 0.2, 1). Hover e foco usam fast; entrada de conteúdo usa slow; nada acima de 480 ms.

Componentes

Os mesmos elementos que o site renderiza, nas mesmas classes. Os estados são forçados com as classes .is-hover, .is-focus e .is-active só para exibição; no uso real bastam os pseudo-seletores. Alvo mínimo de toque 44 px em tudo que é clicável.

Botões

Tamanhos: .btn--sm 44 px, padrão 44 px, .btn--lg 52 px. Um primário por tela. Ghost só sobre o hero ou dentro de card, nunca solto no fundo claro.

Campos

Links

Tags e selos

Card e acordeão

Tokens e código

Uma fonte de verdade, três destinos. tokens.css para qualquer front-end; tokens.json no formato W3C Design Tokens para o Figma (plugin Tokens Studio, importar como arquivo único) e para gerar temas; e o mapa Tailwind abaixo, que aponta as classes utilitárias para as mesmas variáveis, então trocar o tema não exige rebuild.

CSS puro

<link rel="stylesheet" href="https://arthos.tech/tokens.css">

.cta {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font: var(--weight-semibold) var(--text-base)/1 var(--font-sans);
  transition: background var(--duration-fast) var(--ease-standard);
}
.cta:hover { background: var(--color-accent-hover); }
.cta:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 3px; }

/* tema: automático por prefers-color-scheme; forçado com data-theme="dark" | "light" no <html> */

Tailwind CSS (v3 ou v4)

// tailwind.config.js  (as classes viram bg-brand-500, text-fg-muted, rounded-lg, p-4 ...)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand:   { 50:'var(--brand-50)', 100:'var(--brand-100)', 200:'var(--brand-200)', 300:'var(--brand-300)', 400:'var(--brand-400)', 500:'var(--brand-500)', 600:'var(--brand-600)', 700:'var(--brand-700)', 800:'var(--brand-800)', 900:'var(--brand-900)', 950:'var(--brand-950)' },
        bg:      { DEFAULT:'var(--color-bg)', elev:'var(--color-bg-elev)', alt:'var(--color-bg-alt)' },
        fg:      { DEFAULT:'var(--color-fg)', muted:'var(--color-fg-muted)', faint:'var(--color-fg-faint)' },
        line:    { DEFAULT:'var(--color-line)', strong:'var(--color-line-strong)' },
        accent:  { DEFAULT:'var(--color-accent)', hover:'var(--color-accent-hover)', active:'var(--color-accent-active)', fg:'var(--color-accent-fg)', soft:'var(--color-accent-soft)', text:'var(--color-accent-text)' },
        success: { DEFAULT:'var(--color-success)', soft:'var(--color-success-soft)' },
        warning: { DEFAULT:'var(--color-warning)', soft:'var(--color-warning-soft)' },
        danger:  { DEFAULT:'var(--color-danger)',  soft:'var(--color-danger-soft)' },
      },
      fontFamily: { sans: ['DM Sans', 'system-ui', 'sans-serif'], display: ['Fraunces', 'Georgia', 'serif'] },
      fontSize: { '2xs':'0.75rem', xs:'0.8125rem', sm:'0.875rem', base:'1rem', md:'1.125rem', lg:'1.25rem', xl:'1.5rem', '2xl':'2rem', '3xl':'2.5rem', '4xl':'3rem', '5xl':'4rem' },
      borderRadius: { xs:'4px', sm:'8px', md:'12px', lg:'16px', xl:'24px', pill:'999px' },
      transitionDuration: { fast:'120ms', base:'200ms', slow:'320ms' },
      transitionTimingFunction: { standard:'cubic-bezier(0.2, 0.7, 0.2, 1)' },
    },
  },
}

/* Tailwind v4: o mesmo em CSS */
@import "tailwindcss";
@theme {
  --color-brand-500: var(--brand-500);
  --color-accent: var(--color-accent);
  --font-sans: "DM Sans", system-ui, sans-serif;
  --radius-pill: 999px;
}

Figma

Instale o plugin Tokens Studio for Figma, escolha "Import" e aponte para tokens.json. Os grupos viram sets (brand, neutral, theme.light, theme.dark, font, space, radius). Ative theme.light ou theme.dark para alternar o tema nos componentes. Os SVGs da marca entram direto no Figma como vetores editáveis (arraste o arquivo). Estilos globais e variantes de componentes devem ser criados no Figma a partir desses sets; este guia é a referência de nomes e valores.

Uso correto