Design System — Rennan Gimenez

1. Contexto do Projeto

Tipo: Portfólio Profissional Pessoal e Landing Page
Domínio: rennangimenez.com
Estilo Visual: Dark Mode obrigatório, design minimalista, clean e moderno
Estética: "Neon Tech" — engenharia de software, inteligência artificial e alta performance

2. Paleta de Cores (Design Tokens)

#050B14

Deep Space

--bg-principal

Fundo principal absoluto da página

#0F172A

Navy Surface

--bg-surface

Fundo de cards, modais e seções de quebra

#2F73D2

Neon Blue

--primary-neon

Identidade da marca — ícones, links, bordas, botões primários

#5A98F2

Glow Blue

--primary-glow

Transições, hover e sombras neon

#E2E8F0

Ice White

--text-main

Cor padrão para parágrafos, títulos e leitura longa

#94A3B8

Muted Blue

--text-muted

Subtítulos, datas, metadados, tags e rodapé

        /* CSS Variables */

        --bg-principal: #050B14;

        --bg-surface: #0F172A;

        --primary-neon: #2F73D2;

        --primary-glow: #5A98F2;

        --text-main: #E2E8F0;

        --text-muted: #94A3B8;

3. Tipografia

Inter — Títulos e textos gerais

The quick brown fox

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn

400 Regular · 500 Medium · 600 SemiBold · 700 Bold · 800 ExtraBold

JetBrains Mono — Detalhes técnicos e tags

const quality = "automated";

0123456789 → {} [] () <>

400 Regular · 500 Medium · 600 SemiBold

Sans-serif moderna e geométrica para títulos e corpo de texto
Monospace elegante para elementos que remetem a código/tecnologia
Regra: Nunca usar branco puro (#FFF) ou preto puro (#000) em blocos de texto

4. Layout e Superfícies

#050B14 como cor base do body
Evitar bordas sólidas grossas — preferir transições suaves e degradês
Usar --bg-surface com cantos arredondados para criar "camadas flutuantes"
Glassmorphism sutil é bem-vindo se não comprometer o minimalismo

Glassmorphism Card

Surface Card Example

Cards flutuantes com background semi-transparente, backdrop-filter blur e borda sutil em neon blue.

5. Efeitos Visuais (Neon Tech)

Elementos interativos com efeito de brilho (glow) cyberpunk minimalista
Usar box-shadow e drop-shadow com --primary-neon em baixa opacidade
Ativar --primary-glow no :hover

Glow on Hover

        /* Neon Glow Effect */

        box-shadow: 0 0 20px rgba(47, 115, 210, 0.15);

        /* Strong Glow (hover) */

        box-shadow: 0 0 30px rgba(47, 115, 210, 0.2),
            0 0 60px rgba(47, 115, 210, 0.05);

6. Botões (CTAs)

Borda sólida fina (1px) com --primary-neon e texto em --primary-neon
Hover: preenchimento leve do fundo + box-shadow brilhante
Variante filled para ação principal (download CV, etc.)

Primary Outline Filled CTA Ghost Button

7. Fluxo de Trabalho

Representação visual obrigatória do workflow AI-First Engineering:

AI-First Engineering.

→

Think Build Validate Maintain Scale