sellyourcar
A tight, energetic system built for a fast bilingual car marketplace — confident ink black, an electric "deal green" that signals a closed sale, and the Cairo typeface that carries Arabic and Latin with equal weight. Every component below is RTL-ready; use the EN/RTL switch in the sidebar to flip the whole page.
Color
Four brand colors do the heavy lifting. Green is reserved for action and success — never decoration. Click any swatch to copy its hex.
Semantic colors are tuned to the same lightness/chroma family as deal green, so warnings and errors feel native — not bolted on. Success always uses the brand green.
Typography
Cairo is the only typeface. It was chosen because it carries Arabic and Latin in one consistent voice — essential for a bilingual market. Heavy weights for confidence, regular for reading.
Sell faster.
List your car in under three minutes and reach verified buyers near you.
بِيع بسرعة.
اعرض سيارتك خلال أقل من ثلاث دقائق وتواصل مع مشترين موثوقين بقربك.
Spacing & Layout
A 4px base scale keeps rhythm consistent. Components breathe on 16 and 24; sections separate on 56 and 72.
Radius & Elevation
Soft, friendly corners — cards round at 14, controls at 8–10, pills go full. Shadows stay quiet; the loudest elevation is the green CTA glow.
Logo & Mark
The mark is a checkmark in a green tile — the universal sign of a done deal. The wordmark sets "car" in green to land the category. Keep clearspace equal to the height of the tile.
Iconography
A single line style: 1.8px stroke, round caps, 24px grid. Icons stay monochrome and inherit text color — green only when they signal action or success.
Stroke 1.8px · caps round · grid 24×24 · the check mark uses a heavier 7-unit stroke as the brand signature.
Buttons
Green primary carries every "go" action and lifts on a soft glow. One primary per view — pair with dark, outline, or ghost for everything else.
Hover any button to feel the timing — 120ms color, ease-out. Click "Publish" to see the loading state.
Forms & Inputs
Calm by default, green on focus. Inputs are large and tappable (44px+) for mobile sellers listing on the go.
Badges & Status
Status drives the marketplace. Green means live and available; ink means sold; amber means held. Tags carry specs.
Cards
The base surface: paper, soft border, 14px radius, e-1 at rest. Everything in the product is a specialization of this.
Paper surface · border-soft · r-lg · e-1.
e-2 for floating panels and menus.
Ink surface for hero and stats.
Listing Card
The hardest-working component. Photo, price, three key specs, seller, and status — scannable in a feed. Hover to lift; tap the heart to save; toggle a card to its sold state.
"Mark sold" stamps the card and dims the photo — see the closed-deal moment in Price & SOLD.
Price & SOLD
Price is always the loudest element on a listing. The SOLD stamp is the brand's signature payoff — rotated, outlined, celebratory.
Tap to fire the closed-deal animation — the badge flips to Sold, the photo dims, and the stamp drops in with a spring.
Seller Profile
Trust is the currency of resale. The profile leads with verification, rating, and a clear count of closed deals.
Motion
Motion is quick and purposeful. Micro-feedback at 120ms, transitions at 180ms, and a single spring reserved for celebratory moments like SOLD.
Hover a card to replay its curve. All motion respects prefers-reduced-motion and collapses to instant.
Social Templates
Built for the channel it lives on. A TikTok profile lockup and a 9:16 "just sold" post — same tokens, vertical canvas.
this week.
in 4 days
هذا الأسبوع.