Pular para o conteúdo
Hypera Pharma

A pesquisa está disponível apenas em builds em produção. Tente fazer a build e pré-visualize o site para testar localmente.

Visão Geral

O Hyna (Design System da Hypera) é uma coleção de padrões de design e componentes visuais que garantem uma experiência consistente em diferentes produtos e plataformas.

Sobre o Design System

Seção intitulada “Sobre o Design System”

O Hyna (Design System da Hypera) é uma biblioteca viva de padrões, componentes visuais, diretrizes de estilo e documentação. Ele é desenvolvido e mantido de forma colaborativa por desenvolvedores front-end e designers para garantir a coesão em todo o ecossistema da organização.

Ao fornecer uma base sólida, ele permite:

  • Velocidade: Acelera o processo de criação de novas interfaces.
  • Eficiência: Melhora a produtividade das squads.
  • Colaboração: Promove um entendimento compartilhado entre Design e Engenharia.
  • Qualidade: Garante uma experiência unificada para o usuário final.

Missão e Visão

Seção intitulada “Missão e Visão”

Missão

Empoderar os Olisters para criar experiências universais de maneira mais rápida, escalável e consistente.

Visão

Ter uma experiência coesa entre todos os produtos Olist através do uso do Design System.

Manutenção e Comunicação

Seção intitulada “Manutenção e Comunicação”

A evolução do sistema é um esforço coletivo. Veja como acompanhar e participar:

  • Versionamento: Acompanhe as atualizações no canal #su-design-system no Slack.
  • Discussões e Bugs: Para reportar problemas ou sugerir melhorias, utilize o canal #team-front-end ou participe das nossas Guildas de Frontend.

Estrutura

Seção intitulada “Estrutura”

O sistema é organizado em 4 camadas principais que se complementam:

  1. Core Concepts (Conceitos Base) A base estratégica que norteia tudo: missão, visão e princípios de design.

  2. Foundations (Fundações) Padrões agnósticos à tecnologia que criam consistência multiplataforma (Tokens, grids, tipografia e UX Writing).

  3. Components (Componentes) Elementos construídos a partir das fundações, específicos por tecnologia (ex: Botões, Menus e Inputs em React/Vue).

  4. Experiences (Experiências) Acordos e fluxos padronizados que orientam a criação de jornadas completas e incríveis em todos os produtos.

Estrutura dos elementos do design system Visualização das camadas: Core > Foundations > Components > Experiences.

Quando usar

Seção intitulada “Quando usar”

A decisão entre usar um componente global do Design System ou criar um componente local depende do contexto do seu projeto.

Para facilitar essa decisão, siga o fluxo abaixo:

Fluxograma do processo de uso do Design System

Próximos Passos

Seção intitulada “Próximos Passos”