Sciensa Hub · Design System
Baixar .md ← Voltar
// DESIGN SYSTEM

Sciensa Design System

Referência visual para designers e desenvolvedores. Tudo que define a identidade da Sciensa — cores, tipografia, componentes e princípios — em um único lugar.

Space Grotesk #22AEA4 → #5EB359 Warm Minimalism
// 01 — CORES

Paleta de Cores

O sistema usa uma única dupla de cores de marca — teal e verde — sempre em gradiente, nunca isolados. Todo o restante é neutro.

Brand
Brand Gradient
linear-gradient →
Hero, CTA banner
Teal
#22AEA4
Links, tags, estados ativos
Green
#5EB359
Midpoint do gradiente. Nunca solo.
Texto
Text Primary
#000000
Títulos, números, labels
Text Secondary
#4e4e4e
Body copy, descrições
Text Muted
#717171
Labels, captions, eyebrows
Superfícies
Page Surface
#f5f5f5
Background global, "palco"
Card Surface
#ffffff
Todas as section cards
Dark
#000000
CTA banner, black-pill btn
Warm Stone
rgba(245,242,239,…)
warm-stone button variant
Bordas
Border Default
#e5e5e5
Dividers, separadores
Border Subtle
rgba(0,0,0,0.05)
Nested containers
// 02 — TIPOGRAFIA

Tipografia

Space Grotesk em todas as variações. Weight 300 para headlines — leveza como autoridade. Nunca 700 em títulos de seção.

