Design Patterns

Guia visual de componentes e padrões de design do bymentor.ai

Paleta de Cores

Brand Green

#6FFFB0

brand-green

Brand Dark

#002E2C

brand-dark

Brand White

#FFFFFF

brand-white

Brand Gray

#F5F5F5

brand-gray

Accent Lime

#C3FF83

accent-lime

Accent Yellow

#FFE88C

accent-yellow

Accent Coral

#FF8360

accent-coral

Tipografia

Font Family: Inter

Weights: 400, 500, 600, 700, 800

Heading 1 - font-extrabold (800)

The quick brown fox jumps

Heading 2 - font-bold (700)

The quick brown fox jumps

Heading 3 - font-semibold (600)

The quick brown fox jumps

Body Text - font-normal (400)

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small Text - font-medium (500)

The quick brown fox jumps over the lazy dog

Botões

Primary

<UiButton variant="primary" size="lg">Text</UiButton>

Secondary

<UiButton variant="secondary" size="lg">Text</UiButton>

Outline

<UiButton variant="outline" size="lg">Text</UiButton>

White

Melhor visualizado em fundos escuros

<UiButton variant="white" size="lg">Text</UiButton>

Dark

Melhor visualizado em fundos claros

<UiButton variant="dark" size="lg">Text</UiButton>

White Outline

Transparente com borda branca - ideal para fundos escuros

<UiButton variant="white-outline" size="lg">Text</UiButton>

Dark Outline

Transparente com borda escura - ideal para fundos claros

<UiButton variant="dark-outline" size="lg">Text</UiButton>

Com Links

Internal Link (to) External Link (href)

<UiButton variant="primary" to="/page">Text</UiButton>
<UiButton variant="secondary" href="https://...">Text</UiButton>

Espaçamentos

Container

container mx-auto px-6 lg:px-8

Section Padding (Vertical)

py-12 (pequeno)py-16 md:py-20 lg:py-24 (médio)py-20 md:py-28 lg:py-32 (grande)

Gap (Espaçamento entre elementos)

gap-4 (1rem / 16px)gap-6 (1.5rem / 24px)gap-8 (2rem / 32px)

Bordas e Sombras

Border Radius

rounded (0.25rem / 4px)

rounded-lg (0.5rem / 8px)

rounded-xl (0.75rem / 12px)

rounded-full (pill shape)

Shadows

shadow-sm

shadow-md

shadow-lg

shadow-xl

Grid System

2 Colunas: grid md:grid-cols-2 gap-6

Col 1

Col 2

3 Colunas: grid md:grid-cols-3 gap-6

Col 1

Col 2

Col 3

4 Colunas: grid md:grid-cols-2 lg:grid-cols-4 gap-6

Col 1

Col 2

Col 3

Col 4