Loading repository data…
joaohgoncalves / repository
Criei um Design System para a Aurora Prime, plataforma full-stack imobiliária premium. Documentei cores, tipografia, botões, forms, cards, banners, tabelas e padrões de layout em uma página viva no app, com componentes React reutilizáveis para manter consistência, escala e velocidade no desenvolvimento.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Design system criado para a Aurora Prime, uma plataforma imobiliaria premium ficticia voltada para apresentacao de propriedades, gestao de listings, agentes, leads e experiencia administrativa.
Este documento reune a linguagem visual, os tokens, os componentes e os padroes de interface definidos para manter consistencia entre telas publicas, formularios, dashboards e fluxos administrativos.
A proposta visual da Aurora Prime combina uma estetica editorial com uma interface funcional e discreta. O sistema foi pensado para transmitir sofisticação, clareza e confianca, sem depender de excesso de decoracao visual.
Principios principais:
A Aurora Prime usa uma linguagem minimalista, editorial e premium.
Diretrizes:
Fonte principal:
Inter
A tipografia foi definida para funcionar tanto em paginas editoriais quanto em interfaces administrativas.
Escala tipografica:
Regras de uso:
| Nome | Valor | Uso |
|---|---|---|
| Surface | #f9f9f7 | Fundo principal da interface |
| Surface Raised | #ffffff | Cards, paineis e superficies elevadas |
| Surface Muted | #f2f1ec | Areas neutras e fundos secundarios |
| Text | #000000 | Texto principal |
| Text Soft | #5f5f5f | Texto de apoio |
| Text Muted | #888888 | Labels, metadados e descricoes |
| Accent | #b79a60 | Foco, interacoes e detalhes premium |
| Danger | #be123c | Erros e acoes destrutivas |
| Success | #047857 | Feedbacks positivos |
O sistema usa bordas e sombras leves para separar conteudos sem pesar a composicao.
Tokens principais:
| Token | Valor | Uso |
|---|---|---|
| Radius Small | 4px | Botoes e controles compactos |
| Radius Medium | 8px | Cards, paineis e inputs |
| Radius Large | 14px | Blocos maiores e composicoes especiais |
| Shadow Small | 0 10px 30px rgba(0,0,0,.045) | Elevacao sutil |
| Shadow Medium | 0 18px 70px rgba(0,0,0,.06) | Paineis de maior destaque |
Diretrizes:
Usado para acoes principais, secundarias e destrutivas.
Variantes:
Diretrizes:
Campo padronizado para inputs, selects e textareas.
Variantes:
Diretrizes:
Componente para mensagens de sistema.
Variantes:
Uso:
Container base para cards, formularios, blocos de conteudo e secoes internas.
Diretrizes:
Cabecalho padronizado para paginas internas.
Elementos:
Uso:
Titulo compacto para blocos internos.
Uso:
Tabela padronizada para dados administrativos.
Uso:
Diretrizes:
Indicador visual de status.
Exemplos:
Diretrizes:
Cards sao usados para representar propriedades, agentes, metricas e blocos de conteudo.
Boas praticas:
Banners aparecem em areas de destaque.
Boas praticas:
Formularios seguem dois estilos:
Boas praticas:
O dashboard prioriza leitura rapida e tomada de decisao.
Boas praticas:
Tabelas devem ser objetivas e escaneaveis.
Boas praticas:
Diretrizes consideradas:
A comunicacao da interface deve ser:
Exemplos de tom:
Este design system foi pensado para sustentar:
O objetivo principal e criar uma base visual consistente, escalavel e facil de manter.
Com o design system, novas telas podem ser criadas com mais velocidade, mantendo a mesma linguagem visual e reduzindo inconsistencias entre diferentes partes do produto.
Este design system foi desenvolvido para fins de estudo e portfolio. Todos os direitos reservados.
Selected from shared topics, language and repository description—not editorial ratings.
CayqueKah13 /
Criei o website da Atanobreak, uma fabricante de equipamentos industriais. Design moderno, UX intuitivo e responsivo. Utilizei HTML5, CSS3, JavaScript para otimização de desempenho. Contribuí para a presença online da empresa, entregando um produto de alta qualidade.
27/100 healthMarquinCss /
Com orgulho, compartilho que criei um clone do site que utilizo para realizar e enviar as atividades do meu curso no Instituto da Oportunidade Social (IOS), onde me desafiei a utilizar técnicas de CSS e adicionei uma pequena interação com JS. Foi muito gratificante desenvolver este projeto!
34/100 healthHenrique-Alonst /
Criei um site fictício, para uma plataforma de cursos, utilizando HTML e CSS para praticar o design e a responsividade. Além disso, implementei JavaScript para adicionar interatividade, permitindo a troca de tema e a alteração dinâmica do conteúdo na mesma página.
59/100 healthMatheus-FelipeSS /
Criei um portfólio pessoal usando HTML, CSS e JavaScript. Estruturei a página com seções como projetos e contato, e usei o CSS para dar um design responsivo e atrativo. O JavaScript adicionou interatividade, como animações e transições.
30/100 healthNicoleVelloso /
Criei um portfólio interativo para apresentar meus principais projetos e minha trajetória profissional. O site, desenvolvido com HTML, CSS e JavaScript, possui um design moderno e responsivo, com seções que exibem descrições, imagens e links para acessar os projetos.
27/100 healthLarissaCamyle /
Desenvolvi um projeto de temporizador estilo Pomodoro com o tema astronauta e espaço. O projeto foi inicialmente planejado e prototipado no Figma, onde criei um design visualmente envolvente. O desenvolvimento foi realizado do zero, utilizando HTML, CSS e JavaScript.
30/100 health