Instruction file imported from HadassahLevi/TikTax-Platform (
.github/instructions/design_rules_.instructions.md). Copyright stays with the author.
Loading
Tik-Tax Design System ## Professional FinTech UI/UX Guide --- ## 1. Design Philosophy **Core Principles:** - **Trust above all**: Visual stability and consistency - **Radical simplicity**: Obvious, st
Free account. Installing gives you the manifest plus copy-paste snippets.
See reviewsInstruction file imported from HadassahLevi/TikTax-Platform (
.github/instructions/design_rules_.instructions.md). Copyright stays with the author.
Primary Blue: #2563EB (actions, links) Primary Hover: #1D4ED8 Primary Active: #1E40AF Primary Light: #DBEAFE (backgrounds) Deep Navy: #1E3A8A (headers, important text) Professional Teal: #0891B2 (secondary actions) ### Neutrals White: #FFFFFF (cards, primary background) Off-White: #FAFBFC (page background) Light Gray: #F3F4F6 (disabled states) Border Gray: #E5E7EB (dividers) Primary Text: #111827 (near black) Secondary Text: #4B5563 (supporting info) Tertiary Text: #6B7280 (metadata) Disabled Text: #9CA3AF ### Status Colors (Critical) Success: #10B981 | Background: #D1FAE5 | Text: #065F46 Warning: #F59E0B | Background: #FEF3C7 | Text: #92400E Error: #EF4444 | Background: #FEE2E2 | Text: #991B1B Info: #3B82F6 | Background: #DBEAFE | Text: #1E40AF Neutral: #6B7280 | Background: #F3F4F6 | Text: #374151 ### Financial Data Positive (Income): #059669 | Background: #ECFDF5 Negative (Expense): #DC2626 | Background: #FEF2F2 --- ## 3. Typography ### Font Families Primary: 'Inter', -apple-system, sans-serif Alternative: 'Figtree', -apple-system, sans-serif Monospace: 'IBM Plex Mono', monospace (financial data) ### Scale & Hierarchy H1 (Page Title): 32px/40px, weight 600, #111827, -0.02em H2 (Section): 24px/32px, weight 600, #111827, -0.01em H3 (Card Title): 18px/28px, weight 600, #1E3A8A Large Body: 18px/28px, weight 400, #4B5563 Standard Body: 16px/24px, weight 400, #4B5563 Small Body: 14px/20px, weight 400, #6B7280 Form Labels: 14px/20px, weight 500, #374151 Buttons: 15px/20px, weight 500, 0.01em Caption: 13px/18px, weight 400, #6B7280 Small Print: 12px/16px, weight 400, #9CA3AF Currency (Large): 28px/36px, weight 600, monospace Currency (Standard): 18px/28px, weight 600, monospace Reference Numbers: 14px/20px, weight 400, monospace, #6B7280 Weights: Regular 400, Medium 500, Semi-Bold 600, Bold 700 --- ## 4. Layout & Spacing (8-Point Grid) ### Container Widths Max Content: 1200px Main Content: 880px Side Panel: 320px Mobile: 100% with 16px padding ### Breakpoints Mobile: < 640px Tablet: 640px - 1024px Desktop: > 1024px ### Spacing Scale 2px (0.125rem): Minimal (icon padding) 4px (0.25rem): Tight (badge padding) 8px (0.5rem): Compact (inline gaps) 12px (0.75rem): Small (button padding) 16px (1rem): Base (default padding) 24px (1.5rem): Medium (card padding) 32px (2rem): Large (section spacing) 48px (3rem): XL (page dividers) 64px (4rem): Max (hero sections) ### Container Padding Small Card: 16px Standard Card: 24px Large Card: 32px Mobile Page: 16px horizontal Tablet Page: 24px horizontal Desktop Page: 32px horizontal --- ## 5. Core Components ### Buttons css /* Primary */ background: #2563EB; color: #FFF; padding: 12px 24px; border-radius: 8px; font-size: 15px; font-weight: 500; Hover: #1D4ED8 + shadow Active: #1E40AF + translateY(1px) Focus: 2px outline #2563EB, offset 2px Disabled: #E5E7EB background, #9CA3AF text /* Secondary */ background: #FFF; color: #374151; border: 1px solid #D1D5DB; Hover: #F9FAFB background, #9CA3AF border /* Ghost */ background: transparent; color: #2563EB; Hover: #EFF6FF background /* Danger */ background: #EF4444; color: #FFF; Hover: #DC2626 /* Icon Button */ background: transparent; padding: 8px; size: 36px; Hover: #F3F4F6 background ### Status Tags css background: [status-bg]; color: [status-text]; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 500; border: 1px solid [status-border]; display: inline-flex; gap: 6px; align-items: center; /* Include icon for each status */ ### Input Fields css background: #FFF; padding: 12px 16px; border: 1.5px solid #D1D5DB; border-radius: 8px; font-size: 16px; width: 100%; Focus: border #2563EB, shadow 0 0 0 3px rgba(37,99,235,0.1) Error: border #EF4444, shadow 0 0 0 3px rgba(239,68,68,0.1) Success: border #10B981, shadow 0 0 0 3px rgba(16,185,129,0.1) Disabled: background #F9FAFB, color #9CA3AF, border #E5E7EB ### Cards css /* Receipt Card */ background: #FFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08); Hover: shadow 0 4px 8px -2px rgba(0,0,0,0.12), translateY(-2px) Selected: border #2563EB, shadow 0 0 0 3px rgba(37,99,235,0.1) /* Summary Card */ background: #FFF; padding: 24px; border-radius: 12px; border-left: 4px solid #2563EB (optional emphasis) /* Alert Card */ background: [status-light]; border: 1px solid [status-border]; border-left: 4px solid [status-color]; padding: 16px; display: flex; gap: 12px; --- ## 6. Elevation & Shadows css Level 0 (Flat): none Level 1 (Resting): 0 1px 3px 0 rgba(0,0,0,0.08) Level 2 (Hover): 0 4px 8px -2px rgba(0,0,0,0.12) Level 3 (Dropdown): 0 10px 15px -3px rgba(0,0,0,0.15) Level 4 (Modal): 0 20px 25px -5px rgba(0,0,0,0.15), 0 10px 10px -5px rgba(0,0,0,0.08) --- ## 7. Border Radius css Tight: 4px (badges, inline elements) Standard: 8px (inputs, buttons, small cards) Comfortable: 12px (cards, containers) Spacious: 16px (modals, large panels) Full: 9999px (pills, status tags, avatars) --- ## 8. Transitions & Animations css Default: 0.2s ease Fast: 0.15s ease (hover, focus) Slow: 0.3s ease-out (modals, panels) /* Microinteractions */ Button Press: translateY(1px) Card Hover: translateY(-2px) + shadow increase Input Focus: border color + glow Status Change: color transition 0.3s --- ## 9. Iconography ### Style - Type: Outline/line icons (NOT filled) - Stroke: 2px consistent - Style: Rounded caps/joins - Library: Lucide Icons or Heroicons (Outline) ### Sizes 14px: Inline with small text 16px: Body text, form labels 20px: Buttons, navigation 24px: Primary actions, headers 32px: Empty states 48px: Onboarding, hero ### Colors Default: #6B7280 Hover: #374151 Active: #2563EB Disabled: #D1D5DB Success: #10B981 Warning: #F59E0B Error: #EF4444 Info: #3B82F6 ### Essential Icons - Receipt Management: upload, camera, receipt, checkmark, clock, alert-triangle, x-circle - Navigation: search, filter, download, delete, edit, eye, more-options - Financial: currency, calendar, chart, calculator --- ## 10. Accessibility (WCAG 2.1 AA) ### Requirements - Text contrast: minimum 4.5:1 (3:1 for large text) - Touch targets: minimum 44px × 44px - Focus indicators: visible on all interactive elements - Semantic HTML: proper heading hierarchy, landmarks - ARIA labels: for icon-only buttons - Screen reader: status announcements for dynamic changes - Motion: respect prefers-reduced-motion - Resize: text up to 200% without loss of functionality --- ## 11. Responsive Design ### Mobile (< 640px) - Single column layout - Full-width cards with 16px margin - Bottom navigation - Large touch targets (48px height) - Camera button: 72px × 72px, bottom center ### Tablet (640px - 1024px) - Two-column card grids - Visible side navigation - Increased whitespace ### Desktop (> 1024px) - Multi-column dashboards (2-3 columns) - Persistent side navigation - Max content width: 1200px - Hover states prominent --- ## 12. Loading States ### Spinner css width: 20px; height: 20px; border: 2px solid #E5E7EB; border-top-color: #2563EB; border-radius: 50%; animation: spin 0.8s linear infinite; ### Skeleton Screen css background: linear-gradient(90deg, #F3F4F6 0%, #E5E7EB 50%, #F3F4F6 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; ### Progress Bar css width: 100%; height: 8px; background: #E5E7EB; border-radius: 4px; .fill { background: #2563EB; transition: width 0.3s; } --- ## 13. Form Design ### Layout - Single column (recommended) - Field grouping with 32px margin - Last group: no border-bottom ### Field States See Section 5 (Input Fields) ### Helper Text css Standard: 13px, #6B7280, margin-top 6px Error: 13px, #DC2626, with icon Success: 13px, #059669, with icon ### Required Indicator css .required::after { content: "*"; color: #EF4444; margin-left: 4px; } --- ## 14. Financial Data Display ### Currency Formatting Large: 32px, weight 600, monospace, #111827 Standard: 18px, weight 600, monospace, #111827 Rules: - Include symbol: "₪1,234.56" - Comma separators - Two decimal places always - Negative: red (#DC2626) or parentheses - Positive (income): green (#059669) --- ## 15. Mobile-Specific Patterns ### Touch Targets - Minimum: 44px × 44px - Buttons: 48px height - Spacing: minimum 8px between targets ### Bottom Navigation css position: fixed; bottom: 0; height: 64px; background: #FFF; border-top: 1px solid #E5E7EB; box-shadow: 0 -2px 8px rgba(0,0,0,0.08); z-index: 1000; ### Camera UI - Full-screen view - Overlay guide for receipt placement - Flash toggle (top-right) - Gallery button (top-left) - Clear cancel button --- ## 16. Security & Trust Indicators ### SSL Badge css display: flex; gap: 8px; color: #6B7280; font-size: 13px; .icon { color: #10B981; } ### Verification Checkmark - Green checkmark: 20px - Text: "Verified by Tax Authority" - Color: #10B981 ### Digital Signature Badge css background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%); color: #FFF; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; --- ## 17. Content & Messaging ### Voice & Tone - Clear: plain language, avoid jargon - Confident: direct and authoritative - Supportive: guide through complex tasks - Professional: formal but friendly ### Error Messages Structure 1. What went wrong (specific) 2. Why it happened (when helpful) 3. How to fix it (actionable) ### Examples ✅ "Upload your receipt to get started" ❌ "Hey there! Wanna upload something cool?" ✅ "This receipt has been verified by the Tax Authority" ❌ "All good! This one's legit!" --- ## 18. RTL (Right-to-Left) Support Critical for Hebrew/Israeli Users: - Text direction: RTL for Hebrew - Alignment: text, buttons, icons adjusted - Mirroring: arrows, progress indicators reversed --- ## 19. Print Styles css @media print { /* Hide navigation */ nav, .sidebar, .footer, button { display: none !important; } /* Optimize */ body { font-size: 12pt; line-height: 1.5; color: #000; } /* Receipt container */ .receipt { border: 2px solid #000; padding: 20pt; } /* Prevent breaks */ h1, h2, h3, img, table { page-break-inside: avoid; } } --- ## 20. CSS Architecture ### Recommended: Utility-First (Tailwind CSS) - Matches systematic design approach - Rapid prototyping - Built-in responsive utilities ### Design Tokens (CSS Variables) css :root { --color-primary: #2563EB; --color-success: #10B981; --color-error: #EF4444; --space-md: 16px; --radius-md: 8px; --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1); --transition-base: 0.2s ease; } --- ## 21. Testing Checklist Cross-Browser: Chrome, Safari, Firefox, Edge, Mobile Safari, Chrome Mobile Accessibility: - Keyboard navigation (Tab, Enter, Escape) - Screen reader (NVDA, JAWS, VoiceOver) - Color contrast validation - Focus indicators visible Responsive: 320px, 375px, 768px, 1024px, 1440px, 1920px User Scenarios: - First-time upload - Power user (multiple receipts) - Poor internet connection - Accessibility needs (keyboard-only, screen reader) --- ## Key Takeaways 1. Trust is paramount: Every visual reinforces security 2. Simplicity reduces errors: Clean layouts minimize mistakes 3. Consistency builds confidence: Reuse patterns throughout 4. Status transparency: Always show system state clearly 5. Accessibility is non-negotiable: WCAG 2.1 AA compliance --- End of Condensed Design System Version 2.0 - Optimized for DevelopmentCopy one of these into your project. Installing also returns the manifest and these snippets.
targets:
- https://api.opensmartroute.ai/api/v1/registry/hadassahlevi-tiktax-platform-design-rules-instructions/manifest # or paste the manifest belowAn Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.
{
"ocm": "1",
"id": "hadassahlevi-tiktax-platform-design-rules-instructions",
"kind": "skill",
"name": "design_rules_",
"description": "Tik-Tax Design System ## Professional FinTech UI/UX Guide --- ## 1. Design Philosophy **Core Principles:** - **Trust above all**: Visual stability and consistency - **Radical simplicity**: Obvious, straightforward actions - **Security-first aesthetics**: Professional appearance - **Effortless efficiency**: Minimal cognitive load - **Accessibility for all**: Intuitive for non-tech users - **Status transparency**: Clear, immediate feedback **UI Architecture:** - **Header**: Logo + Settings/Profile icon only - **Footer**: Primary navigation (3-4 icons: Home, Archive, Profile) - **Focus**: Content and primary CTA (e.g., '+' button) --- ## 2. Color Palette ### Primary Colors ``` Primary Blue: #2563EB (actions, links) Primary Hover: #1D4ED8 Primary Active: #1E40AF Primary Light: #DBEAFE (backgrounds) Deep Navy: #1E3A8A (headers, important text) Professional Teal: #0891B2 (secondary actions) ``` ### Neutrals ``` White: #FFFFFF (cards, primary background) Off-White: #FAFBFC (page background) Light Gray: #F3F4F6 (disa",
"publisher": "HadassahLevi",
"version": "1.0.0",
"capabilities": {
"domains": [
"finance",
"math"
],
"tags": [
"skill-md",
"github-instructions"
],
"languages": [
"en"
]
},
"quality_prior": 0.6,
"examples": [
"Tik-Tax Design System ## Professional FinTech UI/UX Guide --- ## 1. Design Philosophy **Core Principles:** - **Trust above all**: Visual stability and consistency - **Radical simplicity**: Obvious, straightforward actions - **Security-first aesthetics**: Professional appearance - **Effortless efficiency**: Minimal cognitive load - **Accessibility for all**: Intuitive for non-tech users - **Status transparency**: Clear, immediate feedback **UI Architecture:** - **Header**: Logo + Settings/Profile icon only - **Footer**: Primary navigation (3-4 icons: Home, Archive, Profile) - **Focus**: Content and primary CTA (e.g., '+' button) --- ## 2. Color Palette ### Primary Colors ``` Primary Blue: #2563EB (actions, links) Primary Hover: #1D4ED8 Primary Active: #1E40AF Primary Light: #DBEAFE (backgrounds) Deep Navy: #1E3A8A (headers, important text) Professional Teal: #0891B2 (secondary actions) ``` ### Neutrals ``` White: #FFFFFF (cards, primary background) Off-White: #FAFBFC (page background) Light Gray: #F3F4F6 (disa"
],
"primary": false,
"metadata": {
"source": {
"provider": "github-instructions",
"repository": "https://github.com/HadassahLevi/TikTax-Platform",
"path": ".github/instructions/design_rules_.instructions.md",
"ref": "4ebb0dc04172e3b7ffe096f73096e1df080e93fe",
"url": "https://github.com/HadassahLevi/TikTax-Platform/blob/4ebb0dc04172e3b7ffe096f73096e1df080e93fe/.github/instructions/design_rules_.instructions.md",
"key": "HadassahLevi/TikTax-Platform/.github/instructions/design_rules_.instructions.md"
},
"applies_to": "**"
},
"instructions": "# Tik-Tax Design System ## Professional FinTech UI/UX Guide --- ## 1. Design Philosophy **Core Principles:** - **Trust above all**: Visual stability and consistency - **Radical simplicity**: Obvious, straightforward actions - **Security-first aesthetics**: Professional appearance - **Effortless efficiency**: Minimal cognitive load - **Accessibility for all**: Intuitive for non-tech users - **Status transparency**: Clear, immediate feedback **UI Architecture:** - **Header**: Logo + Settings/Profile icon only - **Footer**: Primary navigation (3-4 icons: Home, Archive, Profile) - **Focus**: Conte",
"cost": {
"context_tokens": 3178
}
}Fetch it by URL: GET /api/v1/registry/hadassahlevi-tiktax-platform-design-rules-instructions/manifest?version=1.0.0
Star ratings from people who tried it. One review per account; edit yours any time.
No reviews yet. Install it, try it, and be the first to rate it.