Design System · v1 · Maio 2026 Para Bem Viver Ambientes Planejados

Design system vivo para morar

Tipografia, cores, componentes, layout e motion — documentados nos mesmos tokens, classes e animações usadas no site da Bem Viver. O que está aqui é replicável, auditável e self-contained.

Começar pela tipografia Abrir o site

Rolar para conhecer

Display XXL · Hero

Marcenaria autoral feita para morar Brasília

clamp 64–144 / 0.95
Instrument Serif

Heading 1 · Section

Seis territórios da casa.
Uma marcenaria autoral.

clamp 40–68 / 1.02
Instrument Serif

Heading 2 · CTA

Pronto para desenhar a sua casa com a gente?

clamp 34–56 / 1.05
Instrument Serif

Heading 3 · Card

Cozinhas planejadas

30px / 1.05
Instrument Serif

Heading 3 · Pcard

Cozinha de família · 22m²

28px / 1.05
Instrument Serif

Heading 4 · Brand

Bem Viver

42px italic / 1
Instrument Serif

Display Italic · Stat

14 2012

42–44 italic / 1
Instrument Serif

Italic Display · Marquee

Cozinhas planejadas ·

22px italic
Instrument Serif

Body L · Info value

Rua 25 Sul, Lote 30,
Bloco A, Loja 101 — ParkStyle Mall

19px / 1.35
Instrument Serif

Body M · Hero sub

Águas Claras-DF · Fábrica em Vicente Pires · 5 equipes ativas no Distrito Federal entregando cozinhas, closets e áreas gourmet.

18px / 1.5 · 300
Inter

Body M · About

Desde 2012, Gracielle Teixeira e Maria das Graças constroem o Bem Viver Ambientes Planejados como um atelier de marcenaria autoral, em Águas Claras-DF.

16.5px / 1.65 · 300
Inter

Body M · Lead

Showroom em Águas Claras, fábrica em Vicente Pires. Você atravessa o projeto inteiro com a mesma dupla por trás de cada peça.

16px / 1.7 · 300
Inter

Body S · Section lead

Cada ambiente é desenhado do zero: encaixe, ferragem alemã, madeira nobre e acabamento aplicado à mão. Sem catálogo. Sem repetição.

15px / 1.65
Inter

Body S · Footer list

Marcenaria autoral feita para morar Brasília. Atelier desde 2012 em Águas Claras. Viva bem.

14.5px / 1.65 · 300
Inter

UI · Button

Agendar visita

14px / 500
Inter · 0.02em

UI · Nav CTA

Agendar visita

12.5px / 500
Inter · 0.04em

Eyebrow · Mono

Bem Viver · Atelier de marcenaria · desde 2012

11px · 0.22em
JetBrains Mono

Micro Mono

S/01 · Premium · DF

10.5px · 0.22em
JetBrains Mono

Pedra Areia

#ECE9DF · --bg

Fundo principal

Pedra Clara

#F4F1E6 · --surface

Superfícies / cards

Verde Tinta

#1E1F1B · --text

Texto principal

Sage Seca

#6E7D62 · --accent

Accent único

Mata Profunda

#16170F · --dark

Seções escuras

Cream sobre dark

#F4F1E6 · --cream

Texto em dark

Hairline

rgba(30,31,27,.08)

Bordas / divisores

Hairline strong

rgba(30,31,27,.18)

Divisores fortes

--text-soft rgba(30,31,27,.65)

--text-mute rgba(30,31,27,.42)

--cream-soft rgba(244,241,230,.80)

--cream-mute rgba(244,241,230,.55)

--hairline-cream rgba(244,241,230,.16)

--hairline-cream-strong rgba(244,241,230,.28)

Hero overlay

5 stops · dark 0.05 → 0.85

Sobre foto hero · 100vh

Pcard overlay

transparent → dark 0.85

Cards de portfólio

Sector hover

transparent → dark 0.4 · on hover

Sector cards photo

Botão primário

.btn .btn--primary · pill 999

Default Agendar visita

Hover Agendar visita bg → #7d8b71 · translateY(-2)

Disabled Agendar visita

Botão ghost

.btn .btn--ghost · sempre sobre dark

Default Ver portfólio Ver portfólio → hover

Nav CTA

.nav__cta · troca de estilo no scroll

Sobre hero Agendar visita

Sobre página Agendar visita

Sector card

photo + dark panel · aspect 3/4 + content

S/01+ Premium

Cozinhas planejadas

Ilhas, ferragens alemãs, freijó natural e bancada calibrada para a forma como você cozinha de fato.

Marcenaria autoralDF

Pcard portfólio

photo + gradient overlay + bottom content

P/02 — Sudoeste

Sala integrada cobertura

Painel · Estante · Rack2024

Tags & badges

about-media · atelier-media · sector num

About tag Fundadoras Gracielle & Maria

Atelier cap Showroom · ParkStyle Mall

Sector num

S/01+ Premium

Section index

hairline 22px + eyebrow uppercase

