MASA

Overview

MASA is a cultural movement design system that celebrates Indonesian heritage through architectural minimalism and deliberate typographic restraint. The brand serves as a digital gateway for 100+ creators across art, design, fashion, music, culinary, and architecture, landing in Singapore from July 2–August 10, 2026. The aesthetic is gallery-like and contemplative: a pure black canvas (rgb(0, 0, 0)) punctuated by a vivid red accent (rgb(228, 0, 20)) that commands attention without aggression. The UI evokes the precision of a museum catalog—clean lines, generous whitespace, and serif typography that grounds the experience in cultural gravitas.

The brand voice is curatorial and measured. MASA speaks with the authority of a cultural institution, never breathless or casual. Vocabulary favors specificity: "First Arrival," "100+ creators," "2 July – 10 August 2026"—dates and facts matter. The tone is invitational but never desperate; the design trusts the audience to recognize significance. Example sentence: "Indonesia's largest cultural movement lands in Singapore. Takashimaya & Gardens By The Bay, 2 July – 10 August 2026."

Colors

The color system is deliberately monochromatic with a single, commanding accent. Primary (#e40014, rgb(228, 0, 20)) is the brand's signature red—used exclusively on call-to-action buttons, active states, and critical interactive elements. It appears sparingly, creating visual hierarchy through restraint rather than saturation. The surface stack is pure black (#000000, rgb(0, 0, 0)) for the base canvas, with container variants ranging from #0a0a0a (surface-dim) to #383838 (surface-container-highest) to provide subtle depth without breaking the monochromatic aesthetic. On-surface text is #f3f3f3 (rgb(243, 243, 243)), a warm off-white that reduces eye strain against the black background while maintaining gallery-like sophistication. Secondary (#fcbb00, rgb(252, 187, 0)) is a warm amber used f

Typography

The type system pairs Marcellus (serif, 400 weight) for display and headline scales with Geist Variable (sans-serif) for body and label text. This pairing creates a visual hierarchy that feels both contemporary and rooted: the serif headlines evoke cultural authority and timelessness, while the sans-serif body text ensures legibility and modernity. Display (60px, 400 weight, -0.02em letter-spacing) is reserved for hero statements and major section breaks; headline-lg (40px, 400 weight) anchors subsections; headline-md (28px, 400 weight) introduces content blocks. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) handle narrative content with generous line-height (1.55–1.5 ratio) to enhance readability on dark backgrounds. Label-md (14px, 600 weig

Layout

The layout system uses a 12-column grid with a max-width of 1280px, allowing content to breathe on large screens while maintaining focus on smaller viewports. The spacing scale is semantic: unit (8px) is the base increment; xs (4px) for micro-adjustments; sm (12px) for tight grouping; md (24px) for standard component padding and section gutters; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. The marquee banner (50px height, fixed top) and navbar (50px height) consume 100px of viewport, leaving 100dvh – 100px for hero content—a deliberate rhythm that creates visual breathing room. Container padding uses the gutter token (24px) on all sides, scaling to 40px (lg) on larger screens. White-space is treated as a design element: sections are separated by lg spa

Elevation & Depth

Depth in MASA is achieved through subtle shadow and border systems rather than layered backgrounds. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and micro-interactions; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals; lg (0 16px 40px rgba(0, 0, 0, 0.25)) for hero overlays and floating elements. All cards use a 1px solid border at {colors.outline-variant} (#5a5a5a) to define edges without relying on shadow alone. Hover states on cards transition from md to lg shadow over 300ms, creating a subtle lift effect. The marquee banner and navb

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are minimal and functional, never decorative. The rounded scale uses sm (0.25rem / 4px) for tight, technical elements like input borders and small badges; DEFAULT (0.5rem / 8px) for buttons and standard interactive elements; md (0.75rem / 12px) for cards and containers; lg (1rem / 16px) for larger modals and hero overlays; xl (1.5rem / 24px) for expansive hero sections and full-width containers; full (9999px) for pill-shaped badges and circular elements. Buttons use DEFAULT (8px) radius, creating a subtle softness without compro

Components

Action Elements Buttons are the primary interactive mechanism. button-primary uses {colors.primary} (#e40014) background with white text, 12px 24px padding, 48px height, and a 1px border at the same color. On hover, the background shifts to {colors.primary-fixed-dim} (#e40014 at 90% opacity) with a 200ms transition. On active/focus, the background becomes {colors.primary-container} (#fb2c36) with a 3px rgba(228, 0, 20, 0.1) glow. button-secondary uses a transparent background with {colors.on-surface} text and a 1px {colors.outline} border; on hover, the background becomes {colors.surface-container-high} (#2c2c2c). All buttons use {typography.label-md} (14px, 600 weight) and apply text-transform: uppercase for visual emphasis.

Containers & Surfaces Cards are the primary content con

Do's and Don'ts

**Do**

• Do use the primary red (#e40014) exclusively for high-priority CTAs and active states—never for decorative elements or backgrounds.
• Do maintain generous whitespace (lg spacing / 40px minimum) between major sections to preserve the gallery-like contemplative aesthetic.
• Do pair Marcellus serif headlines with Geist Variable body text to create visual hierarchy that feels both authoritative and contemporary.
• Do apply the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers to define depth without visual clutter.
• Do use cubic-bezier(0.4, 0, 0.2, 1) timing for all transitions (200–300ms) to create measured, deliberate interactions.
• Do apply 1px solid borders at {colors.outline-variant} (#5a5a5a) to all interactive elements for architectural clarity.

**Don't**

• Don't use the primary red for backgrounds, body text, or decorative elements—reserve it exclusively for interactive CTAs and focus states.
• Don't apply rounded corners larger than lg (16px) to buttons or small interactive elements; maintain architectural precision.
• Don't use drop shadows larger than lg (0 16px 40px) on standard cards; reserve lg elevation for hero overlays and floating modals only.
• Don't mix serif and sans-serif fonts within the same line or paragraph; use Marcellus for headlines and Geist Variable for body exclusively.
• Don't apply text-shadow to body text on dark backgrounds; reserve it only for small serif labels (label-sm) to prevent readability issues.
• Don't use transitions shorter than 200ms or longer than 300ms for standard interactions; maintain the measured, gallery-like pacing.