O design system dos produtos Medway
Componentes, tokens e padrões que o time usa para construir as plataformas de estudo, na web e no app.
Peças prontas para as telas de estudo
Tudo o que aparece aqui é o componente real do pacote, com os mesmos tokens e variantes usados nos produtos.
Questões resolvidas no ciclo atual.
- Clínica Médica82%
- Ginecologia e Obstetrícia64%
- Cirurgia47%
- Pediatria71%
- Preventiva38%
Quanto cada tema cai nas provas de residência.
- Insuficiência cardíacaPrioritário
- Diabetes mellitus tipo 2Alta
- Asma na infânciaMédia
- Doença de KawasakiBaixa
Cinco pessoas estudando o mesmo módulo.
Variantes do Button para cada peso de ação.
Um tema só, do token à tela
Os tokens do pacote chegam ao Tailwind e ao CSS do seu projeto, nos temas claro e escuro.
Tokens semânticos. Cores, tipografia, raios e sombras com nomes que dizem o papel, não o valor.
Claro e escuro. Os mesmos tokens trocam de valor no tema escuro, sem classe extra no componente.
Especialidades. Cada especialidade tem fundo, texto e ícone próprios em tags, índices e cards.
import animate from "tailwindcss-animate";
import {
colors,
content,
fontSize,
lineHeight,
screens,
} from "@medway-ui/core/tokens";
export default {
darkMode: ["class"],
content: [...content],
theme: {
extend: { colors, fontSize, lineHeight },
screens: { ...screens },
},
plugins: [animate],
};Cada especialidade tem a sua cor
Os tokens de especialidade vêm prontos em fundo, texto e ícone, e são os mesmos que tags, botões, índices e cards usam.
- CMClínica Médica
- GOGinecologia e Obstetrícia
- CIRCirurgia
- PEDPediatria
- PREVMedicina Preventiva
- componentes documentados
- 52
- ícones em @medway-ui/icons
- 552
- especialidades com tema próprio
- 5
- pacotes: web, app e ícones
- 3
Encontre o componente pelo que ele faz
Conteúdo de estudo
Peças feitas para as plataformas da Medway: aulas, módulos, semanas, notícias, ranking e anotações.
Ações e navegação
Botões, menus e formas de mudar de página ou de visão.
Formulários
Entrada de dados, seleção e avaliação.
Feedback e status
Mensagens, progresso, carregamento e marcadores.
Estrutura e mídia
Contêineres, sobreposições, imagens e marca.
Instale e comece pelo primeiro componente
yarn add @medway-ui/core @medway-ui/iconsPara o app, o pacote é o @medway-ui/native.