Design System Design System

Uma visão geral dos componentes, cores, tipografia e padrões utilizados no portfólio de Anna Grateki. An overview of the components, colors, typography and patterns used in Anna Grateki's portfolio.

Paleta de Cores Color Palette

Cores Primárias Primary Colors

Primary

#8b5cf6

Primary Dark

#7c3aed

Primary Light

#a78bfa

Escala de Cinza Gray Scale

Light

#ffffff

Gray 300

#cbd5e1

Gray 600

#475569

Gray 900

#111827

Cores de Destaque Accent Colors

Secondary

#c4b5fd

Accent

#6366f1

Tipografia Typography

Fira Code

Fonte principal usada em todo o site Primary font used throughout the site

Heading 1

4xl - 2.25rem

Heading 2

3xl - 1.875rem

Heading 3

2xl - 1.5rem

Exemplos de Uso Usage Examples

FiraCode fornece excelente legibilidade para código e texto FiraCode provides excellent readability for code and text

Texto grande para introduções Large text for introductions

lg - 1.125rem

Texto do corpo padrão para parágrafos Standard body text for paragraphs

base - 1rem

Texto pequeno para legendas Small text for captions

sm - 0.875rem

Componentes Components

Botões Buttons

Exemplos Examples

CSS

.btn { padding: 0.75rem 1.5rem; border-radius: var(--radius-lg); font-weight: 600; transition: all var(--transition-normal); } .btn-primary { background-color: var(--color-primary); color: white; }

Cards

Card Padrão Default Card

Este é um card padrão usado para apresentar conteúdo. This is a default card used to present content.

Ver mais → Read more →

Card Glass Glass Card

Card com efeito glassmorphism para destaque. Card with glassmorphism effect for emphasis.

Ver mais → Read more →

Card Gradiente Gradient Card

Card com gradiente para elementos especiais. Gradient card for special elements.

Ver mais → Read more →

Tags

Exemplos Examples

JavaScript TypeScript Angular React CSS HTML

CSS

.tag { background-color: var(--color-gray-800); color: var(--color-gray-200); padding: 0.375rem 0.875rem; border-radius: var(--radius-full); font-size: 0.875rem; }

Sistema de Espaçamento Spacing System

Escala de Espaçamento Spacing Scale

--space-xs 0.25rem (4px)
--space-sm 0.5rem (8px)
--space-md 1rem (16px)
--space-lg 1.5rem (24px)
--space-xl 2rem (32px)
--space-2xl 3rem (48px)
--space-3xl 5rem (80px)

Border Radius Border Radius

--radius-sm 4px
--radius-md 8px
--radius-lg 12px
--radius-xl 16px
--radius-2xl 24px
--radius-full 9999px

Acessibilidade Accessibility

Recursos Implementados Implemented Features

  • Skip links para navegação por teclado Skip links for keyboard navigation
  • Indicadores de foco visíveis Visible focus indicators
  • Suporte para modo de alto contraste High contrast mode support
  • Respeito por preferências de movimento reduzido Reduced motion preferences support
  • Labels semânticos e ARIA Semantic labels and ARIA

Contraste de Cores Color Contrast

Todas as combinações de cores atendem ao padrão WCAG AA para contraste. All color combinations meet WCAG AA contrast standards.

Primary on White 4.5:1
Gray 400 on Dark 7.2:1