uikit.studio
gallery

Verdant

community agent-ready

A calm, premium furniture storefront — chairs & lounge seating in emerald green with a warm terracotta accent on a cream canvas, near-black actions and a deep-forest hero. Plus Jakarta Sans + Space Mono with Thmanyah Sans for Arabic. Catalog with search + filters, product preview with color swatches, and a cart with VAT and local payments. Arabic-first, full RTL for the Saudi/Khaliji market. Light + dark, mobile-first, responsive to desktop. Runnable React app.

v1.0.0· MIT· tailwind + tokens· radius 1.5rem· react
Open demo Repo

agent-ready

Build this with your AI agent

Paste this into Claude Code, Cursor or Codex. The agent reads the machine-readable design spec at this URL and reproduces the exact tokens, fonts, radius and components — in your stack.

Build me a website styled exactly like this design: https://uikit.studio/kit/verdant — it's agent-ready. Read the spec at https://uikit.studio/kit/verdant/llms.txt and match its color tokens (light + dark), fonts, radius and components. Keep full dark mode and a responsive layout.

the spec

llms.txtdesign brief for agentsmanifest.jsontokens · fonts · components

Discoverable site-wide at /llms.txt

live preview

uikit.studio/demos/verdant/open

screenshots

Verdant landing
landing
Verdant other
other
Verdant other
other
Verdant other
other
Verdant other
other

colors

Brand scale, plus the light and dark semantic tokens the kit ships with.

50
100
200
300
400
500
600
700
800
900

light

primary#181b17
brand#1f5c32
accent#cf6a1a
ink#17271b
background#f4f3ee
foreground#181b17
card#ffffff
muted#edebe3
border#e6e4db

dark

background#0e110f
foreground#eef1e9
card#161a16
brand#3fa063
accent#e0843a
muted#1c211c
border#262b25

typography

The quick brown fox

Plus Jakarta Sans

display

The quick brown fox jumps over the lazy dog

Plus Jakarta Sans

sans / body

const ship = () => fast

Space Mono

mono / labels

the prompt

The brief that generated this kit via uikit-standard.

A premium furniture storefront — emerald green brand, warm terracotta accent, cream canvas, near-black actions and a deep-forest hero. Plus Jakarta Sans display/body + Space Mono labels, Thmanyah Sans for Arabic. Arabic-first, full RTL, full dark mode. Build storefront (hero, featured chair, bestsellers, perks, trust/payment row), a catalog with search + category pills + a price/category/sort filter rail, a product preview (gallery, color swatches, rating, price + sale, quantity, buy), a cart (line items, free-shipping bar, VAT 15%, local payments), and a components showcase. SAR pricing; payments mada/Apple Pay/Tabby/Tamara/STC Pay/COD.

  1. 1Tokens (tokens.json) → theme.css (emerald brand, terracotta accent, cream/ink, --color-stage, dark block, [dir=rtl] Thmanyah swap).
  2. 2i18n: ar + en dictionaries (Arabic primary) + a provider that flips dir/lang.
  3. 3Design system: cn, Button, IconButton, Badge, Card, Input, ProductCard, PriceTag, RatingStars, ColorSwatch, QuantityStepper, SearchBar, CategoryTabs, BottomNav, TrustBadges.
  4. 4Pages: Storefront, Catalog (search + filters), Product preview, Cart, Components showcase — mobile-first + desktop.
  5. 5Agent-ready: uikit.json (validated), AGENTS.md, llms.txt, screenshots + preview.webm.

what's inside

components

ButtonIconButtonBadgeCardInputContainerProductCardPriceTagRatingStarsColorSwatchQuantityStepperSearchBarCategoryTabsBottomNavTrustBadgesPhoneFrame

blocks

BottomNavTrustBadges

templates

Storefront/
Catalog/products
Product/product
Cart/cart
Showcase/components