Johnson & Johnson
Technology Services
PN

J&J Design System — Components v1.2

Showcase of all primitives implemented in this template. Body text uses Johnson Text; display headings (this title) use Johnson Display. Tokens are aligned with the Figma DS taxonomy; refine exact values via visual QA or Code Connect.

Dedicated component pages

Each dedicated page isolates one component and includes copy-pasteable source snippets. Treat these as the canonical reference; this gallery below is a visual overview.

Button
Variants, sizes, states, icon-only, full width — with source snippets.
Notification
Status variants, inline/global/toast kinds, actions, dismissible.
Top navigation
Modes, logo variants, menu dropdowns, action cells, secondary bar.
Notification badge
Atomic count indicator. Compact dot through 16 / 20 / 24 px sizes.
Menu button
Pill trigger that opens a popover menu. Sizes, placement, destructive items.
Split button
Primary action + chevron menu in one pill. Sizes, placement, destructive items.
Accordion
Chevron or plus/minus trigger. Sizes, flush mode, single or multi-open.
Tabs & toolbar
Line, contained, segmented variants + IconToolbar for formatting controls.
Card
Content card, interactive states, SelectableCard (checkbox / radio), media.
Breadcrumb
Slash separator default, icons, overflow, custom separator, truncation.
Chat message
Bot + user bubbles, file attachments, typing indicator.
Empty & error state
Zero-results + error templates. Icon + headline + description + actions.
Poll
Voting + results states, custom answers, winner highlight.
Link
Standalone text link. Default / subtle / inverse, sizes, external icon.
Progress bar
Linear indicator. Determinate / indeterminate, sizes, label + value.
Modal
Focus-trapped dialog. Sizes, optional 16:9 media, destructive pattern.
Side navigation
Persistent vertical nav. Expanded / compact / rail modes, sections, nesting, badges.
Login (template)
Recipe page assembling Field + TextInput + PasswordInput + Link + Button.
Table of contents
Vertical TOC with nested items, badges, active accent rule, optional footer CTA.
Video player
Custom controls, captions overlay, chapter strip, fullscreen.
J&J icons (catalog)
Browse all 300+ J&J custom SVGs (JJIM, JJMT, …) from /public/icons/jnj-icons.
UI icons (Material UI)
Browse all 400+ Material Symbols SVGs from /public/icons/material-ui.
Text input
Single-line. Sizes, helper, error / warning, disabled, read-only, icons.
Textarea
Multi-line. States plus a controlled character-counter recipe.
Number input
Step / min / max, decimal step, error / warning / disabled, read-only.
Password input
Show / hide toggle + companion strength meter with custom rule lists.
Dropdown
Radix-backed select. Sizes, groups + separators, error / disabled.
Combo box
Type-to-filter select. Single + multi, empty messages.
Multi-select dropdown
Multi-select with count chip + comma list trigger summary.
Date picker
Single date + DateRangePicker. ISO input + popover calendar.
Slider
Single + range, stepped, error / disabled.
Search
TextInput + magnifier + clear. Sizes, controlled clear callback.
Upload input
Drag-and-drop. Per-file progress bars, per-file errors, multi-file.
Tooltip
Plain or rich (heading + body + action + dismissible) variants.
Radio group
Mutually-exclusive selection with labels / descriptions / disabled.
Tag & status tag
Filter chips, dismissible, status pills, TagStack grouping.
Toggle switch
Boolean on/off with optional label + description.
Progress stepper
Multi-step process tracker. Default + contained variants.
Pagination
Data-table footer + carousel ThumbnailPagination.

Brand

Logos

Single-line on the homepage; shorthand on subsequent pages. Co-branded contexts use black; on dark surfaces use white.

Johnson & Johnson
Single-line · Red
Johnson & Johnson
Shorthand · Red
Johnson & Johnson
Stacked · Red
Johnson & Johnson
Single-line · Black
Johnson & Johnson
Shorthand · Black
Johnson & Johnson
Stacked · Black
Johnson & Johnson
Single-line · White
Johnson & Johnson
Shorthand · White
Johnson & Johnson
Stacked · White

J&J branded icons

Curated J&J icon set under /public/icons/jnj/red/. Use <JnjIcon name="..."/>; for general-purpose UI icons, use <Icon> with lucide-react.

beakerbeaker
chartchart
checkcheck
clipboardclipboard
linklink
pinpin
searchsearch
video-playvideo-play
writewrite

Typography

Johnson Text (body, default) and Johnson Display (headings) loaded via next/font/local from /public/fonts/. Apply font-display to opt into Johnson Display.

Johnson Display (heading)

Healing the world together

Display · 24px / Medium

Display · 18px / Italic

Johnson Text (body)

Text · 16px / Bold

Text · 14px / Medium

Text · 14px / Regular — the quick brown fox jumps over the lazy dog.

Text · 14px / Light Italic

Buttons

Variants

Pill-shaped buttons aligned with J&J DS v1.2. Brand red is the default action; primaryAlt is the warm-dark fill for non-brand emphasis; secondary is the outlined alternative; ghost is for low-emphasis actions; dangeruses the J&J special amber.

Sizes

32 / 40 / 48 / 56 px tall. Small & Medium use Johnson Text Medium 12/14px; Large & Extra-large use Johnson Text Regular 16/18px.

States

Hover and active are interactive — hover/click the buttons to see them. Focus uses a 2px blue (#0F68B2) ring sitting 2px outside the button. Loading shows a spinner and disables interaction.

Inputs

As it appears on your employee record
Enter a valid J&J address

Selection controls

Checkboxes
You can revoke later
Radios
The recommended one
Toggles
Share anonymized usage
Slider
Upload input

Drop files or click Browse

Tags, Status, Tooltip

NeutralInfoSuccessWarningErrorBrandOutlineDismissible
ApprovedPending reviewFailedIn progressDraft
Hover me for a tooltip

Accordion, Tabs, Menu

Frequently asked

Click to expand

Submit a ticket in ServiceNow. Access is granted within 24 hours.

Tabs & Menu

Interactive primitives

Contained tab variant available via the variant="contained" prop.

Cards

Cardiac rhythm

Patient 12384 — last 24h

Stable sinus rhythm. No anomalies detected.

Q4 Launch briefing

Media card with a 16:9 aspect ratio.

Daily enrollment

Last 6 weeks

  • Enrolled
  • Target

Navigation: Breadcrumb, Tabs, Stepper, Pagination

  1. Details
  2. Verify
  3. 3
    ScheduleChoose a slot
  4. 4
    Consent
  5. 5
    Review
  1. Intake
  2. 2
    Triage
  3. 3
    Diagnosis
  4. 4
    Treatment
Rows per page
1–25 of 183
1 / 8

Avatars

ABCDJ&JEFGH3J&J42IJNEW
KLMNOPQRST+2

Feedback: Notifications & Spinner

Did you know?

Inline notifications provide contextual feedback near the relevant content.

Saved

Changes were persisted to the audit log.

Toast notification

Appears over content. Auto-dismissable in practice.
Loading
Loading
Loading

Chat messages

PN
Paulo
Can you summarize last week's enrollment figures?
09:41
AI
Assistant
101 new patients enrolled across 3 sites. Chicago led with 42.
09:41