01 · Sobre o atelier

04 · Atelier & showroom

Stats italic

about__stat / hero__aside-stat

2012 fundação

14 anos

05 equipes DF

Hairlines

.hairline · estrutura editorial

Soft (.08)

Strong (.18)

Cream (.16)

Cream strong (.28)

--container 1320px

--gutter 56px (28px mobile)

.section padding 140px 0

.section--tight 100px 0

.about / .atelier 160px 0

section__header mb 80px

Pattern 01 · Hero fullscreen

100vh photo + bottom-left content + aside stats

— hero__main

Marcenaria autoral

hero__aside →
14 · 05 · +600

Pattern 02 · Sectors grid 3x2

3 cols · gap 0 · hairline-strong cross · photo (3/4) + dark panel

S/01 · Cozinhas

S/02 · Closets

S/03 · Office

S/04 · Gourmet

S/05 · Salas

S/06 · Comercial

Pattern 03 · Portfolio editorial grid

12-col · gap 28px · aspect ratios: tall 4/5 · wide 7/5 · big 8/5 · mid 1/1 · sq 6/5

tall · 4/5

wide · 7/5

big · 8/5

mid · 1/1

sq · 6/5

Pattern 04 · Split 50/50 (about & atelier)

grid-template-columns: 1fr 1.05fr · gap 100px · align-items center

— 01 · sobre

Um atelier feito por duas mulheres, uma cidade e quatorze anos.

@keyframes heroZoom

Hero zoom contínuo

scale 1.04 → 1 · 18s ease-out · forwards

@keyframes scrollMarquee

Marquee horizontal

translateX 0 → -50% · 38s linear infinite

Cozinhas · Closets · Home office · Áreas gourmet · Cozinhas · Closets · Home office · Áreas gourmet ·

@keyframes scrollLine

Scroll indicator

scaleY 0.35 ↔ 1 · 2.2s ease-in-out infinite

.btn--primary :hover

Hover lift

translateY -2 · 0.3s ease · bg #7d8b71

.reveal · IntersectionObserver

Reveal on scroll

opacity 0→1 · translateY 28→0 · 0.9s ease · threshold 0.12

is-visible

Marcenaria autoral.

.pcard :hover .pcard__img

Image scale

scale 1 → 1.05 · 0.7s ease

.btn :hover .btn__arrow

Arrow shift

translateX 0 → 3 · 0.3s ease

Hover para ver

.nav · scroll state

Nav state shift

bg transparent → rgba(.92) blur(14) · 0.4s ease

Bem Viver transparent

Bem Viver is-scrolled

SVG arrow

stroke 2 · linecap round · currentColor

14px · texto

14px · accent

14px · cream

Em uso Agendar visita

Design system vivo para morar

Hierarquia, escala e ritmo
em três famílias.

Marcenaria autoral feita para morar Brasília

Seis territórios da casa.
Uma marcenaria autoral.

Pronto para desenhar a sua casa com a gente?

Cozinhas planejadas

Cozinha de família · 22m²

Sage Mineral —
quatro cores reais.

Variações tonais.

Três overlays — somente dark, nunca cromáticos.

Pílulas, cards e labels.
Estados lado a lado.

Botão primário

Botão ghost

Nav CTA

Sector card

Cozinhas planejadas

Pcard portfólio

Sala integrada cobertura

Tags & badges

Section index

Stats italic

Hairlines

Container, grids,
espaçamento de museu.

100vh photo + bottom-left content + aside stats

3 cols · gap 0 · hairline-strong cross · photo (3/4) + dark panel

12-col · gap 28px · aspect ratios: tall 4/5 · wide 7/5 · big 8/5 · mid 1/1 · sq 6/5

grid-template-columns: 1fr 1.05fr · gap 100px · align-items center

Um atelier feito por duas mulheres, uma cidade e quatorze anos.

Movimento contido.
Quatro animações vivas.

Hero zoom contínuo

Marquee horizontal

Scroll indicator

Hover lift

Reveal on scroll

Image scale

Arrow shift

Nav state shift

Uma seta — nada mais.

SVG arrow

Marcenaria autoral feita para morar Brasília

Seis territórios da casa. Uma marcenaria autoral.

Pronto para desenhar a sua casa com a gente?

Cozinhas planejadas

Cozinha de família · 22m²

Cozinhas planejadas

Sala integrada cobertura

100vh photo + bottom-left content + aside stats

3 cols · gap 0 · hairline-strong cross · photo (3/4) + dark panel

12-col · gap 28px · aspect ratios: tall 4/5 · wide 7/5 · big 8/5 · mid 1/1 · sq 6/5

grid-template-columns: 1fr 1.05fr · gap 100px · align-items center

Um atelier feito por duas mulheres, uma cidade e quatorze anos.

Hero zoom contínuo

Marquee horizontal

Scroll indicator

Hover lift

Reveal on scroll

Image scale

Arrow shift

Nav state shift

Seis territórios da casa.
Uma marcenaria autoral.