Log Game Session
A serene, minimalist design system featuring a soft pastel palette (mint, lavender, peach) and high-end editorial typography. Characterized by oversized border radii (32px), subtle card shadows, and spacious layouts, this style is ideal for lifestyle, board game logging, wellness trackers, or hobbyist social platforms. It utilizes a sophisticated pairing of 'Plus Jakarta Sans' for readability and 'Satoshi' for stylistic emphasis, creating a calm and organized user experience.
Summary
A calm, pastel-themed form and activity logging system featuring soft-rounded cards, high-quality iconography, and a distinctive editorial typographic style.
Style
The style essence is 'Modern Serenity'. It uses a light-gray background (#FAFAFA) contrasted with soft pastel containers (Orange-50, Emerald-50, Lavender-50). Typography relies on 'Plus Jakarta Sans' for UI elements and 'Satoshi' (often italicized and bold) for headers. Spacing is generous, and cards feature a delicate shadow (0 4px 20px -2px rgba(0,0,0,0.03)) rather than hard borders.
Layout & Structure
A vertical, single-column scrollable layout optimized for mobile/tablet views, organized into logical sections with clear horizontal separators or spacing.
Page Header & Intro
Search/Select Input Section
Split-Column Input Grid
Horizontal Friend/User Scroller
Result/Score List
Footer CTA
Components
Interactive Score Input
A compact, rounded input field designed for numeric values within a card context.
Pastel Quick-Action Card
A large, clickable banner for primary user actions.
Special Notes
MUST: Maintain the 32px border radius for all major section containers to keep the 'soft' look. MUST: Use Satoshi-Italic for the main page header only. MUST: Ensure pastels remain at 50-100 weight in the Tailwind scale for background use to prevent clashing. DO NOT: Use high-contrast borders; rely on background color changes or soft shadows for separation. DO NOT: Use sharp corners anywhere; the minimum radius should be 12px.