Tapas Creator Platform

Overview

Tapas Creator Platform embodies a **Creator-Centric Warmth** aesthetic—a design philosophy that balances professional functionality with approachable, human-centered storytelling. The brand serves independent novelists, comic artists, and visual creators who seek a platform to publish, monetize, and build engaged communities. The UI evokes confidence and creative freedom through a warm, earthy palette (cream #f6f4f0, deep navy #272443) anchored by a vibrant golden accent (#f6b606) that signals opportunity and action. Every interaction—from publishing a chapter to tracking earnings—feels intentional and celebratory, never corporate or sterile.

The voice is encouraging, direct, and peer-to-peer. Tapas speaks to creators as collaborators, not users. Tone examples: 'Your story deserves an audience' (not 'Submit content'), 'Track your growth in real time' (not 'View analytics'). The vocabulary favors creator-specific language: 'publish,' 'earn,' 'community,' 'original,' 'bonus program'—never 'upload,' 'monetize,' or 'platform features.' Brand personality is optimistic yet grounded: we celebrate indie creators without hype, and we deliver practical tools without jargon.

Colors

The color system is rooted in **Warm Professionalism**—a palette that feels both trustworthy and creatively energizing. **Primary (#f6b606)** is the signature golden accent used on all call-to-action buttons, active states, and key highlights. It appears on the hero 'Get Started' CTA and throughout the dashboard to signal interactive moments and creator achievements. **Secondary (#2b5672)** is a deep teal-blue that supports secondary actions, badges, and data visualization; it conveys stability and creative depth without competing for attention. **Tertiary (#116dff)** is a bright, accessible blue reserved for links, tertiary buttons, and accent highlights in data contexts.

The surface stack is deliberately warm: **surface (#f6f4f0)** is a soft cream that reduces eye strain during long cre

Typography

The type system balances **Avenir for headlines** (warm, geometric, creator-friendly) with **Arial for body text** (neutral, highly legible, proven on screens). Headlines use Avenir at weights 600–700 with tight letter-spacing (-0.04em to -0.01em) to create visual hierarchy and energy; body text uses Arial at 400 weight with 0.01–0.02em letter-spacing for clarity during extended reading. **Display (60px, 700 weight, -0.04em spacing)** anchors hero sections and major announcements. **Headline-lg (40px, 600 weight)** is used for page titles and section breaks. **Body-lg (18px, 400 weight, 28px line-height)** is the primary reading size for feature descriptions and creator testimonials. **Label-md (14px, 600 weight)** is applied to button text and form labels to ensure clickable elements stan

Layout

The layout follows a **12-column fluid grid** with a max-width of 1280px, centered on desktop and full-width on mobile. The spacing scale uses semantic tokens: **gutter (24px)** for section separation, **lg (40px)** for major content blocks, **md (24px)** for card padding and component spacing, and **sm (12px)** for internal element spacing. Hero sections use full-width backgrounds with 64px (xl) top/bottom padding to create breathing room around imagery and CTAs. Card grids are typically 3 columns on desktop, 2 on tablet, 1 on mobile, with 24px gaps. The container-max-width of 1280px ensures content never feels stretched; narrower viewports (< 768px) shift to single-column layouts with 12px horizontal gutters. White-space is generous—never cramped—to reflect the creative, unhurried nature

Elevation & Depth

Depth is conveyed through **Subtle Layering**—a restrained shadow system that avoids heavy drop-shadows. The elevation scale uses three levels: **sm (0 1px 4px rgba(0, 0, 0, 0.06))** for cards and subtle containers, **md (0 4px 12px rgba(0, 0, 0, 0.08))** for hovered cards and modals, and **lg (0 16px 40px rgba(0, 0, 0, 0.12))** for floating elements and overlays. Buttons use sm elevation by default and transition to md on hover with a 0.4s ease timing. Cards use sm elevation and lift to md on hover or focus. No element should use a shadow darker than rgba(0, 0, 0, 0.15) to maintain the warm,

Shapes

The shape philosophy is **Soft-Technical**—rounded corners that feel modern and approachable without sacrificing clarity. **Buttons and interactive elements** use **lg (1rem / 16px)** border-radius for a friendly, inviting appearance. **Cards and containers** use **xl (1.5rem / 24px)** for a more generous, breathing feel. **Input fields and form elements** use **DEFAULT (0.5rem / 8px)** for a compact, functional look. **Badges and pills** use **full (9999px)** for maximum roundness, signaling completion or status. The rationale: larger radii (xl, full) on passive containers create visual softn

Components

Action Elements **Button-Primary** is the hero CTA for all creator-focused actions: 'Get Started,' 'Publish Now,' 'Earn Money.' Use backgroundColor {colors.primary} (#f6b606), textColor {colors.on-primary} (#272443), padding 12px 24px, height 48px, rounded lg (1rem), and elevation sm (0 1px 4px rgba(0, 0, 0, 0.06)). On hover, transition to backgroundColor {colors.primary-fixed-dim} (#f6b606) with elevation md (0 4px 12px rgba(0, 0, 0, 0.08)) over 0.4s ease. Disabled state: backgroundColor {colors.surface-container-high} (#e8e6e6), textColor {colors.on-surface-variant} (#757575) at 50% opacity, no shadow, cursor not-allowed.

**Button-Secondary** is used for supporting actions like 'Learn More' or 'Contact.' Use transparent backgroundColor, textColor {colors.secondary} (#2b5672), border

Do's and Don'ts

**Do**

• Do use {colors.primary} (#f6b606) exclusively on primary CTAs and active states—never on passive text or backgrounds.
• Do apply 24px (md) spacing between major content sections and 12px (sm) between related elements within a section.
• Do use Avenir for all headlines (h1–h3) at weights 600–700 with -0.02em to -0.04em letter-spacing for visual impact.
• Do maintain a minimum 44px touch target height on all interactive elements (buttons, links, form inputs).
• Do transition hover states over 0.4s ease with elevation changes (sm → md) rather than color-only changes.
• Do use the full rounded scale: lg (1rem) for buttons, xl (1.5rem) for cards, full (9999px) for badges and pills.

**Don't**

• Don't use primary color (#f6b606) on body text, backgrounds, or non-interactive elements—it's reserved for CTAs and active states.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use blur effects; rely on offset and opacity for depth.
• Don't mix Avenir and Arial within a single headline; use Avenir for all h1–h3, Arial for body and labels.
• Don't create buttons smaller than 48px height or with padding less than 12px 24px; this breaks accessibility and usability.
• Don't use sharp corners (0px border-radius) except for specific geometric accents; default to lg or xl for all containers.
• Don't apply more than one shadow level to a single element; use sm for base, md for hover, lg for overlays only.