--- version: alpha name: "Pulso" website: "https://pulso-storybook.rd.com.br" description: >- Design system da RD Saúde (ex-RaiaDrogasil) com theming multi-marca real: Raia teal #006F83 e Drogasil vermelho #B6202F alternáveis via ThemeProvider, mais temas prime, rdsaudesistemas e subscription. Fonte variável RD Modern, escala "pulse" de 0.25rem, ~50 componentes React sobre Ark UI e Radix. Tokens públicos nos pacotes npm @rdsaude/*. colors: primary-raia: "#006F83" primary-raia-hover: "#005261" primary-raia-pressed: "#003842" primary-drogasil: "#B6202F" primary-drogasil-hover: "#941925" primary-drogasil-pressed: "#6F151E" info-fill: "#E6F3FE" info-text: "#183349" success-fill: "#E6FEF1" success-text: "#18492E" success-alt: "#2A8352" warning-fill: "#FDF5E7" warning-text: "#55350C" danger-fill: "#FEE6F5" danger-alt: "#A23476" ink: "#303030" ink-secondary: "#575757" surface: "#FFFFFF" surface-1: "#F2F2F2" hairline: "#E6E6E6" special-assinatura: "#5F28BD" special-fastdelivery: "#D66E0F" typography: caption: fontFamily: "RD Modern, sans-serif" fontSize: "0.75rem" fontWeight: 400 lineHeight: "100%" body: fontFamily: "RD Modern, sans-serif" fontSize: "0.875rem" fontWeight: 400 lineHeight: "140%" subtitle: fontFamily: "RD Modern, sans-serif" fontSize: "1rem" fontWeight: 500 lineHeight: "150%" title: fontFamily: "RD Modern, sans-serif" fontSize: "1.25rem" fontWeight: 600 lineHeight: "130%" big-number: fontFamily: "RD Modern, sans-serif" fontSize: "4rem" fontWeight: 700 lineHeight: "100%" rounded: tiny: "0.25rem" small: "0.5rem" medium: "0.75rem" large: "1rem" huge: "1.25rem" pill: "62.4375rem" spacing: half-pulse: "0.125rem" pulse: "0.25rem" 4x-pulse: "1rem" 16x-pulse: "4rem" --- ## Overview **Pulso** é o design system da **RD Saúde** (rebrand corporativo da RaiaDrogasil, out/2024), a maior farmacêutica varejista da América Latina com as bandeiras **Raia** e **Drogasil**. Distribuído publicamente via npm, alimenta as experiências digitais das farmácias, do programa Prime, da RD Saúde Sistemas e dos produtos por assinatura. A assinatura técnica é o **theming multi-marca real**: o mesmo componente Button renderiza teal `#006F83` no tema `raia` e vermelho `#B6202F` no tema `drogasil`, com estados hover/pressed próprios — resolvidos pelo `ThemeProvider` em tempo de execução. Cinco temas oficiais: `raia`, `drogasil`, `prime`, `rdsaudesistemas`, `subscription`. ### Características-chave - Cores de marca alternáveis por tema com rampas completas de interação (enabled/hovered/pressed) - Tipografia **RD Modern** — família variável proprietária com pesos 400–800 - Unidade de espaçamento própria: **1 pulse = 0.25rem**, escalas stack/inline/padding-inset de 0.125rem a 8rem - Perigo codificado em **magenta** (#A23476) de propósito — nunca competir com o vermelho Drogasil - ~50 componentes React construídos sobre **Ark UI + Radix UI** com tailwind-variants e vaul - Tokens públicos: `@raiadrogasil/pulso-design-tokens` (legado) → `@rdsaude/*` (atual) ## Colors ### Marca por tema | Token | Raia | Drogasil | |---|---|---| | `{colors.primary-raia}` / `{colors.primary-drogasil}` | #006F83 | #B6202F | | Hover | #005261 | #941925 | | Pressed | #003842 | #6F151E | ### Semânticas (idênticas nos temas) | Papel | Fill | Texto | |---|---|---| | Informativo | #E6F3FE | #183349 | | Sucesso | #E6FEF1 | #18492E (alternativa sólida #2A8352) | | Alerta | #FDF5E7 | #55350C | | Perigo | #FEE6F5 | alternativa #A23476 | ### Neutras e especiais Texto `{colors.ink}` #303030 / `{colors.ink-secondary}` #575757; superfícies #FFFFFF / {colors.surface-1} #F2F2F2 / {colors.hairline} #E6E6E6. Cores especiais de produto: fastdelivery `{colors.special-fastdelivery}` #D66E0F · evaluate #F0A94C · assinatura `{colors.special-assinatura}` #5F28BD · clube #B34C1B · genérico #FEFAA4. ## Typography **RD Modern** (variável) em cinco pesos documentados: | Token | Tamanho | Weight | Line-height | Uso | |---|---|---|---|---| | `{typography.big-number}` | 4rem | 700 | 100% | Preços e números hero | | `{typography.title}` | 1.25rem | 600 | 130% | Títulos | | `{typography.subtitle}` | 1rem | 500 | 150% | Subtítulos | | `{typography.body}` | 0.875rem | 400 | 140% | Corpo padrão | | `{typography.caption}` | 0.75rem | 400 | 100% | Legendas | Escala completa ("pulse sizes"): 0.75 · 0.875 · 1 · 1.25 · 1.5 · 1.75 · 2 · 2.25 · 2.5 · 2.75 · 3 · 4rem. Letter-spacing: 0 ou 5%. ## Layout Unidade base **pulse**: `{spacing.pulse}` 0.25rem (meio-pulse 0.125rem disponível). Escalas semânticas de stack, inline e padding-inset cobrem 0.125rem→8rem em passos de 0.25rem. Bordas tokenizadas: 1px/2px/4px/8px equivalentes (.0625–.5rem). ## Elevation & Depth Superfícies em 3 níveis neutros + sombras discretas; sheets inferiores (BottomSheet via vaul) e overlays seguem o padrão mobile-first das farmácias digitais. ## Shapes Radius progressivo por complexidade: | Token | Valor | Uso | |---|---|---| | `{rounded.tiny}` | 0.25rem | Chips pequenos | | `{rounded.small}` | 0.5rem | Badges, tags | | `{rounded.medium}` | 0.75rem | Inputs/form fields | | `{rounded.large}` | 1rem | Cards | | `{rounded.huge}` | 1.25rem | Modais, superfícies grandes | | `{rounded.pill}` | 62.4375rem | Botões e CTAs pill | ## Components ~50 componentes React: Accordion, Button (+ButtonBadge), Checkbox/Radio/Switch, Select family, InputText/Password/Counter/MultiSelect, SearchBar, Link, OptionMenu, Pagination, Modal, SideSheet, BottomSheet, Popover, Tooltip, Toast, Snackbar, Chips, Tag, Stepper, ProgressIndicator, Refresh (loader), Rating, Coachmark, CardShape/CardCategory/CardInformative, ProductCard/ProductHeader, ListItem, Label, Logo, Icon/IconDualColor, Typography (BigNumber/Title/Subtitle/Body/Caption), Content, ThemeProvider. Stack declarada: React 18 + Ark UI + Radix UI + tailwind-variants + vaul. ## Do's and Don'ts **Do** envolver toda árvore de componentes num único `ThemeProvider` — misturar marcas na mesma tela quebra o reconhecimento de bandeira. **Do** usar magenta para perigo mesmo no tema Raia — reserva o teal para ações. **Do** consumir os tokens npm (`@rdsaude/pulso-design-tokens`) como fonte única de verdade. **Don't** hardcode hex de marca; os valores mudam por tema e versão do design. **Don't** usar o vermelho #B6202F decorativamente fora do tema Drogasil — ele significa ação primária ali. ## Known Gaps - Documentação visual (Storybook pulso-storybook.rd.com.br) protegida contra automação — valores extraídos dos tokens CSS e type definitions dos pacotes npm - Rampas completas dos temas prime/rdsaudesistemas/subscription não enumeradas nesta extração - Motion/easing não capturados --- ## Attribution | Campo | Valor | |-------|-------| | Source | [npm @raiadrogasil/pulso-design-tokens](https://www.npmjs.com/package/@raiadrogasil/pulso-design-tokens) | | Componentes | [npm @rdsaude/pulso-react-components v3.19.1](https://www.npmjs.com/package/@rdsaude/pulso-react-components) | | Storybook | [pulso-storybook.rd.com.br](https://pulso-storybook.rd.com.br/) | | Catálogo | [Design Systems Brasileiros — Pulso](https://designsystemsbrasileiros.com/pulso/) | | Method | Open-source tokens extraction (npm @rdsaude/*) | | Date | 2026-08-21 |