Totem UI Design Skill

Purpose

Create stunning, production-ready check-in interfaces for physical totems used at events. The UI must be:

• Beautiful: Professional, modern, event-worthy aesthetics
• Accessible: Large touch targets, high contrast, clear feedback
• Performant: Smooth animations, fast interactions
• Intuitive: Zero learning curve for event attendees

Design Principles

1. Touch-First Design

• Minimum touch target: 48x48px (recommended: 64x64px or larger)
• Generous spacing between interactive elements
• Visual press states (scale down, color change)
• No hover-dependent interactions

2. Visual Hierarchy

• Clear focal points for each screen state
• Progress indicators for multi-step flows
• Prominent success/error feedback
• Subtle ambient animations for "alive" feeling

3. Event Aesthetics

• Dark mode default (reduces glare in various lighting)
• Gradient accents for visual interest
• Glassmorphism effects for depth
• Smooth transitions between states

4. Feedback Loops

• Immediate visual response to touches
• Progress animations during processing
• Celebratory success animations
• Clear error messaging with recovery options

Component Patterns

Hero Cards

tsx
1// Full-screen card with gradient border
2<div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 to-slate-800 p-1">
3  <div className="from-primary/20 to-accent/20 absolute inset-0 bg-gradient-to-br via-transparent" />
4  <div className="relative rounded-[22px] bg-slate-950/90 p-8 backdrop-blur-xl">{content}</div>
5</div>

Touch Buttons

tsx
1// Large, satisfying touch buttons
2<button className="group from-primary to-primary/80 shadow-primary/25 relative h-24 w-full rounded-2xl bg-gradient-to-br shadow-lg transition-all duration-200 active:scale-[0.98] active:shadow-md disabled:cursor-not-allowed disabled:opacity-50">
3  <span className="absolute inset-0 rounded-2xl bg-white/10 opacity-0 transition-opacity group-active:opacity-100" />
4  <span className="relative flex items-center justify-center gap-3">
5    <Icon className="h-8 w-8" />
6    <span className="text-xl font-semibold">{label}</span>
7  </span>
8</button>

Status Indicators

tsx
1// Pulsing status dot
2<span className="relative flex h-4 w-4">
3  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
4  <span className="relative inline-flex h-4 w-4 rounded-full bg-emerald-500" />
5</span>

Success Animation

tsx
1// Checkmark with scale-in animation
2<div className="animate-in zoom-in-50 duration-500">
3  <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-emerald-500/20 ring-4 ring-emerald-500/30">
4    <CheckCircle2 className="animate-in zoom-in h-16 w-16 text-emerald-400 delay-200 duration-300" />
5  </div>
6</div>

Error State

tsx
1// Error with shake animation
2<div className="animate-shake">
3  <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-rose-500/20 ring-4 ring-rose-500/30">
4    <XCircle className="h-16 w-16 text-rose-400" />
5  </div>
6</div>

Camera Frame

tsx
1// Camera viewfinder with scanning effect
2<div className="relative aspect-video overflow-hidden rounded-2xl bg-black">
3  <video ref={videoRef} className="h-full w-full object-cover" />
4
5  {/* Corner brackets */}
6  <div className="pointer-events-none absolute inset-0">
7    <div className="border-primary absolute top-4 left-4 h-12 w-12 rounded-tl-xl border-t-4 border-l-4" />
8    <div className="border-primary absolute top-4 right-4 h-12 w-12 rounded-tr-xl border-t-4 border-r-4" />
9    <div className="border-primary absolute bottom-4 left-4 h-12 w-12 rounded-bl-xl border-b-4 border-l-4" />
10    <div className="border-primary absolute right-4 bottom-4 h-12 w-12 rounded-br-xl border-r-4 border-b-4" />
11  </div>
12
13  {/* Scanning line animation */}
14  <div className="via-primary animate-scan absolute inset-x-0 h-0.5 bg-gradient-to-r from-transparent to-transparent" />
15</div>

