This commit is contained in:
@@ -0,0 +1,696 @@
|
||||
# Design System Task for Car Dashcam Website
|
||||
|
||||
For: Designer + Frontend Design System Implementation Engineer
|
||||
Stack: React + Next.js + Tailwind CSS
|
||||
Architecture: Atomic Design + Design Tokens + Component-Driven Development
|
||||
|
||||
---
|
||||
|
||||
# Product Context
|
||||
|
||||
The website is focused on car video registrators (dashcams), accessories, comparisons, reviews, installation guides, and purchase flows.
|
||||
|
||||
The product positioning is:
|
||||
|
||||
* technologically advanced
|
||||
* reliable in emergencies
|
||||
* automotive premium feel
|
||||
* minimal cognitive overload
|
||||
* optimized for mobile-first browsing
|
||||
* fast perceived loading
|
||||
* visually trustworthy for expensive electronics
|
||||
|
||||
The visual language should combine:
|
||||
|
||||
* modern automotive UI
|
||||
* Japanese/Korean automotive electronics aesthetics
|
||||
* dashboard HUD inspiration
|
||||
* premium marketplace clarity
|
||||
* clean editorial layouts
|
||||
|
||||
Avoid:
|
||||
|
||||
* aggressive gaming aesthetics
|
||||
* neon cyberpunk overload
|
||||
* cheap AliExpress visual style
|
||||
* overly corporate SaaS look
|
||||
* generic ecommerce templates
|
||||
|
||||
The design should feel somewhere between:
|
||||
|
||||
* Tesla interface
|
||||
* Blackmagic Design product pages
|
||||
* Sony camera product pages
|
||||
* premium automotive accessories catalog
|
||||
* modern editorial tech magazine
|
||||
|
||||
---
|
||||
|
||||
# Resolved Direction
|
||||
|
||||
## Product Strategy
|
||||
|
||||
Phase 1 should optimize for editorial trust and comparison-first decision making, not direct ecommerce conversion.
|
||||
|
||||
The first proof artifact is a visual direction brief for a “Best Dashcams 2026” comparison page. Code implementation comes later, after the visual language is approved.
|
||||
|
||||
The page should use:
|
||||
|
||||
* one overall winner
|
||||
* use-case winners for different buyer needs
|
||||
* transparent scoring
|
||||
* editorial override notes when real-world testing contradicts a raw score
|
||||
|
||||
Default score dimensions:
|
||||
|
||||
* video
|
||||
* night
|
||||
* parking
|
||||
* reliability
|
||||
* usability
|
||||
* value
|
||||
|
||||
Use the same six dimensions across categories, but allow category-specific weights.
|
||||
|
||||
## Trust Model
|
||||
|
||||
Product facts and claims must expose three public trust states:
|
||||
|
||||
* verified
|
||||
* claimed
|
||||
* unknown
|
||||
|
||||
The public UI should stay simple, but the internal data model should preserve verification method, for example:
|
||||
|
||||
* measured in review
|
||||
* confirmed from firmware docs
|
||||
* confirmed from teardown
|
||||
* confirmed by multiple sources
|
||||
|
||||
Trust labels should be quiet evidence chips with an icon and short label. Details such as method, source, and date should live in tooltips, detail panels, or source notes.
|
||||
|
||||
## Visual Anchor
|
||||
|
||||
The primary visual anchor is premium camera/product editorial, with automotive HUD cues used secondarily.
|
||||
|
||||
Real product and media photography should dominate. UI, HUD, and camera-interface details should appear only as restrained overlays or supporting metadata.
|
||||
|
||||
The default theme is light-first titanium brochure with dark product/media modules and full dark-mode parity.
|
||||
|
||||
## First Viewport
|
||||
|
||||
The first viewport of “Best Dashcams 2026” should prioritize trust and decision shortcuts:
|
||||
|
||||
* overall pick
|
||||
* 3-5 use-case winners
|
||||
* methodology access
|
||||
* evidence labels
|
||||
* concise scoring context
|
||||
|
||||
Avoid leading with a purely cinematic product hero if it delays comparison intent.
|
||||
|
||||
## Comparison UX
|
||||
|
||||
Mobile comparison should use stacked winner cards first, followed by a horizontal comparison table with sticky spec labels.
|
||||
|
||||
The comparison table should lead with a compact hardware block before outcome rows.
|
||||
|
||||
Core first rows:
|
||||
|
||||
* sensor
|
||||
* resolution/FPS
|
||||
* bitrate
|
||||
* HDR
|
||||
* lens/FOV
|
||||
* storage
|
||||
* capacitor/battery
|
||||
* channels
|
||||
|
||||
Then show verdict, score dimensions, known issues, price, and seller information.
|
||||
|
||||
## Ecommerce Role
|
||||
|
||||
Purchase CTAs should be secondary and evidence-adjacent. They should sit near price and seller information, but must not dominate winner cards or turn the page into an affiliate marketplace.
|
||||
|
||||
## Visual Taste Guardrails
|
||||
|
||||
Use muted, pastel, old-money color behavior. Avoid raw bright, screaming, neon, or cheap saturated colors.
|
||||
|
||||
The lead accent family is desaturated petrol blue / steel blue.
|
||||
|
||||
Keep semantic amber and recording red, but make them muted and low-chroma.
|
||||
|
||||
Use tight geometry:
|
||||
|
||||
* 4-8px radii
|
||||
* hairline borders
|
||||
* mostly flat surfaces
|
||||
* subtle tonal layering
|
||||
* restrained shadows
|
||||
|
||||
Do not use:
|
||||
|
||||
* neon accents
|
||||
* heavy glassmorphism
|
||||
* big rounded SaaS cards
|
||||
* stock gradients
|
||||
* loud affiliate blocks
|
||||
* crypto-dashboard styling
|
||||
* gaming HUD overload
|
||||
* generic ecommerce templates
|
||||
|
||||
## Typography Decision
|
||||
|
||||
Use an editorial sans for reading and UI, with technical monospace reserved for specs.
|
||||
|
||||
Name concrete font candidates in the spec:
|
||||
|
||||
* UI/editorial: Geist or Inter, with system sans fallback
|
||||
* technical fragments: IBM Plex Mono or Iosevka, with system monospace fallback
|
||||
|
||||
---
|
||||
|
||||
# Primary Goals
|
||||
|
||||
## UX Goals
|
||||
|
||||
1. Make product comparison extremely easy
|
||||
2. Build trust quickly
|
||||
3. Reduce noise in specification-heavy interfaces
|
||||
4. Support long-form technical reading
|
||||
5. Make mobile usage first-class
|
||||
6. Allow users to scan specs very fast
|
||||
7. Visually separate verified information from marketing claims
|
||||
8. Create reusable layouts for:
|
||||
|
||||
* reviews
|
||||
* comparisons
|
||||
* guides
|
||||
* catalogs
|
||||
* landing pages
|
||||
* product detail pages
|
||||
|
||||
---
|
||||
|
||||
# Design Principles
|
||||
|
||||
## 1. Information Density Without Chaos
|
||||
|
||||
The system should support large amounts of technical data while remaining readable.
|
||||
|
||||
Dashcam users compare:
|
||||
|
||||
* bitrate
|
||||
* sensor model
|
||||
* HDR support
|
||||
* parking mode
|
||||
* CPL filters
|
||||
* heat resistance
|
||||
* night quality
|
||||
* codecs
|
||||
* Wi-Fi support
|
||||
* cloud integrations
|
||||
|
||||
The UI must help scanning.
|
||||
|
||||
---
|
||||
|
||||
## 2. Automotive Precision
|
||||
|
||||
Spacing, typography, borders, and interactions should feel engineered rather than decorative.
|
||||
|
||||
Use:
|
||||
|
||||
* precise spacing scales
|
||||
* subtle contrast
|
||||
* restrained shadows
|
||||
* clean hierarchy
|
||||
* predictable interaction patterns
|
||||
|
||||
Avoid random rounded cards everywhere.
|
||||
|
||||
---
|
||||
|
||||
## 3. “Camera Hardware” Visual Language
|
||||
|
||||
Visual references:
|
||||
|
||||
* camera UI
|
||||
* automotive instrument clusters
|
||||
* photography gear
|
||||
* black anodized aluminum
|
||||
* dark matte surfaces
|
||||
* glass reflections
|
||||
* OLED dashboard typography
|
||||
|
||||
---
|
||||
|
||||
# Technical Requirements
|
||||
|
||||
## Stack
|
||||
|
||||
Implementation must use:
|
||||
|
||||
* Tailwind CSS
|
||||
* CSS variables for tokens
|
||||
* React compound components
|
||||
* atomic architecture
|
||||
* accessibility-first approach
|
||||
* responsive-first approach
|
||||
* light-first default with full dark-mode parity
|
||||
* SSR-safe patterns for Next.js
|
||||
|
||||
---
|
||||
|
||||
# Atomic Architecture Structure
|
||||
|
||||
## Atoms
|
||||
|
||||
Examples:
|
||||
|
||||
* Button
|
||||
* Badge
|
||||
* Chip
|
||||
* Tag
|
||||
* Typography
|
||||
* PriceLabel
|
||||
* RatingStars
|
||||
* Divider
|
||||
* Input
|
||||
* Select
|
||||
* Checkbox
|
||||
* IconButton
|
||||
* Tooltip
|
||||
* StatusIndicator
|
||||
* BatteryIndicator
|
||||
* SensorLabel
|
||||
* RecordingQualityBadge
|
||||
|
||||
Requirements:
|
||||
|
||||
* variants
|
||||
* sizes
|
||||
* semantic states
|
||||
* keyboard accessibility
|
||||
* token-driven styling only
|
||||
|
||||
---
|
||||
|
||||
## Molecules
|
||||
|
||||
Examples:
|
||||
|
||||
* ProductCard
|
||||
* ReviewCard
|
||||
* SpecRow
|
||||
* ComparisonRow
|
||||
* VideoPreview
|
||||
* PriceBlock
|
||||
* SellerBadge
|
||||
* NavigationItem
|
||||
* Breadcrumbs
|
||||
* SearchInput
|
||||
* FilterDropdown
|
||||
* StickyBuyPanel
|
||||
|
||||
---
|
||||
|
||||
## Organisms
|
||||
|
||||
Examples:
|
||||
|
||||
* ProductComparisonTable
|
||||
* ReviewHero
|
||||
* ProductGallery
|
||||
* SpecificationSection
|
||||
* VideoSamplesCarousel
|
||||
* ReviewSummary
|
||||
* InstallationGuide
|
||||
* ProductGrid
|
||||
* RecommendationRail
|
||||
* StickyMobileActions
|
||||
* ReviewTOC
|
||||
* Header
|
||||
* Footer
|
||||
|
||||
---
|
||||
|
||||
## Templates
|
||||
|
||||
Examples:
|
||||
|
||||
* Product Page
|
||||
* Review Article
|
||||
* Comparison Page
|
||||
* Category Catalog
|
||||
* Brand Page
|
||||
* Landing Page
|
||||
* Blog Article
|
||||
* Search Results
|
||||
* “Best Dashcams 2026” page
|
||||
|
||||
---
|
||||
|
||||
# Visual Direction
|
||||
|
||||
## Color System
|
||||
|
||||
### Base Palette
|
||||
|
||||
Primary colors should feel:
|
||||
|
||||
* automotive
|
||||
* metallic
|
||||
* technical
|
||||
* trustworthy
|
||||
|
||||
Suggested direction:
|
||||
|
||||
* graphite
|
||||
* gunmetal
|
||||
* matte black
|
||||
* titanium gray
|
||||
* cold white
|
||||
* deep navy accents
|
||||
|
||||
Accent colors:
|
||||
|
||||
* desaturated petrol blue / steel blue as the lead accent family
|
||||
* muted low-chroma amber for warnings, heat, caution, and parking-related states
|
||||
* muted low-chroma red for recording and critical states
|
||||
* success green only where meaningful
|
||||
|
||||
Avoid rainbow interfaces and raw bright accents.
|
||||
|
||||
---
|
||||
|
||||
## Surface System
|
||||
|
||||
Need layered surfaces:
|
||||
|
||||
| Level | Usage |
|
||||
| -------------- | -------------------------- |
|
||||
| Surface 0 | Light titanium app background |
|
||||
| Surface 1 | Main editorial cards and comparison blocks |
|
||||
| Surface 2 | Elevated product/media modules |
|
||||
| Surface 3 | Interactive hover surfaces |
|
||||
| Surface Accent | Dark product/media blocks and premium highlights |
|
||||
|
||||
Light mode is the primary default.
|
||||
|
||||
Light mode should feel like:
|
||||
|
||||
* premium automotive brochure
|
||||
* not plain white SaaS
|
||||
|
||||
Dark mode must have full parity and should preserve the same hierarchy, contrast, and trust labeling.
|
||||
|
||||
---
|
||||
|
||||
# Typography System
|
||||
|
||||
Typography is extremely important.
|
||||
|
||||
The interface must support:
|
||||
|
||||
* long-form reading
|
||||
* technical specs
|
||||
* comparisons
|
||||
* editorial content
|
||||
* ecommerce CTAs
|
||||
|
||||
Recommended direction:
|
||||
|
||||
Headings:
|
||||
|
||||
* geometric sans
|
||||
* condensed possible for large titles
|
||||
|
||||
Body:
|
||||
|
||||
* highly readable
|
||||
* neutral
|
||||
* strong numeric clarity
|
||||
|
||||
Monospace:
|
||||
|
||||
* used for technical specs
|
||||
* bitrate
|
||||
* firmware
|
||||
* codecs
|
||||
|
||||
Potential inspirations:
|
||||
|
||||
* Inter
|
||||
* Geist
|
||||
* IBM Plex Sans
|
||||
* Iosevka for technical fragments
|
||||
|
||||
Resolved direction:
|
||||
|
||||
* UI/editorial: Geist or Inter, with system sans fallback
|
||||
* technical fragments: IBM Plex Mono or Iosevka, with system monospace fallback
|
||||
* monospace should be reserved for specs, firmware, codecs, bitrate, and compact technical metadata
|
||||
|
||||
---
|
||||
|
||||
# Layout System
|
||||
|
||||
## Grid
|
||||
|
||||
Need:
|
||||
|
||||
* 4px spacing base
|
||||
* predictable responsive grid
|
||||
* container system
|
||||
* content widths for:
|
||||
|
||||
* article reading
|
||||
* comparison tables
|
||||
* dense catalogs
|
||||
|
||||
---
|
||||
|
||||
## Responsive Targets
|
||||
|
||||
Must support:
|
||||
|
||||
| Device | Priority |
|
||||
| ----------------- | -------- |
|
||||
| Mobile portrait | Highest |
|
||||
| Mobile landscape | High |
|
||||
| Tablet portrait | High |
|
||||
| Desktop ultrawide | Medium |
|
||||
|
||||
Special focus:
|
||||
|
||||
* sticky bottom actions on mobile
|
||||
* comparison tables on narrow screens
|
||||
* thumb-friendly navigation
|
||||
|
||||
---
|
||||
|
||||
# Motion System
|
||||
|
||||
Motion should feel:
|
||||
|
||||
* mechanical
|
||||
* precise
|
||||
* responsive
|
||||
|
||||
Avoid:
|
||||
|
||||
* playful animations
|
||||
* bouncing
|
||||
* exaggerated easing
|
||||
|
||||
Allowed:
|
||||
|
||||
* subtle fades
|
||||
* sliding panels
|
||||
* controlled transitions
|
||||
* progressive disclosure
|
||||
|
||||
---
|
||||
|
||||
# Icons
|
||||
|
||||
Need unified icon language.
|
||||
|
||||
Possible direction:
|
||||
|
||||
* outline icons
|
||||
* automotive dashboard inspiration
|
||||
* camera hardware icons
|
||||
* signal indicators
|
||||
* storage/media indicators
|
||||
|
||||
---
|
||||
|
||||
# Content Components
|
||||
|
||||
Must support:
|
||||
|
||||
## Review Components
|
||||
|
||||
* pros/cons
|
||||
* verdict block
|
||||
* sample footage embeds
|
||||
* firmware history
|
||||
* heat test results
|
||||
* night comparison sliders
|
||||
* speed readability examples
|
||||
|
||||
---
|
||||
|
||||
## Comparison Components
|
||||
|
||||
Need highly optimized comparison UX:
|
||||
|
||||
* sticky headers
|
||||
* horizontal scroll with snap
|
||||
* column pinning
|
||||
* spec highlighting
|
||||
* “best value” indicators
|
||||
|
||||
Resolved Phase 1 behavior:
|
||||
|
||||
* stacked winner cards first on mobile
|
||||
* horizontal comparison table after cards
|
||||
* sticky spec labels on narrow screens
|
||||
* first visible table rows should be the compact hardware block: sensor, resolution/FPS, bitrate, HDR, lens/FOV, storage, capacitor/battery, channels
|
||||
* outcome rows should follow the hardware block
|
||||
|
||||
---
|
||||
|
||||
# Ecommerce Components
|
||||
|
||||
Need:
|
||||
|
||||
* affiliate blocks
|
||||
* seller comparison
|
||||
* availability indicators
|
||||
* price history blocks
|
||||
* CTA hierarchy
|
||||
* coupon presentation
|
||||
|
||||
Must avoid spammy affiliate aesthetics.
|
||||
|
||||
---
|
||||
|
||||
# Accessibility Requirements
|
||||
|
||||
Minimum:
|
||||
|
||||
* WCAG AA
|
||||
* keyboard navigation
|
||||
* visible focus states
|
||||
* semantic HTML
|
||||
* proper contrast
|
||||
* reduced motion support
|
||||
|
||||
---
|
||||
|
||||
# Tailwind Requirements
|
||||
|
||||
## Must Produce
|
||||
|
||||
1. Tailwind token structure
|
||||
2. Design token naming convention
|
||||
3. Component API documentation
|
||||
4. Variant strategy
|
||||
5. Responsive rules
|
||||
6. Dark/light theming system
|
||||
7. Atomic folder structure
|
||||
8. Figma component parity with React components
|
||||
|
||||
---
|
||||
|
||||
# Deliverables
|
||||
|
||||
## Design Deliverables
|
||||
|
||||
* Figma design system
|
||||
* typography scale
|
||||
* spacing system
|
||||
* icon system
|
||||
* color tokens
|
||||
* component library
|
||||
* responsive examples
|
||||
* interaction states
|
||||
* accessibility annotations
|
||||
|
||||
---
|
||||
|
||||
## Frontend Deliverables
|
||||
|
||||
Implementation in:
|
||||
|
||||
* React
|
||||
* Next.js
|
||||
* Tailwind CSS
|
||||
|
||||
Including:
|
||||
|
||||
* token-based theme
|
||||
* reusable atomic components
|
||||
* Storybook
|
||||
* dark/light support
|
||||
* mobile-first responsiveness
|
||||
* typed component APIs
|
||||
* zero hardcoded colors in components
|
||||
|
||||
---
|
||||
|
||||
# Important Constraints
|
||||
|
||||
The final result must NOT look like:
|
||||
|
||||
* generic Tailwind template
|
||||
* Bootstrap ecommerce
|
||||
* crypto dashboard
|
||||
* gaming UI
|
||||
* cheap gadget marketplace
|
||||
|
||||
The interface should feel:
|
||||
|
||||
* premium
|
||||
* calm
|
||||
* technical
|
||||
* engineered
|
||||
* trustworthy
|
||||
* fast
|
||||
|
||||
Users should subconsciously feel:
|
||||
“This is a serious automotive electronics platform.”
|
||||
|
||||
---
|
||||
|
||||
# Suggested Initial Priority
|
||||
|
||||
Phase 1:
|
||||
|
||||
* typography
|
||||
* colors
|
||||
* spacing
|
||||
* visual direction brief for “Best Dashcams 2026”
|
||||
* buttons
|
||||
* cards
|
||||
* navigation
|
||||
* product cards
|
||||
* comparison table
|
||||
|
||||
Phase 2:
|
||||
|
||||
* article system
|
||||
* review system
|
||||
* ecommerce modules
|
||||
* filtering system
|
||||
|
||||
Phase 3:
|
||||
|
||||
* motion
|
||||
* advanced comparison UX
|
||||
* personalization
|
||||
* saved comparisons
|
||||
* dashboard-like features
|
||||
Reference in New Issue
Block a user