Snapptrip Design System
Use this skill to keep Snapptrip UI work aligned with the homepage design-system audit captured on 2026-05-17.
Quick Start
For any Snapptrip-branded UI, load references/snapptrip-homepage-design-system-audit.md before making visual, layout, token, or component decisions.
Apply these core rules by default:
- Build RTL-first Persian interfaces with
dir="rtl" and lang="fa".
- Use a practical travel-booking product layout, not a decorative marketing landing page.
- Use a white surface, thin neutral borders, compact information density, and 8px radii.
- Use primary red
#ed071a for active services and main booking actions.
- Use secondary blue
#575eff for supporting CTAs such as app download.
- Use IRANSansXFa-style typography and Material Symbols/Material Icons-style glyphs.
- Use a centered
1248px desktop content shell with responsive 16px to 24px horizontal padding.
Common Tasks
When designing or generating screenshots:
- Include the homepage primitives from the audit: top navigation, app promotion, service tabs, hotel search panel, promotional carousel, city links, FAQ, and footer blocks.
- Keep Persian text readable, aligned to the logical start, and free of overlap.
- Favor real travel and hotel imagery over abstract gradients or decorative shapes.
- Show desktop, tablet, and mobile variants when the user asks for a homepage or responsive redesign.
When implementing UI:
- Convert the audit tokens into local theme variables before creating component-specific styles.
- Preserve the button sizes, typography scale, state overlays, and field heights from the audit.
- Use semantic controls for tabs, accordions, links, inputs, date pickers, and carousel controls.
- Verify keyboard access, focus states, and contrast for primary red, secondary blue, text, tabs, accordions, and footer content.
When reviewing UI:
- Compare against the reference audit for token drift, RTL mistakes, spacing changes, missing states, inaccessible controls, and over-marketed visual treatment.
- Treat the audit as homepage-first; do not invent checkout, account, hotel-detail, or search-results rules unless the user provides those surfaces.
Reference
Detailed tokens, components, responsive behavior, accessibility notes, and naming proposals live in:
references/snapptrip-homepage-design-system-audit.md
1---2name: snapptrip-design-system3description: Use when Codex needs to design, audit, critique, prototype, or implement UI consistent with Snapptrip's homepage design system, especially RTL Persian travel-booking experiences, homepage redesigns, booking search panels, service tabs, promotional carousels, footer/link systems, or Snapptrip-branded screenshots and mockups.4---56# Snapptrip Design System78Use this skill to keep Snapptrip UI work aligned with the homepage design-system audit captured on 2026-05-17.910## Quick Start1112For any Snapptrip-branded UI, load `references/snapptrip-homepage-design-system-audit.md` before making visual, layout, token, or component decisions.1314Apply these core rules by default:1516- Build RTL-first Persian interfaces with `dir="rtl"` and `lang="fa"`.17- Use a practical travel-booking product layout, not a decorative marketing landing page.18- Use a white surface, thin neutral borders, compact information density, and 8px radii.19- Use primary red `#ed071a` for active services and main booking actions.20- Use secondary blue `#575eff` for supporting CTAs such as app download.21- Use IRANSansXFa-style typography and Material Symbols/Material Icons-style glyphs.22- Use a centered `1248px` desktop content shell with responsive `16px` to `24px` horizontal padding.2324## Common Tasks2526When designing or generating screenshots:2728- Include the homepage primitives from the audit: top navigation, app promotion, service tabs, hotel search panel, promotional carousel, city links, FAQ, and footer blocks.29- Keep Persian text readable, aligned to the logical start, and free of overlap.30- Favor real travel and hotel imagery over abstract gradients or decorative shapes.31- Show desktop, tablet, and mobile variants when the user asks for a homepage or responsive redesign.3233When implementing UI:3435- Convert the audit tokens into local theme variables before creating component-specific styles.36- Preserve the button sizes, typography scale, state overlays, and field heights from the audit.37- Use semantic controls for tabs, accordions, links, inputs, date pickers, and carousel controls.38- Verify keyboard access, focus states, and contrast for primary red, secondary blue, text, tabs, accordions, and footer content.3940When reviewing UI:4142- Compare against the reference audit for token drift, RTL mistakes, spacing changes, missing states, inaccessible controls, and over-marketed visual treatment.43- Treat the audit as homepage-first; do not invent checkout, account, hotel-detail, or search-results rules unless the user provides those surfaces.4445## Reference4647Detailed tokens, components, responsive behavior, accessibility notes, and naming proposals live in:4849`references/snapptrip-homepage-design-system-audit.md`
EbrahimRohani