Loading Spinner

tsx
1// Smooth circular progress
2<div className="relative h-20 w-20">
3  <svg className="animate-spin" viewBox="0 0 100 100">
4    <circle className="stroke-slate-700" cx="50" cy="50" r="40" fill="none" strokeWidth="8" />
5    <circle
6      className="stroke-primary transition-all duration-300"
7      cx="50"
8      cy="50"
9      r="40"
10      fill="none"
11      strokeWidth="8"
12      strokeLinecap="round"
13      strokeDasharray="251.2"
14      strokeDashoffset={251.2 * (1 - progress)}
15      transform="rotate(-90 50 50)"
16    />
17  </svg>
18</div>

Animation Keyframes

Add to globals.css:

css
1@keyframes scan {
2  0% {
3    top: 0;
4    opacity: 1;
5  }
6  50% {
7    opacity: 0.5;
8  }
9  100% {
10    top: 100%;
11    opacity: 1;
12  }
13}
14
15@keyframes shake {
16  0%,
17  100% {
18    transform: translateX(0);
19  }
20  10%,
21  30%,
22  50%,
23  70%,
24  90% {
25    transform: translateX(-4px);
26  }
27  20%,
28  40%,
29  60%,
30  80% {
31    transform: translateX(4px);
32  }
33}
34
35@keyframes pulse-ring {
36  0% {
37    transform: scale(0.8);
38    opacity: 0.8;
39  }
40  50% {
41    transform: scale(1.2);
42    opacity: 0;
43  }
44  100% {
45    transform: scale(0.8);
46    opacity: 0;
47  }
48}
49
50@keyframes float {
51  0%,
52  100% {
53    transform: translateY(0);
54  }
55  50% {
56    transform: translateY(-10px);
57  }
58}
59
60.animate-scan {
61  animation: scan 2s ease-in-out infinite;
62}
63
64.animate-shake {
65  animation: shake 0.5s ease-in-out;
66}

Color Palette (Totem Dark Theme)

css
1/* Backgrounds */
2--totem-bg: oklch(0.12 0.02 270); /* Near black */
3--totem-surface: oklch(0.16 0.03 270); /* Dark slate */
4--totem-elevated: oklch(0.2 0.04 270); /* Elevated cards */
5
6/* Accents */
7--totem-primary: oklch(0.65 0.25 280); /* Vibrant violet */
8--totem-accent: oklch(0.7 0.2 200); /* Cyan accent */
9
10/* Status */
11--totem-success: oklch(0.7 0.2 155); /* Bright green */
12--totem-error: oklch(0.65 0.25 25); /* Bright red */
13--totem-warning: oklch(0.8 0.18 80); /* Amber */
14
15/* Text */
16--totem-text: oklch(0.95 0.01 270); /* Near white */
17--totem-text-muted: oklch(0.65 0.02 270); /* Gray */

Responsive Breakpoints

Totem screens are typically:

• Portrait: 1080x1920 (9:16)
• Landscape: 1920x1080 (16:9)

tsx
1// Container sizing
2<div className="mx-auto w-full max-w-2xl px-6 py-8">

Accessibility Requirements

1. Color Contrast: Minimum 4.5:1 for text, 3:1 for large text
2. Focus States: Visible focus rings on all interactive elements
3. Motion: Respect prefers-reduced-motion
4. Touch: No double-tap zoom areas, single-tap only

Anti-Patterns

❌ Small, hard-to-tap buttons ❌ Hover-only interactions ❌ Low contrast text ❌ Jarring transitions ❌ Confusing iconography ❌ Hidden actions ❌ Complex multi-step flows ❌ Text-heavy screens ❌ Relying on color alone for status

Best Practices

✅ Large, clear CTAs ✅ Immediate visual feedback ✅ Simple, focused screens ✅ Clear progress indication ✅ Graceful error handling ✅ Celebratory success states ✅ Consistent navigation patterns ✅ Generous whitespace ✅ High contrast in all conditions