DESIGN.md inspired by Oscar Health

---
name: Oscar Health
tagline: Human-scale health insurance with violet fields and expressive serif headings.
spec: webdesignhot/0.2
profile: catalog
source_url: https://www.hioscar.com/
quality: auto
published_at: 2026-09-12T05:45:19.942Z
updated_at: 2026-09-12T05:45:19.942Z
categories: [insurance, healthcare]
tags: [light, editorial, sans, health]
preview_swatch: ["#fcfaf6", "#4f50ff", "#141414"]
x-webdesignhot:
  author: webdesignhot
  quality: auto
  featured: false
  published_at: 2026-09-12T05:45:19.942Z
  updated_at: 2026-09-12T05:45:19.942Z
  categories:
    - insurance
    - healthcare
  tags:
    - light
    - editorial
    - sans
    - health
  preview_swatch:
    - "#fcfaf6"
    - "#4f50ff"
    - "#141414"
  related:
    - lemonade
    - onemedical
    - progressive
  description: Oscar combines an intense violet hero with warm off-white service
    content. A white serif headline creates an approachable editorial tone,
    while the black utility strip and white navigation keep account access
    explicit. Desktop photography is arranged as a rounded collage.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
colors:
  bg: "#fcfaf6"
  text: "#141414"
  brand: "#4f50ff"
  on-brand: "#ffffff"
  surface: "#ffffff"
  utility: "#1c1b1b"
typography:
  display:
    family: Heldane Display, Times New Roman, serif
    weights:
      - 400
  body:
    family: Lettera, Open Sans, sans-serif
    weights:
      - 400
      - 600
  scale:
    h1:
      fontSize: 72
      fontWeight: 400
      fontFamily: Heldane Display, Times New Roman, serif
    body:
      fontSize: 16
      fontWeight: 400
      fontFamily: Lettera, Open Sans, sans-serif
radius:
  action: 9999
components:
  button-primary:
    base:
      bg: brand
      text: on-brand
      radius: 9999
---

Scope: public homepage sampled at 1440px and 390px on 2026-09-12. Font names are observed CSS declarations, not redistributed font assets. Body size outside an explicitly measured role is a 16px implementation baseline; focus, validation, timing, and alternate themes below are recommendations, not audited source states. No transactional flow was submitted.

## 1. Visual Theme & Atmosphere

Oscar combines an intense violet hero with warm off-white service content. A white serif headline creates an approachable editorial tone, while the black utility strip and white navigation keep account access explicit. Desktop photography is arranged as a rounded collage.

## 2. Color Palette & Roles

The observed brand text color is #4f50ff; use it for the violet identity and action role. Supporting surfaces are #fcfaf6 and white, with #141414 body ink and #1c1b1b utilities. The image-backed hero may vary slightly from the text token; do not claim the artwork is a flat CSS swatch.

## 3. Typography Rules

Heldane Display is the observed serif headline family, measuring 72px on desktop and 48px at 390px. Lettera supplies the reading and utility voice. Do not use the document body default of Arial at 10px as the product reading scale.

## 4. Component Stylings

The hero distinguishes a filled white member-account pill from an outlined plan-finding pill. Preserve both audiences and their different destinations. Doctor search and login belong in the persistent navigation rather than only in campaign content.

## 5. Layout Principles

Desktop pairs the message and two actions with a photo collage; mobile removes that collage from the first screen and stacks full-width actions. The warm service section begins immediately after the violet band and uses centered serif hierarchy.

## 6. Shapes & Radius Scale

Actions use full-pill corners; photography has larger rounded clipping. Keep paragraphs and section bands unframed. Reusing pill radii for every content container would erase the difference between an action and an image.

## 7. Depth & Elevation

Color-block transitions and clipped photography do most of the depth work. Avoid heavy shadows on the warm service sections. An account menu may need elevation, but no menu shadow specification was measured.

## 8. Interaction & Motion

Keep membership navigation immediate and show clear progress when opening a plan finder. These are integration recommendations: no authenticated account or insurance enrollment was tested. Avoid animated resizing of the two primary actions.

## 9. Accessibility & A11y

White text on violet needs contrast validation at the final rendered size. Give each action an explicit destination and keyboard focus. Health-plan eligibility and coverage cannot be communicated only through color or friendly illustrations.

## 10. Responsive Behavior

The mobile source uses a compact utility bar, logo/menu row, 48px serif heading, and vertically stacked pills. Preserve generous inner padding while allowing the longest account label to wrap without clipping.

## 11. Content & Voice

Write in direct, reassuring language without promising outcomes. Keep benefit conditions adjacent to benefit descriptions and distinguish member support from shopping. Do not copy campaign prices or care-access timings into generic templates.

## 12. Dark Mode & Theming

The verified theme is warm light content with a violet feature band. No dark-mode behavior was audited. If offering an alternate theme, preserve the distinction between service content and the feature band rather than flattening everything to violet.

## 13. Lineage & Influences

This is an editorial extraction of the public Oscar homepage, not the member app. Its specificity comes from Heldane serif display, Lettera utility text, saturated violet, and warm service sections.

## 14. Do's and Don'ts

Keep the member and shopper paths distinct, use rounded imagery intentionally, and qualify benefit copy. Avoid tiny default-body typography, unqualified health promises, or replacing every warm section with a purple card.

## 15. Agent Prompt Guide

Build an insurance homepage with violet editorial hero, warm service bands, serif headings, and separate member and plan actions. Verify a mobile layout without the collage and check benefit qualifications alongside their claims.