Interfaces support viewing, scanning, collecting, and learning without competing with the work itself.
01 · Overview
Quiet UI for vivid art.
OTA uses warm neutrals and soft geometry to create a calm frame around artwork. Functional hierarchy stays clear, while editorial typography gives cultural content a distinct voice.
Brown ink and a warm-gray canvas replace generic black-on-white product styling.
Orange is focused on selection and action, preserving its ability to guide attention.
02 · Foundations
Color
The core system is intentionally compact: warm canvas, white surface, brown ink, and a single orange action color. Supporting hues remain contextual.
03 · Foundations
Typography
Rubik is the functional voice. Anonymous Pro is a selective editorial accent for captions and metadata. The examples below reflect the primary combinations observed in the selected UI section.
Heading LRubik Medium
Discover art around you
24 / 32500
Heading MRubik Medium
Your saved collection
20 / 28500
Heading SRubik Medium
Featured movement
16 / 24500
LabelRubik Medium
View artwork
14 / 20500
BodyRubik Regular
Short, direct copy supports the artwork without taking attention away from it.
14 / 20400
SupportingRubik Regular
Artist · Year · Collection
12 / 16400
NavigationRubik Regular
MY GALLERY
11 / 16400
Editorial CaptionAnonymous Pro
A closer look at the story behind the work.
16 / 24400
04 · Foundations
Spacing & shape
The interface follows an 8 px rhythm with 4 px optical adjustments. Soft radii create hierarchy without making every surface look like a pill.
Space 1Tight
4 px
Space 2Inline
8 px
Space 3Compact
12 px
Space 4Standard
16 px
Space 6Section
24 px
Space 8Large
32 px
05 · Foundations
Icons
The current OTA icon library remains the source of truth. Standard icons share a consistent canvas and stroke treatment; product-specific status icons retain their unique semantics.
24×24Master canvas
1.5 pxCurrent line weight
RoundCaps and joins
OpticalScale and centering
06 · Components
Core building blocks
These demonstrations communicate current component behavior and visual hierarchy. They are documentation examples, not replacements for the Figma source components.
Buttons
Use one primary action per decision area. Secondary and icon controls remain visually quieter.
Artwork card
White surface, soft radius, artwork-led hierarchy, and concise supporting metadata.
Untitled compositionArtist · 2026
Chips and status
Pill geometry supports compact states. Meaning should remain understandable without relying on color alone.
7 day streak
Collected
Bottom navigation
Five equal items with an orange active state and platform-safe spacing.
07 · Usage
Do / Don’t
Consistency comes from restrained reuse. Existing components and semantic treatments should be preferred over adding stylistic variations.
Do
- Keep artwork visually dominant.
- Use brown ink for standard text and icons.
- Reserve orange for action and selection.
- Reuse OTA components and icon masters.
- Align by optical balance when needed.
Don’t
- Introduce unrelated fonts or icon concepts.
- Use orange as broad decoration.
- Flatten editable icon strokes.
- Normalize artwork-specific shapes blindly.
- Treat every legacy value as a new token.
Accessibility
- Meet WCAG AA contrast for body text.
- Use 44 × 44 px minimum touch targets.
- Do not communicate state with color alone.
- Provide visible keyboard focus on web.
- Support text resizing without clipping.
08 · Status
What is confirmed
This reference separates values directly observed in the selected UI from system-level interpretations that still need product validation.
Confirmed from Figma: dominant palette, primary type combinations, recurring spacing and radius values, shadows, button families, icon instances, and five-item bottom navigation.
Needs validation: final motion tokens, consolidation of legacy type combinations, contrast for every image overlay, and whether artwork-specific shadows should become reusable styles.
Needs validation: final motion tokens, consolidation of legacy type combinations, contrast for every image overlay, and whether artwork-specific shadows should become reusable styles.