Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add mobile design reference to UI/UX guidelines and update .gitignore for paper designer files

Browse Source
This commit is contained in:
Achintha Isuru
2026-03-11 14:25:35 -04:00
parent e0f7c161a9
commit 29dc9342e9
3 changed files with 166 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.claude/agents/ui-ux-design.md
View File

@@ -37,6 +37,7 @@ Before any design work, ensure you have loaded:
- `krow-mobile-design-system` — Colors, typography, icons, spacing, component patterns
- `frontend-design`
- `ui-ux-pro-max`
- `mobile-design`
Load additional skills as needed for specific design challenges.

232
.claude/skills/krow-paper-design/SKILL.md
View File

@@ -21,19 +21,42 @@ This skill defines the design token system, component patterns, screen structure
### Color Palette
**Primary:**
| 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 |
| Foreground | `#121826` | Headings, primary text, dark UI elements |
| Primary | `#0A39DF` | CTAs, active states, links, selected chips, nav active icons, pay rates |
| Primary Fg | `#F7FAFC` | Light foreground on primary surfaces |
**Semantic:**
| Token | Hex | Usage |
|-------|-----|-------|
| Secondary | `#F1F3F5` | Subtle backgrounds, dividers, secondary button bg |
| Accent | `#F9E547` | Highlight, warning chip accents |
| Text Secondary | `#6A7382` | Labels, captions, inactive nav, section headers, back chevrons |
| Destructive | `#F04444` | Error states, destructive actions |
**Border & Input:**
| Token | Hex | Usage |
|-------|-----|-------|
| Border | `#D1D5DB` | Card borders, unselected chip borders, outline button borders |
| Input | `#F5F6F8` | Text input background (read-only/disabled states) |
**Status:**
| Token | Hex | Usage |
|-------|-----|-------|
| Success | `#10B981` | Accept buttons, active status, checkmarks |
| Info | `#0A39DF` | Informational badges (same as Primary) |
| Warning | `#D97706` | Urgent/Pending badge text |
| Neutral | `#94A3B8` | Disabled text, placeholder text |
| Danger | `#F04444` | Error badges, destructive (same as Destructive) |
**Gradients:**
| Token | Definition | Usage |
|-------|-----------|-------|
| mobileHero | Foreground → Primary → Primary Fg | Hero sections, splash screens |
| adminHero | Primary → Success | Admin/dashboard hero cards |
### Semantic Badge Colors
@@ -44,74 +67,121 @@ This skill defines the design token system, component patterns, screen structure
| Pending | `#FEF9EE` | `#D97706` |
| Urgent | `#FEF9EE` | `#D97706` |
| One-Time | `#ECFDF5` | `#059669` |
| Recurring | `#EBF0FF` | `#0A39DF` (use `#EFF6FF` bg on detail pages) |
| Recurring | `#EFF6FF` | `#0A39DF` |
### 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 |
**Inter Tight — Headings:**
| Style | Size | Weight | Letter Spacing | Line Height | Usage |
|-------|------|--------|---------------|-------------|-------|
| Display | 28px | 700 | -0.02em | 34px | Page titles (Find Shifts, My Shifts) |
| Heading 1 | 24px | 700 | -0.02em | 30px | Detail page titles (venue names) |
| Heading 2 | 20px | 700 | -0.01em | 26px | Section headings |
| Heading 3 | 18px | 700 | -0.01em | 22px | Card titles, schedule values |
| Heading 4 | 16px | 700 | — | 20px | Card titles (standard cards), sub-headings |
### Spacing
**Manrope — Body:**
| Style | Size | Weight | Line Height | Usage |
|-------|------|--------|-------------|-------|
| Body Large Regular | 16px | 400 | 20px | Long body text |
| Body Large Medium | 16px | 500 | 20px | Emphasized body text |
| Body Large Semibold | 16px | 600 | 20px | Strong labels, Full Width CTA text (15px) |
| Body Default | 14px | 400 | 18px | Body text, descriptions |
| Body Default Semibold | 14px | 600 | 18px | Button text, chip text, bold body |
| Caption | 12px | 400 | 16px | Small text, helper text, input labels |
| Overline Label | 11px | 600 | 14px | Uppercase section headers (letter-spacing: 0.06em) |
| Badge Text | 11px | 600-700 | 14px | Status badge labels (letter-spacing: 0.04em) |
| Nav Label | 10px | 600 | 12px | Bottom nav labels |
### Spacing Scale
| 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 |
| xs | 4px | Tight spacing (subtitle under title) |
| sm | 8px | Element gap within groups |
| md | 12px | Group gap (label to input) |
| lg | 16px | Card padding, medium section gap |
| xl | 24px | Page margins, section gap |
| 2xl | 32px | Large section separation |
**Page Layout:**
| Token | Value |
|-------|-------|
| Page margins | 24px |
| Section gap | 24px |
| Card padding | 16px |
| Element gap | 8-12px |
| Background | `#FAFBFC` |
| Bottom safe area | 40px |
### 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 |
| sm | 8px | Small chips, badges, status pills |
| md | 12px | Cards, inputs, list row containers, data rows |
| lg | 18px | Hero cards, gradient cards |
| xl | 24px | Large containers |
| pill | 999px | Progress bar segments only |
### Icon Sizes
Standard sizes: 16, 20, 24, 32dp
## 2. Component Patterns
### Buttons
**Primary CTA:**
- Background: `#0A39DF`, radius: 14px, height: 52px
- Text: Manrope 16px/600, color: `#FFFFFF`
- Padding: 16px vertical, 16px horizontal
All buttons: radius 14px, padding 12px/24px, text Manrope 14px/600
**Secondary/Outline Button:**
- Background: `#FFFFFF`, border: 1.5px `#D1D5DB`, radius: 14px, height: 52px
- Text: Manrope 16px/600, color: `#121826`
**Primary:**
- Background: `#0A39DF`, text: `#FFFFFF`
**Destructive Outline Button:**
- Background: `#FFFFFF`, border: 1.5px `#F04444`, radius: 14px
- Text: Manrope 14px/600, color: `#F04444`
**Secondary:**
- Background: `#F1F3F5`, border: 1.5px `#D1D5DB`, text: `#121826`
**Destructive:**
- Background: `#F04444`, text: `#FFFFFF`
**Disabled:**
- Background: `#F1F3F5`, no border, text: `#94A3B8`
**Accept:**
- Background: `#10B981`, text: `#FFFFFF`
**Dark:**
- Background: `#121826`, text: `#FFFFFF`
**Full Width CTA:**
- Same as Primary but `width: 100%`, padding 14px/24px, text Manrope 15px/600
**Back Icon Button (Bottom CTA):**
- 52x52px square, border: 1.5px `#D1D5DB`, radius: 14px, background: `#FFFFFF`
- 52x52px square, border: 0.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
All chips: border 1.5px, text Manrope 14px/600, gap 8px for icon+text
**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
- Selected: bg `#EFF6FF`, border `#0A39DF`, radius 10px, padding 12px/16px
- Checkmark icon (14x14, stroke `#0A39DF`), text `#0A39DF`
- Unselected: bg `#FFFFFF`, border `#6A7382`, radius 10px, padding 12px/16px
- Text Manrope 14px/500 `#6A7382`
**Warning Chips:**
- Selected: bg `#F9E5471A`, border `#E6A817`, radius 10px, padding 12px/16px
- Checkmark icon (stroke `#92700C`), text `#92700C`
- Unselected: bg `#FFFFFF`, border `#F0D78C`, radius 10px, padding 12px/16px
- Text `#92700C`
**Error Chips:**
- Selected: bg `#FEF2F2`, border `#F04444`, radius 10px, padding 12px/16px
- Checkmark icon (stroke `#B91C1C`), text `#B91C1C`
- Unselected: bg `#FFFFFF`, border `#FECACA`, radius 10px, padding 12px/16px
- Text `#B91C1C`
**Small - for tabs, filters:**
- Selected: bg `#EFF6FF`, border 1.5px `#0A39DF`, radius 8px, padding 6px/12px
- Checkmark icon (12x12), text Manrope 12px/600 `#0A39DF`
@@ -119,8 +189,6 @@ This skill defines the design token system, component patterns, screen structure
- 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
@@ -131,39 +199,65 @@ This skill defines the design token system, component patterns, screen structure
- 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`
- Placeholder: Manrope 14px/400, color `#94A3B8`
- Filled: Manrope 14px/400, color `#111827`
- Label above: Manrope 12px/500:
- Default/filled: color `#94A3B8`
- Filled with value: color `#6A7382`
- Focused: color `#0A39DF`
- Error: color `#F04444`
- Disabled: color `#94A3B8`
- Focused: border color `#0A39DF`, border-width 2px
- Error: border color `#F04444`, helper text `#F04444`
- Error: border color `#F04444`, border-width 2px, background `#FEF2F2`
- Error helper text: Manrope 12px/400, color `#F04444`
### Cards (Shift List Items)
### Border Width
- 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`
- **Standard border width: `0.5px`** — All card borders, dividers, and outline buttons use `0.5px` unless explicitly stated otherwise.
- **Text inputs: `1.5px`** — To ensure visibility and distinction from card borders.
- **Chips: `1.5px`** — All chip variants (default, warning, error, small).
- **Secondary buttons: `1.5px`** — Outline/secondary button borders.
### Schedule/Pay Info Cards
### 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`
**Standard Card:**
- Background: `#FFFFFF`, border: 0.5px `#D1D5DB`, radius: 12px, padding: 16px
- Title: Inter Tight 16px/700 `#121826`
- Body: Manrope 14px/400 `#6A7382`
- Gap: 8px between title and body
**Hero / Gradient Card:**
- Radius: 18px, padding: 20px, gap: 6px
- Background: gradient (mobileHero or adminHero)
- Label: Manrope 12px/400 `#FFFFFFB3` (white 70%)
- Value: Inter Tight 28px/700 `#FFFFFF`
- Sub-text: Manrope 12px/400 `#FFFFFF99` (white 60%)
**List Rows (grouped):**
- Container: radius 12px, border 0.5px `#D1D5DB`, background `#FFFFFF`, overflow clip
- Row: padding ~16px, gap between text elements 2px
- Row title: Manrope 14px/600 `#121826`
- Row subtitle: Manrope 13px/400 `#6A7382`
- Row divider: 1px `#D1D5DB` (between rows, not on last)
- Chevron: `›` or SVG, `#6A7382`
**Data Row:**
- Background: `#F1F3F5`, radius: 12px, padding: 12px
- Label: Manrope 11px/400 `#6A7382`
- Value: Inter Tight 20px/700 `#121826`
- Layout: flex row, equal width columns, gap 8px
### 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)
- Container: radius 12px, border 0.5px `#D1D5DB`, background `#FFFFFF`, overflow clip
- Row: padding 13px/16px, gap 10px, border-bottom 0.5px `#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`
- Text: Manrope 11px/600, uppercase, letter-spacing 0.06em, color `#6A7382`
- Gap to content below: 10px
## 3. Screen Structure

2
.gitignore vendored
View File

@@ -194,4 +194,6 @@ apps/mobile/legacy/*
AGENTS.md
TASKS.md
CLAUDE.md
.claude/agents/paper-designer.md
.claude/agent-memory/paper-designer
\n# Android Signing (Secure)\n**.jks\n**key.properties