atmo.gifts
Run raffles for events on AT Protocol
Star
Fork
Watch
atmo.gifts DESIGN.md
7.4 kB · 95 lines
Markdown
at main

name: atmo.gifts description: Warm, joyous giveaway management for AT Protocol community events #

Design System: atmo.gifts #

1. Overview #

Creative North Star: "The Warm Draw"

atmo.gifts lives in the few minutes when a room full of people is holding their breath together. The design reflects that moment: warm, unhurried surfaces that create presence — then a small, considered spark of joy when a winner is revealed. The system is minimal not as aesthetic posturing, but because clarity matters when someone is reading a QR code across a crowded room or scanning a winner's name mid-conversation.

The closest references are Luma (event-community warmth, clean geometry, no copy-driven persuasion — the composition and restraint, not the light palette) and Things (purposeful micro-animations, well-composed pages). The system rejects SaaS dashboard clichés — hero-metric grids, gradient text, identical card arrays — and generic confetti. It also rejects the sporty electric palette and self-serious tone of tools like Raycast.

The color strategy is Restrained on a dark ground: warm dark surfaces carry nearly all screens, with one amber accent used sparingly. The dark default anticipates dim event environments — a bright screen opened in a darkened room is a disruption to neighbors. The amber accent glows against dark the way candlelight does; its restraint is the point.

Key Characteristics:

  • Warm dark ground with one deliberate amber accent
  • Outfit (geometric sans) throughout — clean, approachable, not cold
  • Flat surfaces by default; depth through tonal steps, not shadow
  • Animations earned, not decorative — the draw screen gets the singular special treatment
  • Copy that steps aside; the product does the talking

2. Colors #

A restrained warm palette on a dark ground: deep warm-tinted surfaces carry nearly everything, with one amber accent used sparingly. The amber glows against dark the way candlelight does — present but never overwhelming.

Primary #

  • Warm Amber [to be resolved during implementation — target: warm amber/honey, OKLCH ~65–70% lightness, moderate chroma ~0.15–0.18]: Primary buttons, active states, and the winner-reveal moment. Its rarity is the point — when it appears, it means something.

Neutral #

  • Dark Ground [to be resolved — OKLCH ~12–16% lightness, chroma 0.008–0.012, warm hue]: Default page background. Very dark warm brown, never cool gray or pure black.
  • Dark Surface [to be resolved — OKLCH ~18–22% lightness, same hue]: Elevated surface for cards, input backgrounds, and containers — one step lighter than the ground.
  • Warm Cream [to be resolved — OKLCH ~90–94% lightness, chroma 0.008–0.012, warm hue]: Primary text. Slightly cream, never pure white.
  • Muted Cream [to be resolved — OKLCH ~55–60% lightness, low chroma, warm]: Secondary text, labels, metadata.

Named Rules #

The One Voice Rule. The warm accent appears on ≤10% of any given screen. The draw screen at the moment of winner reveal is its one sanctioned exception — it may push higher there.

The No Pure Neutrals Rule. Every neutral — background, surface, text — is tinted toward the warm accent hue. Chroma 0.005–0.012 is sufficient. Pure grays and pure white are prohibited.

3. Typography #

Primary Font: Outfit (geometric sans) — all roles, all weights
Fallback: system-ui, sans-serif

Character: Outfit's geometry is clean without being cold. Its rounded terminals and even stroke width carry warmth without sentimentality — right for a tool used by technically-minded people who don't want to feel like they're in a productivity app commercial.

Hierarchy #

  • Display (semibold, large clamp, tight line-height ~1.1): Giveaway title on the draw and results screens. Designed to be legible across a room. [exact sizes to be resolved at implementation]
  • Headline (semibold): Page titles, section headings within the organizer dashboard.
  • Title (medium weight): Subsection labels, prize names, form group headings.
  • Body (regular, 16px baseline, line-height ~1.6): Running text, descriptions, entry confirmation copy. Max 65ch line length.
  • Label (medium, small, slight letter-spacing +0.01em): Form labels, status indicators, metadata.

Named Rules #

The One Font Rule. Outfit carries every typographic role. No secondary display face, no mono accent. Variety comes from weight and size contrast, not family switching.

The No-Caps Rule. Labels and buttons use sentence case. All-caps reads as urgency or formality — neither fits atmo.gifts.

4. Elevation #

This system is flat by default. On a dark ground, depth is communicated through lightness steps — a slightly lighter warm surface reads as elevated — not through drop shadows.

The single exception is the winner-reveal moment on the draw screen. One elevated treatment — a warm tonal lift or ambient glow — may mark the revealed winner. This is the system's one permitted structural use of depth.

The Flat-By-Default Rule. Surfaces are flat at rest. No card has a drop shadow by default. Shadows are not decoration; they are reserved for interaction states or the singular reveal moment.

5. Components #

[To be documented on the next $impeccable document run, once the visual system is implemented and components exist to extract from.]

6. Do's and Don'ts #

Do: #

  • Do tint every neutral — dark or light — toward the warm amber hue, even at chroma 0.005–0.01. Cool grays and blue-shifted darks break the warmth.
  • Do use Outfit at semibold or heavier for any text that must read at a distance — draw screen, QR display, winner reveal.
  • Do honor prefers-reduced-motion on every animation. All motion must degrade gracefully to an instant state change.
  • Do treat the draw and winner reveal as the singular designed moment. Everything else defers to it.
  • Do keep copy minimal and functional. The product does the talking; the interface steps aside.
  • Do size touch targets generously on attendee-facing screens — they are used on phones, mid-conversation, in ambient event lighting.

Don't: #

  • Don't use generic confetti. If a particle effect is used at winner reveal, it must be novel and purpose-built — not a library drop-in.
  • Don't use SaaS dashboard clichés: hero-metric grids, gradient text, identical icon-heading-text card arrays.
  • Don't use heavy marketing copy or hype language anywhere in the UI.
  • Don't use a neon, electric, or crypto-adjacent palette. The accent is warm amber, not RGB.
  • Don't use pure #000000 or #ffffff. Every color — ground, surface, text — is warm-tinted.
  • Don't use cool dark grays or blue-shifted darks as backgrounds. The dark ground is warm brown, not charcoal.
  • Don't use border-left or border-right greater than 1px as a colored accent stripe on cards or list items.
  • Don't use Raycast's electric blue/cyan accent or self-serious copy tone as reference. The darkness here is warm and quiet, not sporty.
  • Don't nest cards inside cards. If a container calls for a nested card, the structure needs rethinking.