Design System
Fundamentos
Tokens base do Studio Kit — cores, tipografia, espaçamento, radius, sombras, marca e imagens.
Cores
Paleta semântica com tokens CSS. Dark é o tema principal; Light via classe .light.
Fundos
Background
--background
Background Secondary
--background-secondary
Card
--card
Acento (ambos os temas)
Cyan — cor principal
--primary / --accent
#00ADCFTexto sobre primary
--primary-foreground
#E8F4FBFocus ring
--ring
#00ADCFTexto
Foreground
--foreground
Destructive
--destructive
Tipografia
Família única: Manrope. Nunca misturar com outra fonte. Escala com clamp para display e h1.
Display
clamp(2.5rem, 5vw, 4rem)
w800
Design system autoral
H1
clamp(2rem, 4vw, 3rem)
w700
Título principal da página
H2
1.875rem
w700
Seção de conteúdo
H3
1.375rem
w600
Subseção e cards
Body LG
1.125rem
w400
Texto introdutório e subtítulos de seção com espaço de leitura.
Body
1rem
w400
Texto corrido de parágrafos, descrições e instruções gerais.
Caption
0.8125rem
w400
Labels, metadados, notas de rodapé e texto auxiliar.
Espaçamento
Tokens de ritmo — usados em py-section, px-gutter e max-w-container.
section
spacing.section
6rem / 96px
Padding vertical de seções maiores (hero, cta)
section-sm
spacing.section-sm
4rem / 64px
Padding vertical de seções internas
gutter
spacing.gutter
1.5rem / 24px
Padding horizontal padrão de seções
container
maxWidth.container
64rem / 1024px
Largura máxima do conteúdo
Radius
Token base: --radius: 0.5rem. Tailwind deriva rounded-lg, rounded-xl etc. Para re-branding, altere apenas --radius.
Nenhum
0rem
Tabelas, separadores
sm
0.125rem
Tags internas
md (base)
0.375rem
Botões, inputs
lg
0.5rem
Cards, panels
xl
0.75rem
Modais, drawers
2xl
1rem
Hero cards, CTAs
full
9999px
Badges, avatares
Sombras
Sombras theme-aware via var(--shadow-*). Mudam automaticamente no tema light.
hero
--shadow-hero
Seções hero, modal principal, cards de destaque
card
--shadow-card
Cards de conteúdo, painéis laterais
metric
--shadow-metric
Cards de métricas, números em destaque
glow
--shadow-glow
Botão primário hover, ícones em destaque
lift
--shadow-lift
Elevação + glow no hover de cards (hover-lift)
Animações & efeitos
Microinterações da identidade Studio. Utilitários prontos — todos respeitam prefers-reduced-motion.
Destaque com glow
Gradiente azul-marca → accent recortado no texto, com glow suave.
.hl Não entregamos templates. Criamos presença.
Elevação no hover
Card sobe 4px e ganha glow. Passe o mouse nos cards abaixo.
.hover-lift Presença
Passe o mouse para ver a elevação.
Captação
Passe o mouse para ver a elevação.
Marca
Passe o mouse para ver a elevação.
Brilho no botão + ícone
Padrão em todos os botões — primário, outline e variantes. Passe o mouse para ver o brilho varrer.
.btn-shine Marquee contínuo
Rolagem infinita com fade nas bordas. Base do componente Carousel.
animate-marquee Reveal na entrada
Fade + sobe ao surgir. Combine com IntersectionObserver para revelar no scroll.
animate-reveal Marca & Logo
Identidade visual do CarlosHPS Studio. Usar apenas nos formatos aprovados.
Studio Kit
CarlosHPS Studio
Studio Kit
CarlosHPS Studio
Ícone solo — favicons, avatares
Permitido
- Logo completo em fundo navy ou branco frio
- Ícone solo em tamanhos ≥ 24px
- Versão monocromática em preto ou branco
Proibido
- Alterar cores do logotipo
- Distorcer proporções
- Usar sobre fundos que comprometam contraste
Imagens & Figuras
Proporções, tratamento e uso consistente com a atmosfera premium do Studio.
Proporções aprovadas
Hero, banners, OG image
Cards de conteúdo
Avatares, thumbnails
Retratos, editorial
Tom
Imagens com paleta fria, ambientes limpos, luz natural difusa. Evitar saturação alta ou filtros quentes.
Pessoas
Retratos profissionais, enquadramento 3/4 ou rosto. Fundo neutro ou desfocado. Qualidade editorial.
Tratamento
Leve dessaturação (+frio). Contrast sutil. Nenhum filtro artístico excessivo ou stock excessivamente genérico.