Tips App Guide - Canvas Design System

App Identity

Phase

Learn

Primary Color

#F87171

Font Stack

Fraunces + Inter (shared)

Design Philosophy

Tips is a learning library. The design prioritizes browsability, categorization, and comfortable reading -- like flipping through a well-organized notebook.

auto_stories

Browse-first discovery

Category tabs sit above a card grid. Users browse by category or search by keyword. The interface encourages exploration -- no login walls, no onboarding.

palette

Warm coral accent

Coral red (#F87171) is lighter and more approachable than the main site's brand red. It creates an inviting, low-pressure learning environment. Active states use this coral, not the aggressive #E54D4D.

border_left

Color-coded left borders

Each tip card has a 4px left border matching its category color. Six category tints span from dark (#991B1B) to light (#FCA5A5) within the coral family.

format_quote

Warm background texture

Uses --bg-warm (#FFFBF8) as the page background with white card surfaces. This subtle warmth distinguishes Tips from the cooler tool apps.

Color Tokens

Coral red palette for the Learn phase. Lighter and warmer than the main site red.

Core Palette

Primary

--tips-primary

#F87171

Dark

--tips-dark

#EF4444

Light

--tips-light

#FECACA

Very Light

--tips-very-light

#FEE2E2

Category Tints (6 Coral Levels)

Fundamentals

#991B1B

Engagement

#B91C1C

Facilitation

#DC2626

Difficult Moments

#EF4444

Activities

#F87171

Reflection

#FCA5A5

/* Tips app tokens */
--tips-primary: #F87171;
--tips-dark: #EF4444;
--tips-light: #FECACA;
--tips-very-light: #FEE2E2;
--tips-gradient: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
--tips-shadow: 0 4px 14px rgba(248, 113, 113, 0.25);

/* Category tints (6 coral levels) */
--tips-cat-1: #991B1B;  /* Fundamentals */
--tips-cat-2: #B91C1C;  /* Engagement */
--tips-cat-3: #DC2626;  /* Facilitation */
--tips-cat-4: #EF4444;  /* Difficult Moments */
--tips-cat-5: #F87171;  /* Activities */
--tips-cat-6: #FCA5A5;  /* Reflection */

Layout Patterns

Simple, content-focused layout embedded within the main site shell.

Page Structure

┌────────────────────────────────────────────────┐
│  Unified Header (main site nav)                │
├────────────────────────────────────────────────┤
│                                                │
│  ┌──────────────────────────────────────────┐  │
│  │  Back button  |  Page Title  |  Search   │  │
│  └──────────────────────────────────────────┘  │
│                                                │
│  ┌──────────────────────────────────────────┐  │
│  │  Category Tabs (pill-style, scrollable)  │  │
│  └──────────────────────────────────────────┘  │
│                                                │
│  ┌──────┐ ┌──────┐ ┌──────┐                   │
│  │ Tip  │ │ Tip  │ │ Tip  │                   │
│  │ Card │ │ Card │ │ Card │  ...              │
│  │      │ │      │ │      │                   │
│  └──────┘ └──────┘ └──────┘                   │
│                                                │
│  Grid: repeat(auto-fill, minmax(350px, 1fr))   │
│  Max container: 1200px                         │
│                                                │
└────────────────────────────────────────────────┘

Element	Spec
Container max-width	`1200px`
Container padding	`2rem 1.5rem`
Card grid gap	`1.25rem`
Card min-width in grid	`350px`
Page background	`--bg-warm (#FFFBF8)`
Card background	`white`

Key Components

Tip Card

Tips-specific

White card with 4px category-colored left border, 12px radius, hover lift effect. Contains tip icon, title, category badge, and preview text. Click opens the full tip in a modal.

.tip-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(26, 39, 68, 0.06);
    border-left: 4px solid; /* category color */
    cursor: pointer;
    transition: all 0.2s ease;
}
.tip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(26, 39, 68, 0.1);
}

Category Tabs

Tips-specific

Pill-style horizontal tab strip with icon, label, and count badge. Scrollable on mobile. Active tab gets a coral border and tinted background.

star Fundamentals 12

emoji_people Engagement 8

groups Facilitation 10

Search Bar

Shared pattern

White pill-style search input with icon. Filters tips by keyword across title and content. Positioned in the page header alongside the back button and title.

Tip Detail Modal

Tips-specific

Full tip content displayed in a modal or expanded view. Shows title, full text, category, related tips, and "Try this" action prompts. Uses the shared ws_modal_start() component.

Do / Don't

Do: Use the warm coral, not brand red

#F87171 for Tips, #E54D4D for main site. The lighter coral creates a more approachable reading environment.

Don't: Use the main site brand red

#E54D4D is too aggressive for a learning library. Save it for CTAs and the main site.

Do: Keep the card grid responsive

Auto-fill grid with 350px min. Cards reflow naturally from 3 columns to 1.

Don't: Use fixed column counts

Fixed grids break on tablet. Let the grid adapt to available space.

Do: Include category color on every card

The 4px left border is the primary visual categorization. Never omit it.

Don't: Color the entire card background

Full-color backgrounds reduce readability. The left border provides enough category signal.

Shared Components Used

Component	Usage	Customization
`ws_modal_start()`	Tip detail view	Category-colored header accent
`ws_badge()`	Category labels on cards	Coral variant with category tint
`ws_input()`	Search bar	Pill-style with search icon
`ws_empty_state()`	No search results, empty category	Coral icon color
`ws_skeleton()`	Loading state for tip cards	Card variant with left border placeholder

Font Migration Plan

warning Planned for v1.7: Tips currently uses Bitter (display) + DM Sans (body). These should migrate to the platform fonts Fraunces (headings) + Inter (body) for cross-app consistency.

Migration Steps

Step	Action	Notes
1	Update `tips/css/tips.css` font imports	Replace Bitter/DM Sans Google Fonts imports with Fraunces/Inter
2	Update `--font-display` and `--font-body` overrides	Change to `var(--font-heading)` and `var(--font-body)` from platform-tokens
3	Adjust font-weight values	Bitter 600 ≈ Fraunces 500; DM Sans 500 ≈ Inter 500
4	Visual QA	Check line heights, letter-spacing, and truncation across all tip card layouts