Trenda
✨ Living style guide

Trenda Design System

The vibrant, Arabic-first system behind Trenda — a Saudi UGC platform for Gen Z creators. White canvas, navy text, vivid purple + teal sticker energy, pink & orange gradients, and springy motion. Playful · Premium · Bold · Never corporate.

Brand identity → View UI kit
Foundations

Color

Canvas is white, all text is deep navy. Purple drives primary actions, teal seconds it, pink & orange bring energy in highlights and gradients — never as text (accent text uses purple-600 #6D28D9). Max two tint fills per view.

Foundations

Typography

Display: The Year of The Camel (AR) / Gocake (EN) — headlines & numbers only, never body, never Gocake for Arabic. Body: Quicksand (EN) / IBM Plex Sans Arabic (AR). Arabic body: one step larger, line-height 1.85.

Type scaleguidelines/type-scale.html
English display — Gocakeguidelines/type-display-en.html
Arabic displayguidelines/type-display-ar.html
Body typeguidelines/type-body.html
Foundations

Spacing & radius

4px base scale. Everything round: pill buttons, 24px cards, 32px media. No sharp corners.

Foundations

Depth & motion

Signature: the sticker shadow — hard 4px/4px offset in teal on white cards with a 2px navy border. Motion is springy and quick: hover 1.04, press 0.96.

Shadowsguidelines/effects-shadows.html
Motionguidelines/effects-motion.html
Identity

Logo & sticker

The gradient play-button T above the navy Trenda wordmark. The white T is a knockout — full-color lockup on white only; mono white on dark, mono navy on tints. Never recolor, stretch, rotate, or add effects. Lockup min 64px, icon 32px.

Identity

Iconography

28 curated UGC icons (Lucide — rounded, stroke 2.4, currentColor) with the Gen Z sticker treatment: tinted tiles, navy borders, hard offsets, playful tilts that spring upright on hover.

UGC sticker iconsguidelines/iconography.html
Library

Components

Built from the token recipes: pill buttons, sticker cards, tint cards, chips, and inputs — plus UGC elements (creator avatars, engagement bars, media tiles, campaign cards, stat tiles) in components/.

BeautyFoodFashionTech
GRWM with Glow Kit
1 reel · 7 days · 800 ﷼
Tint card
Flat fill, no border — for grids and section content.
Sample

Marketing landing (bilingual)

The section rhythm in practice: white → tint band → white → navy footer, sticker cards, pill CTAs.

Open full page ↗ui_kits/landing/index.html