One identity that speaks five visual dialects.
A neutral black-and-white foundation governs every shared surface. A per-event accent layer meets guests where they are emotionally. This reference documents the locked tokens, type, and components for the Momently event-media platform.
The two-layer system
Momently's identity is built on a deliberate separation of concerns. The base never bleeds into the accent; the accent never enters the dashboard.
The neutral foundation
An achromatic scale governs every shared surface — the host dashboard, account & billing, admin tools, and the B2B reseller portal. No hint of any event palette enters here. It guarantees white-label brands inject cleanly without colliding with Momently's own accents.
The event accent
Each event type carries a named accent pair that renders only on event marketing pages and guest-facing album surfaces. Accents never appear in the dashboard — they exist to meet guests where they are emotionally.
Neutral scale
The base system for the whole product. The dashboard uses only these tokens. Click any swatch to copy its hex.
Dark mode inverts the scale — --white becomes the #0A0A0A canvas; --ink-950 becomes #FAFAFA text. Toggle it from the sidebar.
System states
Global across both layers. They never change per event type and are never overridden by white-label tenants. All tested to WCAG AA against white and paper backgrounds.
Event accents
One primary + one secondary per event type. They render on marketing sub-sites, the QR landing page, the guest upload interface, and the completed album — never in shared surfaces.
Contrast rules. Aurum (≈2.8:1 on white) is decorative only — text on Aurum uses --ink-950. Confetti (≈3.9:1) is for large UI only. Pulse (≈7.8:1) and Signal (≈4.6:1) pass AA for text.
Typography
Three self-hosted families (WOFF2, EU CDN — no Google Fonts data transfer in production). Editorial serif for display, neutral sans for UI, mono for payloads.
Spacing & grid
4px base, 8pt rhythm. Most gaps, paddings, and margins land on 8px multiples; the 4px unit is reserved for micro-adjustments.
Grid. 12-column fluid with max-width caps (1280px at lg/xl, 1440px at 2xl). Guest capture pages are mobile-first single-column with 16px page padding. The dashboard uses a fixed 240px sidebar + 12-column content.
Radius
Rounded but not bubbly — capped at 24px. Modern and approachable without consumer-app softness.
Elevation
Shadows use ink-950 at low opacity — never blue-tinted — keeping the neutral palette consistent across surfaces.
Logo
Two marks from one typographic DNA. The wordmark is always lowercase momently in Fraunces 600; the monogram is a single m in a rounded square.
Color behavior. Ink-950 on light, white reversed on dark. The wordmark adopts the event accent only on that event's marketing site. Never gradients, drop shadows, or outline strokes. Clear space = 1× cap-height on all sides. Below 80px wide, switch to the monogram.
Buttons
Neutral by default. Primary is ink-950 (inverts in dark mode); destructive uses the danger state. Accent-filled buttons appear only on guest-facing surfaces.
Copy follows the voice: action-first, low-friction. "Start your free event" — never "Sign up now!"
Inputs
Hairline borders, ink focus ring. Error states use the danger token with specific, actionable hint copy.
Badges
Status and metadata pills. State badges map directly to the system state tokens at low-opacity fills.
Cards
The dashboard's primary content container. Neutral surface, hairline border, subtle lift on hover. Image areas use the two-tone grayscale placeholder treatment.
Upload & storage
The capture flow's core surface. The dropzone accepts photos, videos, and voice notes; the queue tracks each file with a live progress bar and resolves to a success or actionable error state. Click the dropzone to simulate an upload.
Error copy is specific and actionable — "Failed · too large (max 200 MB)" — never a vague "Something went wrong."
Gallery & download
The album grid mixes photos, videos, and voice notes. Filter by type, multi-select tiles, then batch-download as a ZIP. Click tiles to select; use the filter tabs above.
Players
Video and voicemail playback. Controls stay neutral; the video surface is always dark canvas regardless of theme. Both players are interactive.
QR & short links
Every event generates a QR code and a moment.ly short link. Guests scan or tap — no app, no signup. Hosts can copy the link or download print-ready QR assets.
Print rule. On printed QR inserts the code is black monochrome only — no accent colors (ink coverage varies on physical stock).
Dashboard primitives
Supporting pieces for the host workspace: metric tiles, the segmented control, and the two-tone grayscale empty state.
Accent showcase
The same guest capture component, rendered in each event accent. Body text stays ink-950; the card surface stays white. Only CTAs, the monogram, and highlight fills take the accent.
A message for Sophie & Liam
Share a photo, a short video, or record a voice message — no app needed. They'll treasure every one.
White-label injection
Resellers at Agency+ tiers inject a brand accent via three CSS custom properties set server-side on guest-facing routes. The neutral base and system states are never overridden.
| Property | Role |
|---|---|
--wl-accent | Required primary brand color. Rejected at save time if it fails 3:1 contrast on white. |
--wl-accent-contrast | Auto-derived text color (white or ink-950). Never user-configurable — guarantees AA on accent-filled buttons. |
--wl-accent-subtle | Auto-derived: primary at 97% lightness, 12% alpha. Highlight fills. |
--wl-accent-strong | Auto-derived: primary darkened 15% for hover states. |
--wl-font-display / --wl-font-ui | Agency+ optional. Fall back to Fraunces / Inter. |
Neutral base unchanged. The shared dashboard the reseller's team uses stays fully neutral — only their end guests and their own marketing site see the injected accent.