FUD KIT 2 · Smooth
A fully token-driven component system: chunky rounded type (Baloo 2 + Nunito), floating cards, warm glow +
confetti texture, candy-press buttons. Every element restyles from CSS variables (see Tokens & theming) — no markup edits. Load fud-kit2.css; everything is namespaced
--fk2-* / .fk2-* so both kits can coexist for comparison.
Tokens & theming
Every component is driven by CSS variables, so restyling is CSS-only — no markup changes. Three levels of control, from broad to precise.
The knobs
Primitives → semantic roles → component vars. Change one and everything downstream follows.
/* 1 · global rebrand */
:root { --fk2-pink: #ff5a5f; }
/* 2 · one role everywhere */
:root { --fk2-accent: var(--fk2-purple); }
/* 3 · one component */
.fk2-btn { --fk2-btn-radius: 10px; }
/* 4 · one instance */
<a class="fk2-btn" style="--fk2-btn-bg:#f4703a">
Live — the same components, tokens overridden inline:
This card sets --fk2-accent, --fk2-brand & --fk2-radius-card on itself — its children re-theme by role, no per-element edits:
Every knob in the kit
Set any of these on the component, on an ancestor, or inline on one instance — the value cascades. Each section below repeats its own row, so you never have to open the CSS to find the handle.
| Component | Knobs (CSS vars you can set) |
|---|---|
:root | --fk2-yellow --fk2-pink --fk2-teal --fk2-cream --fk2-ink --fk2-muted --fk2-line — the primitives |
:root roles | --fk2-accent --fk2-brand --fk2-highlight (+ -deep/-soft/--fk2-on-*), --fk2-surface --fk2-surface-2 --fk2-text --fk2-text-muted --fk2-border |
:root shape | --fk2-radius-control --fk2-radius-card --fk2-radius-field --fk2-shadow-card --fk2-shadow-pop --fk2-focus --fk2-transition |
:root type | --fk2-font-display --fk2-font-body --fk2-fs-2xs…3xl --fk2-tracking --fk2-tracking-label --fk2-space-1…8 |
.fk2-btn | --fk2-btn-bg --fk2-btn-fg --fk2-btn-shade --fk2-btn-radius --fk2-btn-pad-y --fk2-btn-pad-x --fk2-btn-fs --fk2-btn-lift --fk2-btn-bd |
.fk2-actions | --fk2-actions-justify --fk2-actions-gap --fk2-actions-mt |
.fk2-kicker | --fk2-kicker-fg --fk2-kicker-mark --fk2-kicker-bar --fk2-kicker-tick --fk2-kicker-tick-w --fk2-kicker-mark-h --fk2-kicker-strong-fs |
.fk2-macron | --fk2-macron-w --fk2-macron-h --fk2-macron-top --fk2-macron-color |
.fk2-card | --fk2-card-bg --fk2-card-bd --fk2-card-radius --fk2-card-shadow --fk2-card-pad |
.fk2-truck-card | --fk2-truck-photo (+ every :root role) |
.fk2-item-card | --fk2-item-thumb --fk2-item-pad |
.fk2-tab | --fk2-tab-bg --fk2-tab-fg --fk2-tab-active-bg --fk2-tab-active-fg --fk2-tab-active-bd |
.fk2-chip | --fk2-chip-sel-bg --fk2-chip-sel-fg |
.fk2-badge | --fk2-badge-bg --fk2-badge-fg |
.fk2-alert | --fk2-alert-bg --fk2-alert-fg --fk2-alert-icon |
.fk2-close | --fk2-close-size --fk2-close-bg --fk2-close-fg --fk2-close-hover-bg --fk2-close-hover-fg |
.fk2-social | --fk2-social-size --fk2-social-bg --fk2-social-fg --fk2-social-hover-bg --fk2-social-hover-fg --fk2-social-gap |
.fk2-table | --fk2-table-bg --fk2-table-head-bg |
.fk2-footer | --fk2-footer-bg --fk2-footer-fg |
.fk2-feature | --fk2-feature-icn |
Yellow band + mascot
The signature move from the mockups: a yellow band with a wavy torn edge, heavy caps with a marker underline, doodle confetti, and the mascot with a speech bubble.
Find trucks
near you
Great food is always around the corner. Find it. Order it. Eat happy.
Let's eat!
Smooth display
Knobs --fk2-font-display --fk2-font-body --fk2-kicker-strong-fs --fk2-kicker-bar --fk2-macron-w --fk2-macron-top
Headings are Baloo 2 extra-bold caps — chunky, rounded, warm, with a faint depth shadow. Accent words carry the palette and can take a marker underline. Kickers are hand-marked eyebrows — a marker tick plus a highlighter swipe, never a filled chip, so they can't be mistaken for buttons.
Good food. Zero wait. All smiles.
Body copy is Nunito — rounded, smooth, easy to read at speed. Muted ink for supporting lines.
.fk2-kicker--strong — the section-label size. Type + a gradient bar only (no SVG), so it survives a font or palette swap. Every heading on this page uses it:
Palette
--fk2-yellow--fk2-pink--fk2-teal--fk2-orange--fk2-coral--fk2-purple--fk2-teal-soft--fk2-pink-soft--fk2-cream--fk2-inkButtons
Knobs --fk2-btn-bg --fk2-btn-fg --fk2-btn-shade --fk2-btn-radius --fk2-btn-pad-y --fk2-btn-pad-x --fk2-btn-fs --fk2-btn-lift · Order the primary/save action is always last and hard right — wrap a button group in .fk2-actions.
Solid pills with soft elevation — instantly readable as buttons. Hover lifts, click presses. Outline and ghost for secondary actions.
Search
Truck cards
Knobs --fk2-truck-photo --fk2-card-radius --fk2-card-shadow --fk2-badge-bg --fk2-badge-fg
One truck in the directory. .fk2-truck-card is the grid tile; add .fk2-truck-card--wide for the same markup as a search-result row. Photo tint comes from --fk2-truck-photo.
Food item cards
Knobs --fk2-item-thumb --fk2-item-pad --fk2-radius-card --fk2-accent (the add button)
One dish. .fk2-item-card is the menu-grid tile — thumb tint via --fk2-item-thumb, optional corner .flag, dietary .fk2-item-tags, and a price rail pinned to the bottom so a row of cards lines up regardless of description length.
Al Pastor Tacos
Three corn tacos, marinated pork, grilled pineapple, cilantro & onion.
Street Corn Bowl
Charred corn, cotija, lime crema, rice, black beans.
Churro Bites
Cinnamon sugar, warm chocolate dip. Back tomorrow at 11.
.fk2-item-row — the dense list form for a full truck menu or an order screen.
Feature tiles & audiences
Find nearby trucks
See who's nearby in real time.
Order ahead
Order and pay right in the app.
Skip the line
Your food is made, not waited.
Support local
Support local businesses you love.
Panels & bands
⚡ Get the FudTruck app
Find. Order. Earn. Anywhere.
- Find nearby trucks
- See real-time locations
- Order ahead & skip the line
- Earn rewards
Scan to download
Never miss good food
New trucks, special offers, and yummy events — straight to your inbox.
Forms
Knobs --fk2-alert-bg --fk2-alert-fg --fk2-alert-icon --fk2-table-bg --fk2-table-head-bg --fk2-close-fg --fk2-close-hover-bg --fk2-actions-justify
| Order | Items | Total | Status | |
|---|---|---|---|---|
| #1043 | 2× Street Tacos | $18.50 | New | |
| #1042 | 1× Brisket Plate | $14.00 | Prep | |
| #1041 | 3× Ice Cream Sandwich | $12.75 | Ready |
Dense mode
Knobs every component var above, re-set inside .fk2-dense — e.g. selection is --fk2-tab-active-bg: var(--fk2-brand-soft) instead of ink.
Wrap work surfaces in .fk2-dense for admin-grade density — same language, tighter rhythm.
| Order | Items | Total | Status | |
|---|---|---|---|---|
| #1043 | 2× Street Tacos | $18.50 | New | |
| #1042 | 1× Brisket Plate | $14.00 | Prep |
Top menu & footer
Knobs --fk2-footer-bg --fk2-footer-fg --fk2-social-size --fk2-social-bg --fk2-social-fg --fk2-social-hover-bg
The sticky .fk2-header at the top of this page and the .fk2-footer below are the real components — logo lockup, underline nav, utility links, a Join pill up top; brand, link row, and colored social buttons in the footer (yellow default, .fk2-footer--dark variant for dark pages).