The Museum of Modern Art (MoMA)

Overview

MoMA's design system embodies Institutional Modernism—a refined aesthetic that prioritizes clarity, authority, and accessibility in service of art discovery. The brand serves global audiences seeking to engage with contemporary and modern art, from casual visitors to dedicated collectors. The visual language is deliberately austere: a pure white canvas with bold black typography, punctuated by a vibrant cyan accent (#00b7f2) that draws attention to calls-to-action and key navigation elements. The secondary accent—a vivid red-orange (#e42d00)—signals urgency and special events, while a teal tertiary (#6bdcc5) provides a contemporary, approachable counterpoint. The UI evokes the gallery itself: clean walls, generous white space, and strategic focal points that guide the eye without distraction.

MoMA's voice is authoritative yet welcoming, precise yet conversational. The tone avoids breathlessness; instead, it speaks with the confidence of an institution that has shaped modern art history. Vocabulary is direct and jargon-free: 'Visit,' 'Exhibitions,' 'Art and artists,' 'Support experimentation, learning, and creativity.' The brand personality is curatorial—every word and pixel is intentional. Example sentence in MoMA's voice: 'Explore our collection of over 200,000 works spanning painting, sculpture, photography, and film.'

Colors

MoMA's color system is rooted in institutional restraint with strategic chromatic punctuation. The primary surface is pure white (#ffffff), creating an uncluttered canvas that mirrors the gallery environment. The on-surface text is pure black (#000000), ensuring maximum legibility and authority. The primary accent—cyan (#00b7f2)—is reserved for the most important interactive elements: the 'Tickets' button, primary CTAs, and focus states. This high-contrast, high-saturation blue commands attention without overwhelming the layout. Secondary accent red (#e42d00) is used sparingly for urgent messaging, error states, and special event highlights. The tertiary teal (#6bdcc5) appears in hero sections and supporting UI elements, providing a contemporary, accessible alternative to the primary blue.

Typography

MoMA Sans—a custom, geometric sans-serif family—is the sole typeface across all contexts. The type system is built on extreme weight contrast: MoMA Sans Bold (fontWeight: 900) is used exclusively for headings, labels, and CTAs, creating a commanding visual hierarchy. MoMA Sans Regular (fontWeight: 400) handles body text, descriptions, and secondary information. Display-level headings (60px, 900 weight, -0.04em letter-spacing) command hero sections; headline-lg (40px, 900 weight) anchors major sections; headline-md (28px, 900 weight) introduces subsections. Body text is set at 16–18px with 400 weight and 24–28px line-height, ensuring comfortable reading on screens and print. Labels and buttons use 14px, 900 weight, with 0.01em letter-spacing for crisp, authoritative micro-copy. All headings

Layout

MoMA's layout follows a 12-column grid with a maximum container width of 1280px, providing a flexible yet structured canvas for content. The page rhythm alternates between full-width hero sections (image + text overlay) and constrained content blocks, creating visual breathing room. White space is generous: section separation uses lg spacing (40px), while internal element padding uses md (24px) or sm (12px) depending on context. The gutter width is 24px, maintaining consistent horizontal rhythm across breakpoints. The hero section spans full viewport width with a large background image (often featuring artwork or museum interiors), overlaid with a semi-transparent text block positioned at bottom-left or center. Navigation is sticky at the top, with a height of 166.734375px (as defined in t

Elevation & Depth

MoMA's depth model is deliberately flat, reflecting the gallery's minimalist aesthetic. Shadows are used sparingly and only to clarify interactive hierarchy. Level 1 (Base): The white background (#ffffff) with no shadow. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, input fields, and secondary surfaces to subtly lift them from the base. Level 3 (Modals & Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) for modals, dropdowns, and elevated panels. Focus states use a 2px outline (outline-width: 2px, outline-style: auto) with the appropriate accent

Shapes

MoMA's shape philosophy is Architectural Minimalism: sharp, rectilinear forms with minimal rounding. The default border-radius is 0.4rem (6.4px), applied to buttons, input fields, and small cards, providing just enough softness to feel contemporary without compromising the institutional geometry. Larger cards and containers use 0.75rem (12px) for a slightly more generous curve. Buttons are consistently 48px tall with 0 vertical padding and 16px horizontal padding, creating a compact, clickable target. The full-radius value (9999px) is reserved for badges and pill-shaped elements. Border-radius

Components

Action Elements Buttons are the primary interactive currency. The button-primary component uses a cyan background (#00b7f2), white text, 48px height, 0.4rem border-radius, and 16px horizontal padding. On hover, the background shifts to #0099cc (a darker cyan), maintaining the accent while signaling interactivity. On focus-visible, a 2px outline in white (outline-color: rgba(255, 255, 255, 1)) appears with outline-offset: 0, ensuring keyboard users see clear focus indication. Button labels use MoMA Sans Bold at 14px, 900 weight, with 0.01em letter-spacing. Secondary buttons use a transparent background with a 1px border in outline color (#999999) and black text, providing a lower-emphasis alternative. Ghost buttons (used for tertiary actions) have no border or background, relying on tex

Do's and Don'ts

**Do**

• Do use MoMA Sans Bold (900 weight) for all headings, labels, and CTAs to maintain the authoritative, geometric aesthetic.
• Do apply cyan (#00b7f2) to primary CTAs and focus states; reserve red (#e42d00) for urgent messaging and special events only.
• Do maintain 48px minimum height for all clickable targets (buttons, input fields, list items) to ensure touch accessibility.
• Do use generous white space (lg spacing: 40px) between major sections to reflect the gallery's minimalist environment.
• Do apply explicit 2px outline focus states with outline-offset: 0 to all interactive elements for WCAG AA keyboard navigation compliance.

**Don't**

• Don't use rounded corners (border-radius > 0.4rem) on large containers or hero sections; reserve rounding for buttons and small interactive elements.
• Don't introduce new accent colors beyond cyan, red, and teal; the palette is intentionally constrained to maintain institutional authority.
• Don't apply shadows to elements smaller than cards; use background-color shifts instead to maintain the flat, architectural aesthetic.
• Don't use MoMA Sans Regular for headings or labels; the 900-weight Bold is required for visual hierarchy and brand recognition.
• Don't animate state changes (hover, focus, active); use instant color shifts to maintain the crisp, decisive institutional tone.