Smile avatar · Dark
01kicknroll-avatar-smile-dark.svg
2.4 KB
THE KICK’N’ROLL BRAND
A little Kick’n’roll.
A little Kick’n’roll.
In every detail.
Artwork, colour, type and the small moments that make us feel like us. A shared reference for our team, retail partners and anyone telling our story.
THE COLLECTION
A place for every element.
Original logos, symbols and expressive elements.
Choose an asset to take a closer look.
Wordmark avatar · Mint
02kicknroll-avatar-wordmark-mint.svg
4.1 KB
Wordmark avatar · Dark
03kicknroll-avatar-wordmark-dark.svg
4.1 KB
Wordmark avatar · Square
04kicknroll-avatar-wordmark-mint-square.png
23.4 KB
Double highlight · Green
05kicknroll-highlight-double-green.svg
2.3 KB
Single highlight · Amber
06kicknroll-highlight-single-amber.svg
751 B
Star sticker · Purple
07kicknroll-sticker-star-purple.svg
1.3 KB
Smile symbol · White
08kicknroll-symbol-smile-white.svg
1.3 KB
Wave path · Single layer
09kicknroll-path-wave-single.svg
1.6 KB
Bend path · Compact
10kicknroll-path-bend-compact.svg
1.8 KB
Zigzag path · 01
11kicknroll-path-zigzag-01.svg
3.0 KB
Bend path · Wide
12kicknroll-path-bend-wide.svg
2.2 KB
Zigzag path · 02
13kicknroll-path-zigzag-02.svg
2.9 KB
Underline path · Double
14kicknroll-path-underline-double.svg
2.4 KB
Lamborghini · Gold shield
15lamborghini-shield-gold-rgb.png
549.1 KB
Social avatars · Reference
16kicknroll-social-avatar-sheet.pdf
58.5 KB
Path layout · Reference
17kicknroll-path-layout-reference.png
100.9 KB
No matching assets yet.
Try an original filename, an English asset name or a hex colour from an SVG.
COLOUR & TYPE
One language. Every detail matters.
Values from the brand guide and source files.
Differences are preserved for review.
Poppins Regular
For body copy and everyday headings. The same local font powers the library and the storefront.
Regular weight. Clear hierarchy through scale, line height and space.GIVE SOME
FUN & FREEDOM
FUN & FREEDOM
ABC Stefan Simple · For short words and expressive phrases only
THE CURRENT WEB SCALE
Room to read.
Body copy stays readable on a phone, too. Text uses relative units so browser text preferences can scale it.
- Body & form inputs
1rem / 16px - A little more room for the next adventure.
- Navigation & filters
0.9375rem / 15px - Find your ride · Choose a colour
- Labels & supporting details
0.875rem / 14px - Rider age · Handlebar height · Delivery details
- Short captions
0.75rem / 12px - SMALL WHEELS. BIG WORLD.
Pixel equivalents use a 16px browser default. Main actions use 16px; captions never replace body copy or instructions.
A FEW GOOD RULESStay playful.
KEEP IT PLAYFUL.
Stay playful.
Stay consistent.
KEEP IT PLAYFUL.Recognisable at every size.
Keep the logo and symbols in their original proportions. Give them room to breathe. The 17 originals here retain their original formats and artwork; the website examples show how they are applied.
Paths are compositions, not repeating patterns.
Grey usually stands in for a supporting colour. Choose it to suit the product and layout. Never stretch the artwork or use reference screenshots as decorative assets.
Use the right version for the setting.
Use a clear wordmark where the name needs to be read, and the smile for small moments of recognition. Preview artwork against light and dark backgrounds before choosing. The website’s mint smile is the browser icon.
Make the everyday easy to read.
Use Poppins for useful information and ABC Stefan Simple for short expressive phrases. Keep body text at the shared web scale, with space between lines. Light and dark modes use the same hierarchy.
Keep everyday controls quiet.
Keep shop imagery clear of repeated age stickers. Use filters and product details for rider age. Pagination uses simple numbers and arrows, with a subtle current-page mark. Save expressive compositions for moments that benefit from them.
Let the story arrive in order.
Images arrive before their details. Colour choices unfold, then names appear. Let the support smile take its time. Repeated controls stay quiet, and reduced-motion preferences keep the same content available.
FROM ARTWORK TO EVERYDAY
A familiar little hello.
The website’s current applications.
Shown separately from the original artwork.
The name, clearly.
The wordmark leads our navigation. Its colour follows the page, with space around every letter.
Kick’n’roll
A smile in your tabs.
The mint smile keeps its character at a small size. It is our current browser and saved-site icon.
Useful, without the noise.
A clear account entrance. A small dot when the bag has something inside. Everyday controls stay understated.
THE WEBSITE, IN USE
The same feeling. Everywhere.
Static content · Interactions ready
01 / Arrive Build the story, element by element.
02 / Respond Make every action feel connected.
03 / Settle A little energy. A clear resting state.
Explore a view, then replay its complete sequence.
THE SAME SYSTEM, OUT IN THE WORLD
Made to work together.
Current website components, using the same artwork, styles and motion. Try the bag and the smile, then explore each page in context.
An accent with a purpose.
The original purple star highlights a published rider age on a product detail page. Shop cards keep the focus on the product, with age available through filters and details.
A little company.
Click the smile. It takes a little trip beyond the page’s right edge, pauses, then gently rolls in from the left with one new companion following along. Up to three. Reduced motion adds them without rolling.
Visit supportA little room in the bag.
The header keeps an empty bag quiet. A small mint dot signals items inside; quantities appear in the bag. The account icon leads to login or your account.
Shop & filters
Age, colour and scooter type. Clear stock states and aligned actions.
Find Your Ride
Published ages, handlebar heights and rider limits, in readable rows.
Your bag
Clear product details, quantity controls and a rounded order summary.
Checkout
Readable form fields, payment options and nearby feedback.
Your account
Login, orders and empty states with a useful next step.
Track your order
Verified guest lookup, shared parcel cards and direct carrier links. The same delivery details appear in account orders.
Our story
Original paths and short lettering composed as one piece.
Clear answers, all the way.
A little context. Then the ride.
Collection invitation → filters → image-ready cards → product details → colours and names. The introduction leads into the same product sequence.
Big attitude. Explore the collection
Rider ageAny age
ColourEvery colour
Product typeAll products
Sort byFeatured
Each section enters once, when visible. Filtering updates products without repeating the introduction. Click or focus to reveal controls immediately. Reduced motion keeps everything still and available.
The Lamborghini
collection
Lamborghini collection. Little wheels.
Big attitude.
Bold details. Bright personalities. Find the shape, colour and fit for their next little adventure.
Explore the 2 rides
Their own way to roll.
One collection. Different riding styles.
Meet the collection
Which one is their one?
Start with their riding style, then check each model’s age, height and weight limits.
Meet the ride. Make it yours.
The main image arrives first. The name, price and description follow, then one colour opens into the full palette. Names and controls complete the view.
On mobile, the purchase section starts when it comes into view. Click or focus to finish immediately. Slow images, direct section links and reduced motion keep content available.
From a little rider to their next ride.
Introduction → one option per step → choices unfold → model images and specifications. The age options open after the Ride type heading arrives. Scroll through the guide to see each section enter.
A little help choosing
Little rider.
Right ride.
Start with their age and the way they want to ride. Then compare the details that make a difference.
Let’s find their rideStart here
Who’s coming along?
Choose an age and ride type to narrow things down.
The results couldn’t be updated. Load the selected rides
A good place to start
A little room to choose.
3 models to compare
kick'n'roll Flash Scooter
Age3Y-12Y
Height & weight
- Handlebar height
- 4 levels
- Rider weight limit
- 50kg / 110lbs
kick'n'roll Foal Balance Bike
Age12M-60M
Height & weight
- Handlebar height
- Ask us for the measurements
- Rider weight limit
- 25kg / 55lbs
kick'n'roll Buddy Balance Bike
Age18M-5Y
Height & weight
- Handlebar height
- Ask us for the measurements
- Rider weight limit
- 25kg / 55lbs
Before the first push
A quick fit check.
Height & reach
Compare handlebar height with a scooter that fits. On a balance bike or ride-on, both feet should reach the ground.
Seated or standing?
Check each mode’s age and weight limits. A younger rider may only fit the seated mode.
The model details
See the product page for full specifications, colours and instructions. Missing a measurement? Ask us.
The same guide and animation run on the site. These choices open the real finder without changing your bag. Reduced motion, interrupted animations and slow images keep the information available.
A little less searching.
The same product menu and live search as the website, with transparent product cutouts, age guidance and a quieter collection invitation.
Their next adventure.
Shop all
These links lead to the current website. Search reads the published product collection.
Reassurance, all the way.
Order details, delivery links and email share the same calm hierarchy. Clear information comes first.
Delivery details.
Follow each parcel on the carrier’s website for the latest delivery updates.
Package 1 of 1
UPS
Tracking number
DEMO-TRACKING-NUMBER
A tracking link isn’t available yet. We’re here to help.
An illustrative parcel, with no customer details. Verified orders show the saved tracking number and a link to the carrier’s website when available.
Visit Track my orderThe current order-email design, filled with example content. This preview does not send an email.
Visit My account
A LITTLE FREEDOM
Make room
Make room
for possibility.
Every adventure starts somewhere.
A clear headline. A little context. Then a way forward. Our interface arrives in the same order you read it.
Explore the collection
HOVER · PRESS · FOCUS · BUSY · DISABLED
Ready when you are.
Try a mouse, a tap, or the Tab key. None of these examples submits data.
FROM A CARD TO A CLOSER LOOK
Open, close, press Esc. Focus returns to the card.
CLEAR ANSWERS, QUIETLY
More, when you need it.
What happens when something opens?
Space opens first, then the content resolves. The plus becomes a close mark. Closing is faster than opening.
What if I prefer less motion?
All content, controls, focus states and feedback still work. Movement and automatic playback stop, including if your preference changes while the page is open.
STRUCTURE HAS A RHYTHM, TOO
Keep the row together.
Real files from this library. Sort, filter or search: only the rows that change need to move.
| Format | ||
|---|---|---|
| Smile avatar · Dark | SVG | 2.4 KB |
| Wordmark avatar · Dark | SVG | 4.1 KB |
| Wordmark avatar · Square | PNG | 23.4 KB |
| Smile symbol · White | SVG | 1.3 KB |
| Bend path · Wide | SVG | 2.2 KB |
| Social avatars · Reference | 58.5 KB |
No matching files.
Try another name or format. Your source files are unchanged.
6 of 6 assets.
The header and column widths stay in place. File values never count up or bounce.
A COMPONENT, NOT A PILE OF EFFECTS
Build the whole picture.
ORIGINAL ARTWORK
A little character.
- Asset
- Round wordmark
- Format
- Original SVG
- Colour
- Unchanged
TRY THE CONTENT STATES Local preview · No request is sent
Ready to explore.
The frame keeps its space as the content changes.
Loading preview…
A quiet placeholder; no fabricated progress percentage.
No items to show.
Explain what is missing, then offer a useful next step.
Couldn’t load this preview.
Keep the message beside the action. Never shake the content.
Preview complete.
Completion is stated in words, not colour alone.
THE PLAYFUL END OF THE SYSTEMMotion study · Not a banner
Static composition · Motion optional
Component coverage Entrances are only one part of the system
Every component has a decision. “Still” is intentional, not an omitted state. These are current theme rules, not additions to the original VI artwork.
| Component | Entrance | Interaction / update | Exit | Reduced motion |
|---|---|---|---|---|
| Headings & copy | Reading order, once | Focused content immediately visible | No scroll-out effect | Visible immediately |
| Panels & surfaces | Stable frame; children assemble | One sequence, no nested translations | Owned by tabs / dialog | Stable layout |
| Lists & details | Whole rows, 45 ms steps | Label + value remain paired | No decorative disappearance | All rows readable |
| Data tables | Header stays; up to 8 rows enter | Opt-in sort / filter, 280 ms reflow | Filtered rows removed immediately | Instant results |
| Media & cards | Media → copy → action | Restrained hover; filtering retains position | Collection / dialog owns transition | No reveal or zoom |
| Product detail | Decoded gallery → title and price → palette → names and controls | Mobile sections enter on arrival; focus or click reveals immediately | Gallery and native variations remain responsive | All information and controls visible |
| Shop cards | Decoded image → copy → one swatch → palette → names | 110 ms card stagger; focus or click settles immediately | Offscreen and interrupted cards stay readable | All options available immediately |
| Shop & collection introduction | Invitation → grouped filters; collection copy → image → category cards | Native links and filters remain immediate; AJAX does not replay the introduction | Viewport, focus and resize settle the sequence | All content visible; no motion chunk needed |
| Ride finder | Introduction → first option in each step → choices unfold → decoded model images → paired specifications | Native matching, history and focus; only updated results enter after filtering | Offscreen, interrupted and slow content stays readable | Immediate guide and results; no motion chunk needed |
| Buttons & links | End of reading group | Hover, press, focus, busy, disabled | Release settles | Static, clear states |
| Tabs & navigation | First view uses its content recipe | Indicator + short directional return | Old view hidden immediately | Instant switching |
| Dialogs | Origin → window → contents | Esc, focus containment, rapid close | 180 ms; focus returns | Instant open / close |
| Disclosure | Measured space opens | Content stays in document order | Faster collapse | Native open / close |
| Content states | Reserved space | Loading / empty / error / success; text first | Old state replaced immediately | Same messages, no travel |
| Commerce data | Purchase updates remain immediate | Native prices, stock and validation | No delayed transaction controls | Same native behaviour |
| Floating shopping bag | Rounded card and content arrive in sequence | Large product image, rounded subtotal, stable page width | 220 ms; focus returns | Instant open / close |
| Support smile | Original symbol, clear of the copy | Roll off the right edge, pause, then return slowly from the heading’s side; one new companion follows each time, up to three | Gentle start and stop; whole family settles on interruption, no queued clicks | Companions appear without travel |
| Colour & brand play | Light by default / explicit play | One-click light/dark switch and animated SVG; optional physics study | Pause offscreen; no automatic loop | Immediate colour; static artwork |
No-JavaScript HTML is readable. If GSAP fails, sorting, filters, tabs, dialogs and state controls still work. Long tables never wait for every row to animate; commerce tables are not opted into the demo sorter.
SAME PERSONALITY. A DIFFERENT LIGHT.
Mint stays mint.
Canvas, surfaces, text, controls and feedback change together. Artwork keeps its original colours.
Light palette · Switch manually
Canvas
Surface
Mint surface
Text
Primary action
These are working theme components, not isolated videos. The same behaviour powers this library and the theme’s supported UI. Reduced motion keeps every function available.
A LITTLE HELP, TOGETHER
Talk to our team
Making something with us?
For source files, retail materials or help choosing the right artwork, tell us what you have in mind.