Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1413cab7e94545b617b7ec13d44cf37ba0087aa6
Krow-workspace/.claude/skills/krow-paper-design/SKILL.md

16 KiB
Raw Blame History

name, description
name description
krow-paper-design KROW Paper design file conventions covering design tokens, component patterns, screen structure, and naming rules. Use this when creating or updating screens in the Paper design tool, auditing designs for token compliance, building new flows, or restructuring existing frames. Ensures visual consistency across all Paper design files for the KROW staff and client apps.

KROW Paper Design Conventions

This skill defines the design token system, component patterns, screen structure conventions, and workflow rules established for the KROW Design Revamp Paper file. All design work in Paper must follow these conventions.

When to Use This Skill

  • Creating new screens or flows in Paper
  • Updating existing frames to match the design system
  • Auditing designs for token compliance
  • Adding components (buttons, chips, inputs, badges, cards)
  • Structuring shift detail pages, onboarding flows, or list screens
  • Setting up navigation patterns (back buttons, bottom nav, CTAs)
  • Reviewing Paper designs before handoff to development

1. Design Tokens

Color Palette

Token Hex Usage
Primary #0A39DF CTAs, active states, links, selected chips, nav active icons, pay rates
Foreground #121826 Headings, primary text, dark UI elements
Text Secondary #6A7382 Labels, captions, inactive nav, section headers, placeholder text, back chevrons
Secondary BG #F1F3F5 Subtle backgrounds, dividers, map placeholders
Border #D1D5DB Card borders, unselected chip borders, outline button borders
Input Border #E2E8F0 Text input borders (lighter than general border)
Destructive #F04444 Error states, destructive actions (e.g., Request Swap)
Background #FAFBFC Page/artboard background
Card BG #FFFFFF Card surfaces, input backgrounds
Success #059669 Active status dot, checkmark icons, requirement met
Warning Amber #D97706 Urgent/Pending badge text

Semantic Badge Colors

Badge Background Text Color
Active #ECFDF5 #059669
Confirmed #EBF0FF #0A39DF
Pending #FEF9EE #D97706
Urgent #FEF9EE #D97706
One-Time #ECFDF5 #059669
Recurring #EBF0FF #0A39DF (use #EFF6FF bg on detail pages)

Typography

Style Font Size Weight Line Height Usage
Display Inter Tight 28px 700 34px Page titles (Find Shifts, My Shifts)
H1 Inter Tight 24px 700 30px Detail page titles (venue names)
H2 Inter Tight 20px 700 26px Section headings
H3 Inter Tight 18px 700 22px Card titles, schedule values
Body Large Manrope 16px 600 20px Button text, CTA labels
Body Default Manrope 14px 400-500 18px Body text, descriptions
Body Small Manrope 13px 400-500 16px Card metadata, time/pay info
Caption Manrope 12px 500-600 16px Small chip text, tab labels
Section Label Manrope 11px 700 14px Uppercase section headers (letter-spacing: 0.06em)
Badge Text Manrope 11px 600-700 14px Status badge labels (letter-spacing: 0.04em)
Nav Label Manrope 10px 600 12px Bottom nav labels

Spacing

Token Value Usage
Page padding 24px Horizontal padding from screen edge
Section gap 16-24px Between major content sections
Group gap 8-12px Within a section (e.g., label to input)
Element gap 4px Tight spacing (e.g., subtitle under title)
Bottom safe area 40px Padding below last element / CTA

Border Radii

Token Value Usage
sm 8px Small chips, badges, status pills, map placeholder
md 12px Cards, inputs, location cards, contact cards, search fields
lg 14px Buttons, CTA containers, shift cards (Find Shifts)
xl 24px Not commonly used
pill 999px Progress bar segments only

2. Component Patterns

Buttons

Primary CTA:

  • Background: #0A39DF, radius: 14px, height: 52px
  • Text: Manrope 16px/600, color: #FFFFFF
  • Padding: 16px vertical, 16px horizontal

