Visão geral
Ruda é uma ferramenta de rastreio de documentos e captação de leads, com CRM integrado, para equipas comerciais e de marketing de empresas.
- Produto
- Ruda
- Publicado por
- Rexplore Inc.
- Sistema de design
- Vercel Geist
- Tipos de letra
- Geist Sans, Geist Mono
A interface da Ruda assenta no sistema de design Vercel Geist. A cor, a escala tipográfica, os raios e o movimento seguem o original Geist e, quando a nossa implementação e o original divergem, prevalece o original.
Geist Sans e Geist Mono, da Vercel, com licença SIL Open Font License 1.1.
Logótipo
O logótipo é a palavra RUDA, composta em Geist Sans. Não tem símbolo nem caixa com inicial.
Regras
- Sempre em maiúsculas: RUDA. No texto corrido, o produto escreve-se Ruda.
- Peso 600 (SemiBold). Nunca mais pesado.
- O espaçamento entre letras é fixo em 0.64px em todos os tamanhos, por isso a proporção diminui à medida que o logótipo cresce.
- Tamanho mínimo: 12px.
- Área de proteção: deixe livre pelo menos uma altura de maiúscula (0.71 × tamanho da letra) em todos os lados.
- Cor: #171717 em fundos claros, branco em fundos escuros. Nenhuma outra cor.
- Os leitores de ecrã anunciam o nome como Ruda, não letra a letra. Em texto alternativo, legendas e documentos, escreva Ruda.
- O logótipo lê-se sempre da esquerda para a direita, também em páginas em árabe, e nunca é traduzido nem transliterado.
Tamanhos
| Tamanho | Espaçamento | Proporção | Amostra |
|---|---|---|---|
| 12px | 0.64px | 0.053em | Ruda |
| 14px | 0.64px | 0.046em | Ruda |
| 16px | 0.64px | 0.040em | Ruda |
| 24px | 0.64px | 0.027em | Ruda |
| 32px | 0.64px | 0.020em | Ruda |
A evitar
IncorretoMinúsculas
IncorretoMaiúsculas e minúsculas
IncorretoEspaçamento alterado
IncorretoItálico
IncorretoContorno
IncorretoSombra
IncorretoGradiente
IncorretoCor fora da marca
IncorretoCaixa com inicial ou símbolo
Cor
Primeiro o neutro. O preto é a cor da marca e o azul fica reservado a links e estados. O contraste é calculado para cada token sobre branco e sobre preto.
AA significa 4,5:1 ou mais, suficiente para texto corrido. AA texto grande significa 3:1 ou mais, apenas para texto grande e elementos de interface.
| Token | HEX | Sobre branco (#ffffff) | Sobre preto (#000000) | |
|---|---|---|---|---|
| Marca | ||||
| primaryPrincipal: botões, logótipo, texto principal | #171717 | 17.93:1AA | 1.17:1Abaixo de AA | |
| primary (dark)Preenchimentos principais no modo escuro | #2e2e2e | 13.58:1AA | 1.55:1Abaixo de AA | |
| cta (dark)Botões principais no modo escuro | #ededed | 1.17:1Abaixo de AA | 17.94:1AA | |
| Azul | ||||
| linkTexto de links | #0068d6 | 5.31:1AA | 3.95:1AA texto grande | |
| link-darkTexto de links no modo escuro | #52a8ff | 2.50:1Abaixo de AA | 8.40:1AA | |
| toggle-on · toast-success · infoInterruptor ligado, aviso de sucesso, preenchimento informativo | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Beta | ||||
| badge-pinkDistintivo Beta, texto branco | #bd2864 | 5.75:1AA | 3.65:1AA texto grande | |
| badge-pink-darkDistintivo Beta no modo escuro | #b31a57 | 6.56:1AA | 3.20:1AA texto grande | |
| Desativado | ||||
| disabled-bgPreenchimento desativado | #f2f2f2 | 1.12:1Abaixo de AA | 18.76:1AA | |
| disabled-fgTexto desativado | #8f8f8f | 3.23:1AA texto grande | 6.49:1AA | |
| Cinzento | ||||
| gray-50Fundo | #f2f2f2 | 1.12:1Abaixo de AA | 18.76:1AA | |
| gray-100Fundo ao passar o cursor | #ebebeb | 1.19:1Abaixo de AA | 17.62:1AA | |
| gray-200Fundo ativo | #e6e6e6 | 1.25:1Abaixo de AA | 16.83:1AA | |
| gray-300Contorno | #ebebeb | 1.19:1Abaixo de AA | 17.62:1AA | |
| gray-800Texto secundário | #4d4d4d | 8.45:1AA | 2.48:1Abaixo de AA | |
| gray-900Texto principal | #171717 | 17.93:1AA | 1.17:1Abaixo de AA | |
| gray-500 (dark)Texto secundário no modo escuro | #a0a0a0 | 2.61:1Abaixo de AA | 8.03:1AA | |
| Estado | ||||
| successPonto e distintivo de sucesso | #45a557 | 3.10:1AA texto grande | 6.77:1AA | |
| warningAviso | #f5a623 | 2.03:1Abaixo de AA | 10.36:1AA | |
| errorErros e ações destrutivas | #e5484d | 3.91:1AA texto grande | 5.37:1AA | |
Os controlos desativados estão isentos do contraste mínimo (WCAG 1.4.3) e têm sempre disabled ou aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Tipografia
O Geist Sans compõe todo o texto da interface e do marketing. O Geist Mono serve para código e valores como HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Títulos
| Token | Tamanho | Entrelinha | Peso | Espaçamento |
|---|---|---|---|---|
| text-heading-56 | 56px | 56px | 600 | -3.36px |
| text-heading-48 | 48px | 56px | 600 | -2.88px |
| text-heading-40 | 40px | 48px | 600 | -2.4px |
| text-heading-32 | 32px | 40px | 600 | -1.28px |
| text-heading-24 | 24px | 32px | 600 | -0.96px |
| text-heading-20 | 20px | 26px | 600 | -0.4px |
| text-heading-16 | 16px | 24px | 600 | -0.32px |
| text-heading-14 | 14px | 20px | 600 | -0.28px |
Texto
| Token | Tamanho | Entrelinha |
|---|---|---|
| text-2xs | 12px | 16px |
| text-xs | 13px | 18px |
| text-sm | 14px | 20px |
| text-base | 16px | 24px |
| text-xl | 20px | 28px |
| text-2xl | 24px | 32px |
| text-3xl | 32px | 40px |
Peso
Pesos: 400 para texto, 500 para botões, 550 para ênfase, 600 para títulos e para o logótipo. 700 ou mais não são usados, e uma verificação no build rejeita-os.
Outros sistemas de escrita
- O coreano, o japonês e o chinês usam, depois do Geist, o tipo de letra do sistema de cada língua (coreano: Pretendard). Títulos de 24px ou mais apertam -0,02em; os de 20px ou menos ficam em 0.
- Os títulos em tailandês e árabe mantêm o espaçamento em 0 para não quebrar os sinais tonais nem as ligações. Os títulos tailandeses de 48px e 56px usam entrelinha de 1,2.
- As páginas em árabe correm da direita para a esquerda. O logótipo, os valores HEX e o código mantêm-se da esquerda para a direita.
Forma e espaço
Raio
- 6pxControlos e campos
- 8pxCartões, popovers, menus
- 12pxJanelas modais
Sombra
Os cartões usam uma linha de 1px em vez de sombra, e as tabelas nunca projetam sombra. As sombras ficam para as camadas flutuantes:
- Popovers e menus0 8px 24px rgba(0,0,0,.12)
- Janelas modais0 16px 48px rgba(0,0,0,.16)
Espaçamento
O espaçamento avança em múltiplos de 4px.
Movimento
- O feedback só muda cor, opacidade ou sombra. Nada aumenta nem se desloca ao premir ou ao passar o cursor.
- As transições duram de 150 a 200ms, com a curva de desaceleração Geist.
- Os popovers e as janelas modais surgem com um desvanecimento. Os fundos nunca são desfocados.
- Com a redução de movimento ativada, qualquer deslocação passa a um simples desvanecimento.
cubic-bezier(0, 0, 0.2, 1)
Contacto
Para questões sobre a utilização do nome ou do logótipo Ruda, escreva para help@rexplore.xyz.