FŪD KIT style guide

The hand-drawn UI language extracted from the landing page. Load fud-kit.css before any page stylesheet. Everything is namespaced (--fk-* / .fk-*) so it drops into logged-in layouts without fighting theme.css.

Mascots & art

The illustrated cast every FudTruk surface is built around. All live in landing-v2/assets/img/ — use these before drawing anything new.

Hero mascot — truck with phone, burrito and QR code

hero-art.png

logo-fudtruck.png

people.png

vendor-scene.png

step-phone

step-taco

step-bag

step-face

envelope

bubble

icon-pin

icon-phone

icon-clock

icon-heart

icon-cal

mascot-cutout

Palette

--fk-cream

--fk-paper

--fk-pink

--fk-pink-deep

--fk-teal

--fk-yellow

--fk-orange

--fk-purple

--fk-ink

--fk-night

Buttons

Panels & ribbons

Doodled panel

The workhorse container: ink border, wobbly corners, hard offset shadow. Add .fk-panel--doodled for corner stars, .fk-tilt-l/.fk-tilt-r for the hand-placed look.

Over-ribbon

A .fk-ribbon--over heading straddles the top edge, like the landing's "How it works".

Pink surface

Audience-card style tinted panel.

Teal surface

Vendor-flavored tinted panel.

Chalkboard

The food-truck specials board — for menus, deals, and anything the truck would scrawl by hand. Scribble-circle anything worth pointing at, and split content with a squiggle divider.

Today's specials

Street Tacos (3)$8.50

Brisket Plate$14.00

Horchata$4.00

Ice Cream Sandwich$4.25

Squiggle divider

Use .fk-hr between content blocks, and .fk-circled for hand-circled emphasis like chef's pick!

Panels now carry paper grain, sketch hatching, and a second traced pen line inside the border — like the truck drew it twice.

Chips, badges & doodles

1 2 3 4 Draft Preparing Ready New order Closed

Forms

Joined input

Order #1042 marked ready — customer notified.

Inventory low: only 3 burritos left.

Payment failed — please try another card.

Tables & tabs

Order	Customer	Items	Total	Status
#1043	Jess M.	2× Street Tacos, 1× Horchata	$18.50	New order
#1042	Sam K.	1× Brisket Plate	$14.00	Preparing
#1041	Riley P.	3× Ice Cream Sandwich	$12.75	Ready

Stat cards

Orders today

$612

Revenue

7 min

Avg. prep

4.9★

Rating

Dense mode (logged-in screens)

Wrap any work surface in .fk-dense: smaller type, tighter padding, no tilt on interactive elements. Same ink-and-color language, admin-grade density. This is the target treatment for vendor/admin UIs.

Open

$208

Today

5 min

Prep

Order	Items	Total	Status
#1043	2× Street Tacos	$18.50	New
#1042	1× Brisket Plate	$14.00	Prep