Design System · UI Audit
Everything the user touches
Every element from ecom, CRM (B2B) and JWLS — one place for visual analysis and UX audit. Components are the exact ones used in production screens.
BrandTypographyColorsButtonsBadges & ChipsFormsProductOrders pipelineStatesCategory iconsDrawerScreensOctaDiam
Brand#brand
Eyebrow pattern
Client portal · Orders
Wordmark
yastrubdesign
Display title
My Orders
Subtitle — text-secondary, 14px
Typography#type
font-display · Bodoni Moda
Aurora
Luminous Diaries
AED 42,800 · tabular-nums
Micro labels · tracking
Section label · 10px +0.24em
Card label · 12px +0.16em
Eyebrow · gold
Price note · text-muted 12px
Colors#colors
bg
var(--yd-color-bg)
bg-elevated
var(--yd-color-bg-elevated)
surface
var(--yd-color-surface)
border
var(--yd-color-border-strong)
text
var(--yd-color-text)
text-secondary
var(--yd-color-text-secondary)
gold-400
var(--yd-color-gold-400)
success
var(--yd-color-success)
Badges & Chips#badges
Order statuses · production pipeline
ReceivedIn productionStone settingQuality controlReady for deliveryDeliveredOn hold
Product badges
2026
New
LimitedBestsellerFilter chips · active / inactive
Forms#forms
Text input
Select · quantity stepper · checkbox
2
Product#product
Price · gold-500 tabular
AED 42,800
or $11,652 · price note
Product meta stack
Dawn Edit
Dawn Cuff
18K gold · hand-set
Bestseller
Product card · thumbnail stack
+2Thumbs · orders & cart
Orders pipeline#pipeline
Order row · production progress
OCT-2026-0417Stone setting
Aurora Tennis Bracelet
Placed 12 Aug 2026 ETA 22 Aug 2026
Production
AED 42,800
Stage dots · all states
0/5
2/5
5/5 done
on hold
Stepper · production (vertical)
States#states
Loading · skeleton
Empty state
No orders found
Try adjusting the search or filters.
Notification
Quotation request sent to the atelier
Invalid email or password
Category icons#category-icons
ring
bracelet
necklace
earrings
cuff
pendant
brooch
other
Drawer#drawer
Right drawer · order details / filters
Production drawer: order hero, stage list, items, documents, manager, total + reorder. Cart drawer: cart provider with qty steppers.
Tabs#tabs
Mantine Tabs · product page
Panel content — used on /ecom and storefront product pages.
OctaDiam · The Incubator#octadiam
Full landing review
/design/octadiam
Hero with interactive cut facets, manifesto, 4 incubator stages, services, facility, spectrum, certificates, CTA.
Visuals · fal GPT-2
Status
- Restyled on yastrub tokens
- Structure & copy from Sonnet 5
- Interactive cut-facet stages
- fal GPT-2 visuals (webp)
Production screens#screens
Ecom · Product
/ecom
Tennis bracelet PDP: gallery swipe, qty, bag, tabs, SEO
B2B · Order tracking
/b2b
Single order: stepper, timeline, documents, manager
B2B · Catalogue
/b2b/catalog
Factory grid/feed, filters drawer, sort, 3D
B2B · My Orders
/b2b/orders
Orders list, search, status chips, order drawer
JWLS · Landing
/jwls
Selling landing: hero, how it works, community, pricing, CTA
JWLS · Onboarding
/jwls/onboarding
4-step flow: profile, line, AI concepts, launch
JWLS · Storefront
/jwls/luminous.diaries
Blogger store: collections, pieces, follow, quick view
JWLS · Product
/jwls/luminous.diaries/aurora-ring
Storefront product: gallery, add to bag, price
Ring Studio · 3D
/ring-studio
Custom ring configurator with BVH raytraced viewer
Auth · Sign in / up
/auth
Credentials + social, error states
Profile
/profile
Avatar, bio, collections tabs
Create
/create
Concept builder screen
OctaDiam · Landing
/design/octadiam
The Incubator — design review build
Mantine arsenal
/design/mantine
Every Mantine component on our tokens
Screenshots
/screenshots
Design iteration history