ITpS

Fundamentos

Fundamentos

Princípios e regras que sustentam todo componente, página e decisão de design no Sinapse.

Disponível

Roadmap

view_quilt

Layout

Em construção

Composição de página, hierarquia visual, densidade da informação, áreas de atenção e padrões de slot/container. Volta quando tiver substância visual suficiente para diferenciar de templates genéricos.

Container queriesDensity modesSlot patternsVisual hierarchyPage templates
grid_view

Grid

Em construção

Breakpoints, gutters, container max-widths e padrões de grid responsivo. Hoje sistema usa Tailwind v4 padrão — volta quando definirmos breakpoints e regras específicas do produto.

Breakpoints12 columnsGuttersContainer queriesResponsive rules

Atual

Tailwind v4 padrão

Breakpoints: sm 640px · md 768px · lg 1024px · xl 1280px · 2xl 1536px. Containers via max-w-{size} mx-auto px-{n}.

animation

Movimento

Em construção

Durations, easings, padrões de entrada/saída e princípios de motion. Hoje sistema usa transitions sutis em hover e overlays — volta quando tivermos linguagem de motion definida (não só decoração).

Duration tokensEasing curvesEnter/exitStaggerprefers-reduced-motion

Atual

Transitions discretas

Componentes usam transition-colors duration-200 ease-out em hover. Megamenu e modal usam transition-all duration-200 ease-out com translate + opacity. prefers-reduced-motion ainda não está mapeado.