hims.com — Design System

1. Visual Theme & Atmosphere

Hims.com presents itself as a modern telehealth brand built entirely on trust and accessibility. The site’s visual identity is deliberately restrained — almost aggressively utilitarian — relying on the browser’s native system-ui typeface stack and near-zero decorative elements. This is not minimalism as aesthetic; it is minimalism as medical-grade clarity. No custom fonts, no branded colour palette, no shadows. The design language says: we are not here to impress you, we are here to serve you.

The result is clinical in the best sense. Content hierarchy is established entirely through font-weight and size relationships. The lack of visual flourish places full attention on the health information and calls to action.

2. Color Palette & Roles

Text

• rgb(49, 49, 49) — Body text; dark charcoal, not pure black — softer on screen for long-form reading

Backgrounds

• Transparent (rgba(0,0,0,0)) — Body background; the site uses the browser default white canvas
• No custom surface colours detected — zero branded backgrounds

Interactive

• rgb(0, 0, 238) — Links and anchor borders; pure browser-default blue — a deliberate accessibility-first choice that prioritises recognisability over brand

Absent: No brand colour — no signature green, blue, or teal that many telehealth brands adopt. No dark mode. No gradient. The palette is effectively monochrome.

3. Typography Rules

Hims uses the system-ui font stack (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif). This is the most universal possible choice — every user sees their OS’s default sans-serif. On macOS, San Francisco. On Windows, Segoe UI. On Android, Roboto.

Scale

• H1: 40px / 600 weight / 50px line-height — compact, confident hero sizing
• H2: 24px / 600 weight / 30px line-height — clear section headers
• Body: 16px / 400 / 18.4px line-height — tight line-height, prioritises density
• Paragraphs: 16px / 400 / 24px line-height — slightly more open than base body
• Links: 12px / 400 — smaller than body text in nav/footer contexts
• Code: monospace 12px — fallback for any inline code references

Note: No letter-spacing, no text-transform, no OpenType feature settings. Pure default rendering.

Absence of custom fonts is the defining typographic statement. This site prioritises loading speed and accessibility above visual differentiation.

4. Component Stylings

Links: Browser-default blue with underline behaviour. Hover states are not captured — interactive feedback likely handled by Angular component state.

Inputs: Transparent background, black border and text. No custom border-radius detected. Bare and functional.

No shadows detected. Zero box-shadow values across the entire extracted stylesheet.

No border radii detected. All elements use default (0px or browser default) corner treatments.

Forms: Minimal styling — Angular’s component-scoped CSS handles the detail. The base layer is intentionally blank.

Navigation and Footer: No custom surface treatments. Content simply sits on the white canvas.

5. Layout Principles

Built with Angular, the site relies on component-scoped styles for layout. The single detected breakpoint is 350px — an unusually low value suggesting the layout is fundamentally a single-column mobile-first structure, with desktop simply being a wider version of the same column flow.

No spacing tokens detected at the body or section level beyond zero-margin reset. All spatial rhythm is delegated to Angular component styles. The baseline is extremely clean — a blank canvas with content responsibility pushed to each component.

6. Depth & Elevation

There is no elevation system. No shadows, no layered surfaces, no translucency. This is a flat design in the most literal sense — every element exists on the same visual plane.

This choice, combined with the system font and browser-default colours, creates a design that feels less like a branded experience and more like structured HTML. Whether intentional or pragmatic, it signals to users: the content is the interface.

7. Do’s and Don’ts

Do:

• Use system-ui for all text — do not override with a custom font.
• Set body text at rgb(49, 49, 49) — avoid pure black for readability.
• Use browser-default link blue for all links — accessibility and convention over brand.
• Keep components flat — no shadows, no gradients, no decorative borders.
• Let Angular component styles own layout and spacing.
• Prioritise loading performance — every byte saved is intentional.

Don’t:

• Add decorative colour surfaces or hero gradients.
• Use custom border radii on form elements or cards.
• Override link colour with brand colour — the blue is intentional.
• Add elevation layers — this design is deliberately depth-free.
• Use font-weight: 300 or 700 except for specific bold headlines.

8. Responsive Behavior

The single breakpoint at 350px is the minimum threshold — below this, the layout makes extreme-small-screen adjustments. Above 350px, everything scales linearly within the single-column flow. There is no multi-column grid, no responsive typography scaling detected at the base CSS level.

Angular’s component architecture handles the real responsive complexity internally. The base stylesheet is intentionally sparse.

9. Agent Prompt Guide

Build a healthcare-grade interface in the style of hims.com: white canvas, no custom font — use system-ui / -apple-system stack. Body text is dark charcoal rgb(49,49,49), not black. Links use browser-default blue. No shadows, no rounded corners, no decorative colour. H1 at 40px/600, H2 at 24px/600, body at 16px/400. Everything is flat and legible. The design philosophy: clarity and trust over brand identity. Component-level styles own spacing and layout — keep the base stylesheet a blank canvas. Mobile-first with a minimum breakpoint at 350px.

Generated by Sparkbites — extracted from live CSS analysis