Sciensa AI
Display / Hero
clamp(2.5rem, 5vw, 3.5rem)
weight 300 · ls -0.02em · lh 1.08
Transforme sua empresa com IA
Section Heading
clamp(1.75rem, 3vw, 2.25rem)
weight 300 · ls -0.01em · lh 1.17
Combinamos estratégia, engenharia e design para construir produtos de IA que realmente funcionam.
Subheading / Lead
clamp(1rem, 1.5vw, 1.125rem)
weight 400 · ls 0.011em · lh 1.60
O texto de corpo usa 15px com line-height relaxed. Cor secondary (#4e4e4e) para manter o contraste sem pesar visualmente. Ideal para descrições de features e parágrafos de produto.
Body
15px · weight 400
ls 0.01em · lh 1.65
Nav links, dropdowns, metadados. 13px com peso 400–500.
Body Small
13px · weight 400–500
// WHY SCIENSA
MonoLabel / Eyebrow
12px · weight 500
uppercase · ls 0.08em
TICKER LABEL · TIMESTAMP · META
Caption
11px · weight 500
uppercase · ls 0.10em
240+
Projetos entregues
Stat / Counter
30px · weight 300
ls -0.025em · CountUp
// EYEBROW
Code inline
JetBrains Mono 13px
bg #f3f3f3 · color teal
// 03 — BOTÕES

Botões

Todos os botões usam border-radius: 9999px — o pill é o elemento mais reconhecível do sistema. Nunca retângulos em CTAs.

Variantes
Primary CTA — fundos claros
On-dark CTA — hero, CTA banner
Destaque especial — assessment
Terciário — ações secundárias
focus-ring
Focus ring — WCAG AA+
Especificações
VarianteBackgroundTextoPaddingUso
black-pill#000000#fff · 13px · 5006px 16pxNav CTA, ações primárias em fundo claro
white-pill#ffffff#000 · 15px · 50010px 20pxCTAs no hero e CTA banner
warm-stonergba(245,242,239,.95)#000 · 15px · 50012px 20pxAssessment, destaque especial
ghosttransparent#000 · 15px · 5008px 16pxLinks secundários, texto-ação
// 04 — CARDS & ELEVAÇÃO

Cards & Elevação

Sombras sub-0.1 de opacidade — elevação sentida, não vista. O anel de 1px zero-blur define a borda do card sem linha dura.

Level 0
Flat
No shadow
Page bg, #f5f5f5
Level 1
Card
0px 0px 0px 1px rgba(0,0,0,.06)
.el-card
Level 2
Card Large
+ 0px 4px 8px rgba(0,0,0,.04)
.el-card-lg
Level 3
Dropdown
0 8px 32px rgba(0,0,0,.10)
Nav menus, floating
Level 4
Button white
rgba(0,0,0,.40) 0px 0px 1px
white-pill button
Level 5
Warm btn
rgba(78,50,23,.06) 0px 6px 16px
warm-stone button
Border Radius Scale
4px
Nav items
8px
Dropdown rows
12px
Platform tiles
16px
Section cards
20px
Large cards
9999px
Buttons (pill)
// 05 — COMPONENTES

Componentes

Demos ao vivo dos principais padrões de UI do sistema.

MonoLabel (Eyebrow)
// WHY SCIENSA
Em fundo claro
// WHY SCIENSA
Em fundo escuro
Tags & Badges
GenAI Strategy AI Experts Assessment AI Produto Digital Agentic
Navegação
Soluções
Plataforma
Cases
Sobre
Stat Grid
240+
Projetos
8 anos
De mercado
60+
Clientes
Logo Ticker
iFood
PicPay
Crefisa
Stelo
ASA Bank
Obvious
iFood
PicPay
Crefisa
Stelo
ASA Bank
Obvious
CTA Banner
// CTA
Pronto para começar?
"A Sciensa nos ajudou a sair do piloto para produção em 6 semanas."
// 06 — LAYOUT & ESPAÇAMENTO

Layout & Espaçamento

Base unit de 4px. O gap entre cards é propositalmente apertado (12px) para criar um feel de bento-grid. Espaçamento interno generoso.

Escala de Espaçamento
3 · 12px
Inter-card gap — tight bento feel
4 · 16px
Base unit, gaps menores
5 · 20px
Padding horizontal mobile
10 · 40px
Card padding horizontal desktop
12 · 48px
Card padding vertical mínimo
20 · 80px
CTA banner padding vertical
60px
Feature pillar vertical padding
Estrutura da página
Header — fixed · frosted glass · 56px · z-50
Hero — pt-20 pb-3 · h-[86vh] · video + gradient overlay
Logo Ticker — py-3
Stats — py-3
Why Sciensa (3 feature pillars) — py-3
Industries Grid — py-3
Capabilities · Platform · Insights — py-3
CTA Banner — py-3 pb-6 · única exceção ao card branco
/* Container padrão */ .section-wrapper { max-width: 1336px; margin: 0 auto; padding: 12px 16px; /* py-3 px-4 */ } /* Card de seção */ .section-card { background: #ffffff; border-radius: 16px; padding: 48px 40px; /* py-12 px-10 */ box-shadow: rgba(0,0,0,.06) 0 0 0 1px, rgba(0,0,0,.04) 0 1px 2px, rgba(0,0,0,.04) 0 2px 4px; }
// 07 — DOS & DON'TS

Dos & Don'ts

As regras que mantêm o sistema coeso. Decorar 3: pill, weight 300, teal apenas em gradiente.

DO
  • Space Grotesk weight 300 em todos os h1, h2, h3
  • rounded-2xl (16px) em todas as section cards
  • Full pill (9999px) em todos os botões
  • Prefixar eyebrows com // — ex: // WHY SCIENSA
  • mix-blend-multiply em logos do ticker
  • Gradiente teal/verde apenas como overlay (mix-blend-mode)
  • Inter-card gap fixo em 12px (py-3)
  • Usar clamp() para tamanhos de display e heading
DON'T
  • Usar azul, laranja ou roxo como cor de marca
  • Usar font-bold (700) em títulos de seção
  • Quebrar o padrão white card on gray surface (exceto CTA banner)
  • Sombras com opacidade acima de rgba(0,0,0,0.10)
  • Usar border: 1px solid como definição primária de card
  • Usar #22AEA4 como background de botão
  • Botões retangulares ou quadrados em qualquer CTA
  • Letter-spacing positivo em headlines
Copiado!