Contenção & Forma

Bordas & Curvas

O sistema de contorno universal do Y2 permite definir parâmetros precisos, estilos de linha e curvaturas adaptáveis para qualquer componente.

01

Controle Direcional

Ative bordas em lados específicos ou remova-as completamente. Utilize os prefixos bor-* ou o sistema legado bord-*.

Total
Topo
Base
Esquerda
Direita
Nula
02

Espessuras & Estilos

Ajuste a densidade do traço e o estilo da linha para diferentes intenções visuais.

1px (Subtil)
2px (Standard)
4px (Forte)
Tracejada
Pontilhada

Escala Técnica (1-10px)

6px
8px
10px
03

Sistema de Curvaturas

Defina o arredondamento de cantos usando valores baseados em design tokens (REM) ou valores fixos (PX).

Arredondamento Adaptável (REM)

0.25rem
0.50rem
0.75rem
1.00rem
1.25rem

Design Tokens (Y2 UI)

Pequeno
Médio (Card)
Grande
Extra Grande
Cápsula

Precisão em Pixel & Porcentagem

4px
12px
20px
20%
Circ/50%
04

Cores & Opacidades

Aplique tonalidades e níveis de transparência às bordas para integrar componentes ao background.

Semânticos Principais

.Lprin
.Lsecu
.Lsuce
.Lperi
.Lnotu
.Lclar
.Lpret
.Lbran

Opacidades Estilo Glassmorphism (Matriz 13-16)

As variações 13 a 16 aplicam opacidades de 10%, 30%, 60% e 90% respectivamente.

10%
30%
60%
90%

Amostra Cromática

05

Elevação & Sombras

Embora complementares às bordas, as sombras conferem profundidade e foco. O Y2 possui 46 níveis de elevação.

Nível 1
Nível 5
Nível 10
Nível 14
Nível 21
Foco Profundo

YT Continue Explorando