Um sistema visual e de interação para a lsdias.dev.

01 · Cor

A paleta que o shell holográfico usa de verdade.

Toda cor vem de src/components/brand/holographic/holographic-site.module.css. Nenhuma escala paralela foi criada para esta página.

Shell claro (páginas de projeto, tour, 404)

02 · Tipo

Seis papéis, cada um com um uso real no site.

Não é uma lista de classes Tailwind, e sim os papéis que o site já usa, com o peso e a família de fonte reais de cada um.

Escala

• Display

  Sites e produtos digitais.

  clamp(3.5rem, 2.3vw + 2.25rem, 5.25rem) / 500
• Section Title

  De sites a sistemas completos.

  clamp(2.25rem, 1.5vw + 1.9rem, 3.75rem) / 600
• Title

  Escopo e proposta

  1.5rem / 600
• Body

  Transformo negócios, serviços e ideias em experiências digitais claras, bem construídas e preparadas para evoluir.

  1.0625rem / 400
• Label

  COMO FUNCIONA

  0.75rem / 600
• Mono

  STRUCTURE LD / 001

  0.5625rem / 500

03 · Espaço

Uma escala primitiva, de propósito.

O espaçamento não tem uma escala de tokens nomeados. O design-system.md documenta isso como uma decisão, não uma pendência. O que existe são convenções: como a escala primitiva do Tailwind é usada de forma consistente.

• 4pxIcon/text gap, dense rows
• 8pxContactTrustBlock icon gap
• 12pxCluster / tight (design-system.md §Spacing)
• 16pxProjectPanel body padding (mobile) (+1)
• 24pxCluster / default (design-system.md §Spacing) (+1)
• 32pxProjectPanel body padding (desktop) (+1)
• 40pxContainer gutter, lg breakpoint
• 48pxCluster / loose (design-system.md §Spacing)
• 80pxSection / py, base
• 112pxSection / py, sm
• 128pxSection / py, lg

Convenções

section

py-20 sm:py-28 lg:py-32

Section.tsx, every homepage section

container

px-5 sm:px-8 lg:px-10, max-w-7xl

Container.tsx

cluster

12 / 24 / 48px (tight / default / loose)

Icon groups, tag rows, nav items

card

p-5–8 (compact / default / spacious)

ProjectPanel, ContactForm, SystemPanel

04 · Grade

Um container, três breakpoints de gutter.

O site não usa grade de 12 colunas: usa um container com largura máxima e um respiro (gutter) que muda em três pontos. O overlay abaixo é o mesmo que aparece no modo Inspecionar, ativado aqui diretamente.

Gutter por largura

< 640px

20px

640–1023px

32px

≥ 1024px

40px

Como a composição muda

05 · Raio

Quatro papéis, uma decisão cada.

Do quadrado à pílula. O slider abaixo afeta só o exemplo desta seção. Para mudar o site inteiro, veja o Playground mais abaixo.

• control-default

  0.5rem

  Usado por: Sem consumidor real ainda

  Existe na configuração, mas nenhum componente o usa ainda; está reservado para um controle futuro (tailwind.config.ts).

• control-pill

  9999px

  Usado por: Button (every variant), SystemFooterTrigger

• surface

  var(--section-radius, 0.625rem)

  Usado por: ProjectPanel, LD System panel

• hud

  0px

  Usado por: Hero HUD chrome, corner marks

Experimentar

06 · Movimento

Quatro durações, duas curvas nomeadas.

Movimento ambiente (loops de 600ms ou mais, como o retraço do monograma) fica de fora de propósito. Cada efeito ambiente tem seu próprio tempo, e forçar um token ali inventaria uma consistência que não existe.

Curvas

07 · Componentes

Componentes reais, não cópias.

O que está aqui é exatamente o que roda no site: o mesmo Button, o mesmo Project Card, o mesmo formulário de contato. Sem endpoint configurado, o formulário nunca envia nada de verdade.

<Button href="#contact" variant="holographic-gradient">
  {label}
</Button>

08 · Global Playground

Mude o sistema, veja a lsdias.dev reagir.

Não é uma cópia do site. Isto muda de verdade o raio, o espaçamento, a escala tipográfica e o movimento na página em que você está, de forma temporária. Reset devolve tudo ao padrão publicado, e nada aqui fica salvo.