Tips App Guide - Canvas Design System

App Identity

Phase

Learn

Primary Color

#E54D4D

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

Learn Red accent

Tips renders the unified Learn Red family: var(--phase-learn) / #E54D4D for active states, #C73E3E for text on light grounds. The former Facilitate-purple treatment was retired by Red Unification (D1, July 2026) -- never reintroduce #7C4DFF.

border_left

Color-coded left borders

Each tip card has a 4px left border matching its category color. Category tints should come from the red family (see Color Tokens below -- four legacy purple tints still ship in css/tips/styles.css and are flagged for migration).

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

The Learn Red family (Red Unification, D1). Active states, tab accents, and card borders all draw from these tokens -- never the retired #7C4DFF purple.

Core Palette

Primary

--tips-primary

#E54D4D

Dark

--tips-dark

#C73E3E

Light

--tips-light

#FEE2E2

Very Light

--tips-very-light

#FEF2F2

Category Tints (6 Red Levels)

Fundamentals

#7F1D1D

Engagement

#991B1B

Facilitation

#C73E3E

Difficult Moments

#E54D4D

Activities

#F87171

Reflection

#FCA5A5

Note: css/tips/styles.css still ships the legacy purple --cat-* tints for four categories -- migrate those to the values above.

/* Tips app tokens */
--tips-primary: #E54D4D;
--tips-dark: #C73E3E;
--tips-light: #FEE2E2;
--tips-very-light: #FEF2F2;
--tips-gradient: linear-gradient(135deg, #E54D4D 0%, #C73E3E 100%);
--tips-shadow: 0 4px 14px rgba(229, 77, 77, 0.25);

/* Category tints (6 red levels) */
--tips-cat-1: #7F1D1D;  /* Fundamentals */
--tips-cat-2: #991B1B;  /* Engagement */
--tips-cat-3: #C73E3E;  /* Facilitation */
--tips-cat-4: #E54D4D;  /* 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 red 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 Learn Red family via tokens

var(--phase-learn) / #E54D4D for active states, #C73E3E for text on light grounds. Style from the tokens so a palette change reaches Tips automatically.

Don't: Reintroduce the retired Facilitate purple

#7C4DFF was retired platform-wide by Red Unification (D1, July 2026). Tips is not an exception -- it renders the same red as every other app.

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	Purple variant with category tint
`ws_input()`	Search bar	Pill-style with search icon
`ws_empty_state()`	No search results, empty category	Purple icon color
`ws_skeleton()`	Loading state for tip cards	Card variant with left border placeholder

Font Migration Complete

check_circle Shipped v1.7: Tips now uses the platform fonts Fraunces (display) + Inter (body), replacing the former Bitter + DM Sans stack. Font variables live in css/tips/styles.css.