Web patterns

The common pieces of a website, drawn in Mac OS X 10.6 chrome: glass pills, etched group boxes, and blue selection. Everything on this page is live.

Forms

Fields with validation

Choices

Email me about updates
Show badges on the Dock
40%

Token field and date picker

Press Return or comma to add. Backspace removes the last.

File upload

Drop files here
    Feedback

    Notifications

    Dark HUD panels slide in at the top right and fade after a few seconds.

    Dialogs

    The alert blocks the page. The sheet slides out of the title bar and blocks only this window.

    Tooltips and popovers

    Progress

    Inline messages

    Scheduled maintenanceThe site will be read-only on Sunday from 2 to 3 AM.
    Changes savedYour profile was updated.
    Storage almost fullYou have used 82% of your 5 GB plan.
    Payment declinedCheck the card number and try again.
    Content

    Cards

    Select a card to see the focus ring.

    Aurora
    A cool gradient wallpaper in two sizes.
    Field notes
    Twelve pages of interview takeaways.
    Assets
    Logos, icons, and brand colors.

    Accordion

    Shipping
    Standard delivery takes 3 to 5 business days. Express arrives next day.
    Returns
    Return anything within 30 days in its original packaging for a full refund.
    Warranty
    Every product includes a one-year limited warranty.

    People, badges, and labels

    • AL
      Ada LovelaceEngineering
      3
    • GH
      Grace HopperCompilers
      12
    • KJ
      Katherine JohnsonFlight dynamics
      0
    RedOrangeGreenBluePurple

    Data table

    ProjectOwnerStatusDue
    Overlays and menus

    Command palette

    Type to filter. Use the arrow keys and Return.

      Nothing run yet.

      Context menu

      Right-click the box, or focus it and press Shift+F10.

      Right-click here

      No action yet.

      Menu with checkmarks

      Path bar, status bar, icons

      Hover card

      Hover or focus the name.

      Reviewed by @ada ALAda LovelaceEngineering, joined 2019 Writes the analytical engine notes and reviews every release.

      Combobox

      Drawer

      The drawer slides in over the page and traps no one: Escape or Done closes it.

      Inputs

      Toggle groups

      Rating

      No rating yet.

      One-time code

      Paste a code or type one digit per box.

      Text with counter

      0 / 80

      Plan cards

      Price range

      $50 to $300
      Data

      Stat tiles

      Visitors12,480▲ 12% this week
      Orders861▲ 4%
      Refunds23▼ 9%

      Bar chart

      Timeline

      1. Order placed
      2. Payment confirmed
      3. Shipped
      4. Out for delivery

      Skeleton loading

      Inspector

      General
      Kind
      PDF document
      Size
      2.4 MB
      Where
      Macintosh HD ▸ Documents
      More info
      Created
      Oct 1, 2026
      Modified
      Oct 3, 2026

      Tree view

        Layout and flow

        Assistant (stepper)

          Split view

          Drag the divider, or focus it and use the arrow keys.

          Inbox
          Drafts
          Sent
          Archive
          Select a mailbox to see its messages. The two panes share the space.

          Carousel

          Typography

          Release notes

          Version 2.1 adds keyboard shortcuts and fixes a rare crash. Press ⌘ K to search, or call snow.open() from your script.

          Design is not just what it looks like. It’s how it works.
          • Faster window resizing
          • New Graphite appearance
          • Better VoiceOver labels
          .snow { --snow-sel-1: #6fa6e0; }