R

Styleguide & Tokens

Voltar para o site

Theme Preview

Cores

A paleta é baseada em alto contraste (Dark/Light) com um tom de destaque vibrante (Lime Green).

Dark BG

#111111

Surface

#1A1A1A

Accent (Main)

var(--color-accent)
Dark: #C8F04E
Light: #A7D226

Light BG

#EFEFEF

Cores Semânticas (Status)

Success

var(--color-success)

Warning

var(--color-warning)

Error

var(--color-error)

Info

var(--color-info)

Tipografia

Combinação de Serif (para elegância e títulos) e Sans-serif (para legibilidade e UI).

Heading / Playfair Display

The quick brown fox

Raul de Sousa Lima

Font: Playfair Display | Weight: 700, 800

Body / Inter

Design como ponte entre empatia e resultado.

Tenho 15 anos de experiência trabalhando com produtos digitais — criando experiências que conectam pessoas, produtos e estratégia de negócios.

Font: Inter | Weight: 300, 400, 500, 600

Componentes

Elementos reutilizáveis que mantêm a consistência visual.

Botões

Tags & Pills

User-Centered Design Data-Driven Agile AI Solutions Success Warning Error Info
Status Badge

Cards (Grid / Lead)

🧭

Leadership & Culture

Exemplo de card de atuação em área de liderança.

🖼️

Preview Case

Título do Projeto

Descrição curta do caso de estudo.

Ícones (Tabler Icons)

Utilizamos Tabler Icons (versão webfont). A classe base é ti seguida de ti-*nome-do-icone*. Os ícones herdam cor e tamanho do texto local (ex: ``).

ti-brand-linkedin
ti-brand-behance
ti-mail
ti-arrow-right
ti-briefcase

Raio (Borders)

Scalas de arredondamento suaves para botões e containers.

Small (0.5rem)

--radius-sm

Medium (1rem)

--radius-md

Large (1.5rem)

--radius-lg

Pill (999px)

--radius-pill