Hims App

The Hims App design system projects a clean, spacious, and subtly playful aesthetic. A generous use of white space and large, rounded corner elements creates an open, approachable feel. Typography is dominant, with large, bold headings drawing attention, while a single vivid violet provides a consistent brand accent. Shadows are soft and diffuse, adding a gentle sense of depth without harsh contrasts, framing content on the bright canvas. Always use Canvas White (#ffffff) as the primary background for all UI elements to maintain a spacious and clinical aesthetic. Apply App Brand Violet (#5d48db) sparingly, primarily for high-impact headings and key brand identifiers where a vibrant accent is desired. Utilize large border radii, specifically 45px for cards and 52px for interactive elements in the header, to promote a soft, approachable feel. Employ Sofia font for all text content, selecting weights 400 or 500 depending on hierarchy, and meticulously adjust letter-spacing as per the type scale. Introduce depth and hierarchy through soft, diffuse shadows like rgba(0, 0, 0, 0.12) 0px 27px 104px 0px for prominent cards, rather than hard lines or strong gradients. Maintain generous sectionGap of 90px and elementGap of 20px to ensure an uncluttered and spacious layout. Ensure all interactive elements, even ghost buttons, have a clearly defined shadow or border for discoverability. Avoid using saturated background colors for primary content areas; stick to Canvas White or Subtle Gray to maintain visual lightness. Do not introduce sharp corners or small radii; the system's roundedness is a core visual identity. Refrain from heavy, opaque dividers or borders. Instead, use Border Light Gray (#e0e0e0) or Subtle Gray (#f0f0f0) backgrounds for visual separation. Do not apply bold or black text for every heading; utilize Deep Charcoal (#2e2e2e) for impactful but softer headings and Muted Text Gray (#8f8f8f) for secondary information. Avoid complex, multi-color gradient backgrounds on UI components; reserve gradients for large, atmospheric background elements if necessary, ensuring they are subtle. Do not use letter-spacing values tighter than -0.0570em for large display text or looser than default for body text. Do not cluster elements too closely; always respect the established elementGap of 20px and sectionGap of 90px.