uikit.studio
gallery

Chomp

community agent-ready

A retro snack-brand kit — warm terracotta + cream + espresso + gold with a forest-green accent. Chunky rounded Baloo 2 display, friendly Fredoka body, thick espresso borders, torn-paper edges, a marquee ticker, an ingredient wheel and SVG packaging. Light + dark, EN/AR + RTL. 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/chomp — it's agent-ready. Read the spec at https://uikit.studio/kit/chomp/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/chomp/open

screenshots

Chomp landing
landing
Chomp components
components

colors

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

50
100
200
300
400
500
600
700

light

primary#c24a30
accent#edc94a
forest#47512e
background#f4ecc8
foreground#3a2117
card#fcf6e3
border#3a2117

dark

background#241410
foreground#f4ecc8
card#2f1b14
primary#d26a47
muted#361f17
border#4a2e22

typography

The quick brown fox

Baloo 2

display

The quick brown fox jumps over the lazy dog

Fredoka

sans / body

const ship = () => fast

Fredoka

mono / labels

the prompt

The brief that generated this kit via uikit-standard.

A retro snack-brand kit — warm terracotta + cream + espresso + gold with a forest-green accent, chunky rounded Baloo 2 display, friendly Fredoka body, thick espresso borders, torn-paper edges, a marquee ticker, an ingredient wheel and SVG packaging. React-first. Full dark mode and EN/AR + RTL. Ship a full landing and a components showcase.

  1. 1Forked the base canvas with `uikit-cli new`, then painted the Chomp identity.
  2. 2Tokens (tokens.json) → theme.css: terracotta brand scale, cream/espresso/gold/forest semantics, dark block, [dir=rtl] Arabic font swap, Baloo 2 display, no monospace.
  3. 3i18n (en + ar): a craft protein-snack narrative — flavors, ingredients, comparison, reviews.
  4. 4Built the system: Button, Card, Badge, Inputs, Checkbox/Radio/Switch, Tabs, Accordion, Table, Tooltip/Progress/Skeleton/Avatar, Pagination; signature Marquee, ProductCard, ComparisonTable, StarRating, Footer, and all-SVG illustrations.
  5. 5Two pages: Landing (torn-edge hero · marquee · best-sellers · ingredient wheel · comparison · testimonials · FAQ · footer) and a components showcase. Validated with `uikit-cli validate`.

what's inside

components

ButtonCardBadgeInputTabsAccordionTablePaginationMarqueeProductCardComparisonTableStarRating

blocks

NavbarFooterProductCardComparisonTableMarquee

templates

Landing/
Showcase/components