Multi-brand Design System v1.0

3 marcas. 1 motor.

Atlas, Cidade Jardim e Docinho Gourmet compartilham a mesma engenharia (componentes, JS, layout) e trocam apenas o tema. Uma mudança no @brand/core propaga para as 3 marcas.

Conheça as 3 marcas Ver comparador →

As 3 marcas

B2B Tech

Atlas

Founders, gestores, profissionais. Identidade Linear/Vercel/Notion 2026.

Real Estate

Cidade Jardim

Investidores high-ticket. 47 anos. AL'DORA R$5,32bi. Cyrela / Four Seasons.

Confeitaria

Docinho Gourmet

Confeitaria autoral, sofisticada. Mulheres 25-45. Ladurée / Magnolia.

Comparador interativo

O mesmo componente renderizado nas 3 identidades. Note como tipografia, cor, radius e motion mudam — mas a estrutura HTML é idêntica.

Como cada projeto importa

Atlas

<link rel="stylesheet"
  href="https://ds.lsc-lab.com/core.css">
<link rel="stylesheet"
  href="https://ds.lsc-lab.com/themes/atlas.css">
<html data-brand="atlas">

Cidade Jardim

<link rel="stylesheet"
  href="https://ds.lsc-lab.com/core.css">
<link rel="stylesheet"
  href="https://ds.lsc-lab.com/themes/cidade-jardim.css">
<html data-brand="cidade-jardim">

Docinho

<link rel="stylesheet"
  href="https://ds.lsc-lab.com/core.css">
<link rel="stylesheet"
  href="https://ds.lsc-lab.com/themes/docinho.css">
<html data-brand="docinho">

Arquitetura

@brand/core motor

Componentes neutros (button, card, input, modal, table, hero...) declarados via variáveis CSS. ~17KB. Vanilla JS. 0 deps.

20+ componentes prefixo .b-*
Switcher de marca via data-brand="..."
Compat layer: atlas-ds.css ainda funciona

@brand/{atlas,cidade-jardim,docinho} tema

Cada tema fornece tokens (cor, tipografia, espaçamento, motion, sombra, radius) num único arquivo CSS leve.

Atlas: Inter, cobalto+jade, motion 220ms, dark
CDJ: Playfair+Inter, verde+dourado, motion 380ms, light editorial
Docinho: Fraunces+Nunito, bordô+blush, motion bouncy, light afetivo