Skip to content

DESIGN.md

Latest commit

 

History

History
117 lines (101 loc) · 4.39 KB

DESIGN.md

File metadata and controls

117 lines (101 loc) · 4.39 KB
Raw
name Croquing
description Real-time croquis meetup UI — warm product surface, dark immersive drawing mode
colors
bg bg-accent surface text muted border accent accent-hover accent-soft on-accent error error-bg success drawing-bg drawing-text thumb-bg grid-bg
#fafafa
#f4f4f5
#ffffff
#1a1614
#5c534a
#ddd4c8
#c2410c
#9a3412
#fff7ed
#ffffff
#b91c1c
#fef2f2
#15803d
#0c0a09
#fafaf9
#e7e5e4
#f5f5f4
typography
body display
fontFamily fontSize fontWeight lineHeight
Manrope, Segoe UI, system-ui, sans-serif
0.9375rem
400
1.5
fontFamily fontSize fontWeight lineHeight letterSpacing
Syne, Georgia, Times New Roman, serif
clamp(1.5rem, 5vw, 2.2rem)
700
1.1
-0.02em
rounded
sm md lg pill circle
0.5rem
0.75rem
1rem
999px
50%
spacing
touch-min content-max
2.75rem
72rem
components
button-primary button-secondary phase-panel
backgroundColor textColor rounded height
{colors.accent}
#ffffff
999px
{spacing.touch-min}
backgroundColor textColor rounded height
{colors.surface}
{colors.text}
999px
{spacing.touch-min}
backgroundColor textColor rounded padding
{colors.surface}
{colors.text}
{rounded.lg}
1.5rem

Overview

Croquing uses a product register in the SPA and a brand register on the marketing landing (docs/index*.html). Both share terracotta accent and near-neutral backgrounds. The SPA uses frontend/src/index.css; the landing uses docs/landing.css with matching token names (--color-bg, --color-accent, etc.). Syne carries display headings; Manrope carries body text.

Colors

Role Token Usage
Page bg --color-bg Lobby, home shell, marketing landing
Surface --color-surface Panels, inputs
Ink --color-text Primary copy
Muted --color-muted Secondary copy (≥4.5:1 on surfaces)
Accent --color-accent Primary actions, admin badge, timer bar
On accent --color-on-accent Text/icons on accent backgrounds
Drawing --color-drawing-bg / --color-drawing-text Full-screen draw phase

Accent is terracotta (#c2410c), used for actions and state—not decorative fills. Body backgrounds stay near-neutral (#fafafa), not saturated cream.

Typography

  • Body: Manrope 400–700, 16 px base (--text-body), 1.5 line-height
  • Display: Syne 600–700 for h1/h2 in lobby and home only—not buttons or data
  • Landing scale (docs/landing.css): --text-body (16px) → --text-subhead (22px) → --text-section (fluid) → --text-display (fluid); ≥1.25× between steps
  • SPA scale: Fixed rem steps (product register); no fluid heading clamp in app chrome
  • Prose: text-wrap: pretty on lead paragraphs; max ~30 rem on marketing lead

Elevation

  • Panels: 1 px border (--color-border) OR --shadow-sm, not both
  • Drawing timer: Thin top bar with accent gradient; optional glow only in urgent state
  • Modals: Solid surface + --shadow-lg; no bounce easing on open
  • Z-index: drawing controls (10) → modal backdrop (native dialog) → selection dock (50)

Components

  • Buttons: Pill shape, --touch-min height, primary/secondary/icon-only variants
  • Phase panels: .phase-panel — padded surface card for lobby phases
  • Pixabay grid: Square aspect-ratio tiles, 2 px selection ring
  • Selection dock: Fixed bottom bar when photos selected; solid surface, scrollable thumbs
  • Marketing landing: .btn-primary, .tab-nav / .tab-btn, .features-list, .hero-illustration (circular frame via --radius-circle) — border-first, no glass or metric hero bars
  • Drawing panel: Fixed inset, black stage, object-fit: contain photo, footer attribution

Do's and Don'ts

Do

  • Use CSS variables for color; extend :root for new semantic roles
  • Keep drawing mode minimal—photo, timer, attribution
  • Localize all aria-label, alt, and visible strings via t()
  • Honor prefers-reduced-motion: reduce

Don't

  • Glassmorphism, cream paper backgrounds, or uppercase eyebrow kickers on every section
  • Pair 1 px border with wide soft shadow on the same card
  • Bounce/elastic easing on modals or decorative infinite animations in lobby chrome
  • Custom scrollbars or touch targets below 44 px