Secondary/Outline Button:

  • Background: #FFFFFF, border: 1.5px #D1D5DB, radius: 14px, height: 52px
  • Text: Manrope 16px/600, color: #121826

Destructive Outline Button:

  • Background: #FFFFFF, border: 1.5px #F04444, radius: 14px
  • Text: Manrope 14px/600, color: #F04444

Back Icon Button (Bottom CTA):

  • 52x52px square, border: 1.5px #D1D5DB, radius: 14px, background: #FFFFFF
  • Contains chevron-left SVG (20x20, viewBox 0 0 24 24, stroke #121826, strokeWidth 2)
  • Path: M15 18L9 12L15 6

Chips

Default (Large) - for role/skill selection:

  • Selected: bg #EFF6FF, border 1.5px #0A39DF, radius 10px, padding 12px/16px
    • Checkmark icon (14x14, stroke #0A39DF), text Manrope 14px/600 #0A39DF
  • Unselected: bg #FFFFFF, border 1.5px #6A7382, radius 10px, padding 12px/16px
    • Text Manrope 14px/500 #6A7382

Small - for tabs, filters:

  • Selected: bg #EFF6FF, border 1.5px #0A39DF, radius 8px, padding 6px/12px
    • Checkmark icon (12x12), text Manrope 12px/600 #0A39DF
  • Unselected: bg #FFFFFF, border 1.5px #D1D5DB, radius 8px, padding 6px/12px
    • Text Manrope 12px/500 #6A7382
  • Active (filled): bg #0A39DF, radius 8px, padding 6px/12px
    • Text Manrope 12px/600 #FFFFFF
  • Dark (filters button): bg #121826, radius 8px, padding 6px/12px
    • Text Manrope 12px/600 #FFFFFF, with leading icon

Status Badges:

  • Radius: 8px, padding: 4px/8px
  • Text: Manrope 11px/600-700, uppercase, letter-spacing 0.04em
  • Colors follow semantic badge table above

Text Inputs

  • Border: 1.5px #E2E8F0, radius: 12px, padding: 12px/14px
  • Background: #FFFFFF
  • Placeholder: Manrope 14px/400, color #6A7382
  • Filled: Manrope 14px/500, color #121826
  • Label above: Manrope 14px/500, color #121826
  • Focused: border color #0A39DF, border-width 2px
  • Error: border color #F04444, helper text #F04444

Cards (Shift List Items)

  • Background: #FFFFFF, border: 1px #D1D5DB, radius: 12-14px
  • Padding: 16px
  • Content: venue name (Manrope 15px/600 #121826), subtitle (Manrope 13px/400 #6A7382)
  • Metadata row: icon (14px, #6A7382) + text (Manrope 13px/500 #6A7382)
  • Pay rate: Inter Tight 18px/700 #0A39DF

Schedule/Pay Info Cards

  • Two-column layout with 12px gap
  • Background: #FFFFFF, border: 1px #D1D5DB, radius: 12px, padding: 16px
  • Label: Manrope 11px/500-700 uppercase #6A7382 (letter-spacing 0.05em)
  • Value: Inter Tight 18px/700 #121826 (schedule) or #121826 (pay)
  • Sub-text: Manrope 13px/400 #6A7382

Contact/Info Rows

  • Container: radius 12px, border 1px #D1D5DB, background #FFFFFF, overflow clip
  • Row: padding 13px/16px, gap 10px, border-bottom 1px #F1F3F5 (except last)
  • Icon: 16px, stroke #6A7382
  • Label: Manrope 13px/500 #6A7382, width 72px fixed
  • Value: Manrope 13px/500 #121826 (or #0A39DF for phone/links)

Section Headers

  • Text: Manrope 11px/700, uppercase, letter-spacing 0.06em, color #6A7382
  • Gap to content below: 10px

3. Screen Structure

Artboard Setup

  • Width: 390px (iPhone standard)
  • Height: 844px (default), or fit-content for scrollable detail pages
  • Background: #FAFBFC
  • Flex column layout, overflow: clip

Frame Naming Convention

<app>-<section>-<screen_number>-<screen_name>

Examples:

  • staff-1-1-splash
  • staff-2-3-personal-information
  • staff-4-1-my-shifts
  • staff-5-2-shift-details
  • shift-5-3-confirmation

Section headers use: <number> - <Section Name> (e.g., 4 - My Shifts)

Status Bar

  • Height: 44px, full width (390px)
  • Left: "9:41" text (system font)
  • Right: Signal, WiFi, Battery SVG icons (68px wide)

Header Back Button

  • Placed below status bar in a combined "Status Bar + Back" frame (390x72px)
  • Chevron SVG: 20x20, viewBox 0 0 24 24, stroke #6A7382, strokeWidth 2
  • Path: M15 18L9 12L15 6
  • Back button frame: 390x28px, padding-left: 24px

Progress Bar (Onboarding)

  • Container: 342px wide (24px margins), 3px height segments
  • Segments: pill radius (999px), gap between
  • Filled: #0A39DF, Unfilled: #F1F3F5

Bottom CTA Convention

  • Pinned to bottom using marginTop: auto on the CTA container
  • Layout: flex row, gap 12px, padding 0 24px
  • Back button: 52x52px icon-only button with chevron-left (stroke #121826)
  • Primary CTA: flex 1, height 52px, radius 14px, bg #0A39DF
  • Bottom safe padding: 40px (on artboard paddingBottom)

Bottom Navigation Bar

  • Full width, padding: 10px top, 28px bottom
  • Border-top: 1px #F1F3F5, background: #FFFFFF
  • 5 items: Home, Shifts, Find, Payments, Profile
  • Active: icon stroke #0A39DF, label Manrope 10px/600 #0A39DF
  • Inactive: icon stroke #6A7382, label Manrope 10px/600 #6A7382
  • Active icon may have light fill (e.g., #EBF0FF on calendar/search)

4. Screen Templates

List Screen (My Shifts, Find Shifts)

Artboard (390x844, bg #FAFBFC)
  Status Bar (390x44)
  Header Section
    Page Title (Display: Inter Tight 28px/700)
    Tab/Filter Chips (Small chip variant)
  Content
    Date Header (Section label style, uppercase)
    Shift Cards (12px radius, 1px border #D1D5DB)
  Bottom Nav Bar

Detail Screen (Shift Details)

Artboard (390x fit-content, bg #FAFBFC)
  Status Bar (390x44)
  Header Bar (Back chevron + "Shift Details" title + share icon)
  Badges Row (status chips)
  Role Title (H1) + Venue (with avatar)
  Schedule/Pay Cards (two-column)
  Job Description (section label + body text)
  Location (card with map + address)
  Requirements (section label + checkmark list)
  Shift Contact (section label + contact card with rows)
  [Optional] Note from Manager (warm bg card)
  Bottom CTA (pinned)

Onboarding Screen

Artboard (390x844, bg #FAFBFC, justify: flex-start, paddingBottom: 40px)
  Status Bar + Back (390x72)
  Progress Bar (342px, 3px segments)
  Step Counter ("Step X of Y" - Body Small)
  Page Title (H1: Inter Tight 24px/700)
  [Optional] Subtitle (Body Default)
  Form Content (inputs, chips, sliders)
  Bottom CTA (marginTop: auto - back icon + Continue)

Confirmation Screen

Artboard (390x844, bg #FAFBFC)
  Status Bar
  Centered Content
    Success Icon (green circle + checkmark)
    Title (Display: Inter Tight 26px/700, centered)
    Subtitle (Body Default, centered, #6A7382)
    Details Card (border #D1D5DB, rows with label/value pairs)
  Bottom CTAs (primary + outline)

5. Workflow Rules

Write Incrementally

Each write_html call should produce ONE visual group:

  • A header, a card, a single list row, a button bar, a section
  • Never batch an entire screen in one call

Review Checkpoints

After every 2-3 modifications, take a screenshot and evaluate:

  • Spacing: Uneven gaps, cramped groups
  • Typography: Hierarchy, readability, correct font/weight
  • Contrast: Text legibility, element distinction
  • Alignment: Vertical lanes, horizontal alignment
  • Clipping: Content cut off at edges
  • Token compliance: All values match design system tokens

Color Audit Process

When updating frames to match the design system:

  1. Get computed styles for all text, background, border elements
  2. Map old colors to design system tokens:
    • Dark navy (#0F4C81, #1A3A5C) -> Primary #0A39DF
    • Near-black (#111827, #0F172A) -> Foreground #121826
    • Gray variants (#94A3B8, #64748B, #475569) -> Text Secondary #6A7382
    • Green accents (#20B486) -> Primary #0A39DF (for pay) or #059669 (for status)
  3. Batch update using update_styles with multiple nodeIds per style change
  4. Verify with screenshots

Structural Consistency

When creating matching screens (e.g., two shift detail views):

  • Use identical section ordering
  • Match section header styles (11px/700 uppercase #6A7382)
  • Use same card/row component patterns
  • Maintain consistent padding and gap values

6. SVG Icon Patterns

Chevron Left (Back)

<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
  <path d="M15 18L9 12L15 6" stroke="#6A7382" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Map Pin

<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke="#6A7382" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <circle cx="12" cy="10" r="3" stroke="#6A7382" stroke-width="2"/>
</svg>

User (Supervisor)

<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="#6A7382" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <circle cx="12" cy="7" r="4" stroke="#6A7382" stroke-width="2"/>
</svg>

Phone

<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" stroke="#6A7382" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Checkmark (Requirement Met)

<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M22 4L12 14.01l-3-3" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Chip Checkmark

<!-- Large chip (14x14) -->
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
  <path d="M2.5 7L5.5 10L11.5 4" stroke="#0A39DF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

<!-- Small chip (12x12) -->
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
  <path d="M2.5 7L5.5 10L11.5 4" stroke="#0A39DF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

7. Anti-Patterns

Colors

  • Never use #0F4C81, #1A3A5C (old navy) - use #0A39DF (Primary)
  • Never use #111827, #0F172A - use #121826 (Foreground)
  • Never use #94A3B8, #64748B, #475569 - use #6A7382 (Text Secondary)
  • Never use #20B486 for pay rates - use #0A39DF (Primary)
  • Never use #E2E8F0 for card borders - use #D1D5DB (Border)

Components

  • Never use pill radius (999px) for chips or badges - use 8px or 10px
  • Never use gradient backgrounds on buttons
  • Never mix font families within a role (headings = Inter Tight, body = Manrope)
  • Never place back buttons at the bottom of frames - always after status bar
  • Never hardcode CTA position - use marginTop: auto for bottom pinning

Structure

  • Never batch an entire screen in one write_html call
  • Never skip review checkpoints after 2-3 modifications
  • Never create frames without following the naming convention
  • Never use justifyContent: space-between on artboards with many direct children - use marginTop: auto on the CTA instead

Summary

The design file is the source of truth for visual direction. Every element must use the established tokens:

  1. Colors: 7 core tokens + semantic badge colors
  2. Typography: Inter Tight (headings) + Manrope (body), defined scale
  3. Spacing: 24px page padding, 16-24px section gaps, 40px bottom safe area
  4. Radii: 8px (chips/badges), 12px (cards/inputs), 14px (buttons/CTAs)
  5. Components: Buttons, chips (large/small), inputs, cards, badges, nav bars
  6. Structure: Status bar > Back > Content > Bottom CTA (pinned)
  7. Naming: <app>-<section>-<number>-<name>

When in doubt, screenshot an existing screen and match its patterns exactly.

Reference in New Issue View Git Blame Copy Permalink