light
Wordmark "RENEXT"
Versão principal do logotipo. Usada em cabeçalhos, hero e papelaria.
- Uso recomendado
- Clear-space: altura do "X". Tamanho mínimo de leitura: 64 px de largura.
Brand book
Linguagem visual da casa — do wordmark editorial à régua de tokens oklch.
Esta página é a fonte canônica da identidade visual do projeto Renext. Cor, tipografia, ícones. Tudo aqui é derivado de`src/theme/*` e de`src/constants/*` — nada hardcoded.
Logos
Wordmark, monograma, favicon
Três variantes do logotipo para diferentes escalas e suportes — todas derivadas dos arquivos em /public.
light
Monograma "R"
Para favicon, avatar social, app icon. Pontos pequenos (≤ 24 px).
- Uso recomendado
- Áreas quadradas ou redondas; mantém o stroke em 2 px.
light
Favicon raster — 32x32
Bitmap entregue para compatibilidade legada (`.ico`).
- Uso recomendado
- Head `<link rel="icon">` apenas; nunca use em composições grandes.
Tipografia
Inter + Space Grotesk
Texto corre em Inter. Display, kickers e numeração em Space Grotesk. Carregadas via Google Fonts no <head> do Layout.
Sans + Display
Inter + Space Grotesk
Inter para texto, corpo e microcopy.Space Grotesk para títulos, kickers e numeração (tabular-nums). Carregadas via Google Fonts em`Layout.astro`.
LightAa300
RegularAa400
MediumAa500
SemiboldAa600
BoldAa700
Escala
Escala fluida
`fontSize.xs..7xl` — 8 paradas base. Em hero usamos`clamp(2.5rem, 5vw, 3.5rem)` para escalar suave.
- fontSize.xs (0.75rem / 12px)Renext, claramente.
- fontSize.sm (0.875rem / 14px)Renext, claramente.
- fontSize.md (1rem / 16px)Renext, claramente.
- fontSize.lg (1.125rem / 18px)Renext, claramente.
- fontSize.xl (1.25rem / 20px)Renext, claramente.
- fontSize.2xl (1.5rem / 24px)Renext, claramente.
- fontSize.3xl (1.875rem / 30px)Renext, claramente.
- fontSize.4xl (2.25rem / 36px)Renext, claramente.
Cores
Paleta em oklch()
Cores primárias, secundárias e grays. Sempre oklch() — percepção uniforme, sem hex/rgb/hsl. Nenhum token novo entra no projeto sem ser aprovado.
oklch(51.39% 0.2642 300.18)CTAs principais, âncoras do hero.
oklch(60.47% 0.2777 320.26)Tom claro das marcas — gradientes brand.
oklch(69.07% 0.0941 310.61)Hover suave sobre fundos escuros.
oklch(96.32% 0.0034 325.60)Tipografia primária sobre fundos escuros.
oklch(26.03% 0 0)Fundo padrão do site (dark mode).
oklch(26.45% 0 0)Camada intermediária entre dark e white.
oklch(75.72% 0 0)Bordas suaves em fundos claros.
oklch(55.90% 0 0)Texto de apoio / muted em fundos claros.
oklch(53.13% 0 0)Texto de corpo / body em fundos claros.
oklch(58% 0.22 255)Tom de azul-violeta — reservado para acentos.
oklch(56% 0.24 270)Erros / validações negativas.
oklch(69.59% 0.1491 162.48)Sucesso em chip/badge de desconto.
oklch(76.86% 0.1647 70.08)Avisos (ex.: chip de "rastreio em breve").
oklch(62.31% 0.1880 259.81)Mensagens informativas.
Gradientes
Da marca ao overlay
Gradientes são compostos a partir da paleta — brand, brandSoft, brandSubtle, overlay e os auxiliares de estado.
brand
brandMarca pura — destaca CTAs principais e botões glow.
brandSoft
brandSoftTint 15% — fundo de destaque discreto para hero/banner.
brandSubtle
brandSubtleTint 6% — surfaces muito leves (hover, focus ring).
text
textTexto com gradação escura (dark → grayDefault).
overlay
overlayOverlay translúcido sobre imagens.
danger
dangerIndicador de perigo (ex.: botão de apagar).
success
successIndicador de sucesso (ex.: chip de desconto).
warning
warningIndicador de aviso.
info
infoIndicador de mensagem informativa.
Ícones
Lucide, Tabler e o set local
Ícones consumidos de @iconify-json/lucide, @iconify-json/tabler e do diretório local src/icons/*.svg. Nunca instalar nova lib.
lucide:globelucide:share-2lucide:trending-uplucide:palettelucide:clapperboardlucide:pen-toollucide:wrenchlucide:instagramlucide:facebooklucide:linkedinlucide:twitterlucide:arrow-up-righttabler:brand-xtabler:checklocal:ai-starlocal:ai-sunlocal:ai-moonlocal:renextlocal:renext-stroke