THE KICK’N’ROLL BRAND

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.

Explore the artwork See it in use

17 original assetsOne connected design language

THE COLLECTION

A place for every element.

Original logos, symbols and expressive elements.
Choose an asset to take a closer look.

Smile avatar · Dark

kicknroll-avatar-smile-dark.svg

2.4 KB

Wordmark avatar · Mint

kicknroll-avatar-wordmark-mint.svg

4.1 KB

Wordmark avatar · Dark

kicknroll-avatar-wordmark-dark.svg

4.1 KB

Wordmark avatar · Square

kicknroll-avatar-wordmark-mint-square.png

23.4 KB

Double highlight · Green

kicknroll-highlight-double-green.svg

2.3 KB

Single highlight · Amber

kicknroll-highlight-single-amber.svg

751 B

Star sticker · Purple

kicknroll-sticker-star-purple.svg

1.3 KB

Smile symbol · White

kicknroll-symbol-smile-white.svg

1.3 KB

Wave path · Single layer

kicknroll-path-wave-single.svg

1.6 KB

Bend path · Compact

kicknroll-path-bend-compact.svg

1.8 KB

Zigzag path · 01

kicknroll-path-zigzag-01.svg

3.0 KB

Bend path · Wide

kicknroll-path-bend-wide.svg

2.2 KB

Zigzag path · 02

kicknroll-path-zigzag-02.svg

2.9 KB

Underline path · Double

kicknroll-path-underline-double.svg

2.4 KB

Lamborghini · Gold shield

lamborghini-shield-gold-rgb.png

549.1 KB

Social avatars · Reference

kicknroll-social-avatar-sheet.pdf

58.5 KB

Path layout · Reference

kicknroll-path-layout-reference.png

100.9 KB

COLOUR & TYPE

One language. Every detail matters.

Values from the brand guide and source files.
Differences are preserved for review.

01 / PRIMARY TYPELocal WOFF2

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.

02 / EXPRESSIVE TYPEWOFF2 included

GIVE SOME
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 RULES

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 support

A 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

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 CLEAR ORDER, AT A GLANCE

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.

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.

La colección
Lamborghini

Colección Lamborghini. Ruedas pequeñas.
Mucha actitud.

Detalles atrevidos. Personalidades brillantes. Encuentra la forma, el color y el ajuste para su próxima pequeña aventura.

Descubre los 2 modelos

De la colecciónLamborghini Kids Scooter L3

Tu propia forma de rodar.

Una colección. Distintos estilos.

Conoce la colección

¿Cuál es el suyo?

Empieza por su estilo y comprueba después la edad, la altura y el peso máximo de cada modelo.

ONE RIDE, ONE CLEAR SEQUENCE

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.

A LITTLE HELP, IN ORDER

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.

Un poco de ayuda para elegir

Pequeño rider.
Modelo ideal.

Empieza por su edad y por cómo quiere usarlo. Después compara los detalles que marcan la diferencia.

Busquemos su modelo

Un buen punto de partida

Un poco donde elegir.

3 models to compare

kick'n'roll Flash Scooter

Edad3Y-12Y

3 colores

Estatura y peso

Altura del manubrio: 4 levels
Peso máximo: 50kg / 110lbs

Ver este modelo

kick'n'roll Foal Balance Bike

Edad12M-60M

3 colores

Estatura y peso

Altura del manubrio: Pregúntanos las medidas
Peso máximo: 25kg / 55lbs

Ver este modelo

kick'n'roll Buddy Balance Bike

Edad18M-5Y

4 colores

Estatura y peso

Altura del manubrio: Pregúntanos las medidas
Peso máximo: 25kg / 55lbs

Ver este modelo

Antes del primer impulso

Una comprobación rápida.

Altura y alcance

Compara la altura del manubrio con un scooter que le quede bien. En una bicicleta de equilibrio o un montable, los dos pies deben llegar al suelo.

¿Sentado o de pie?

Comprueba los límites de edad y peso de cada modo. Puede que un niño pequeño solo encaje en el modo sentado.

Los detalles del modelo

Consulta la página del producto para ver especificaciones, colores e instrucciones. ¿Falta alguna medida? Pregúntanos.

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.

AFTER THE FIRST HELLO

Reassurance, all the way.

Order details, delivery links and email share the same calm hierarchy. Clear information comes first.

DELIVERY DETAILS / SAMPLE

Detalles de la entrega.

Sigue cada paquete en la web del transportista para ver las últimas novedades.

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 order

ORDER EMAIL / SAMPLE

The current order-email design, filled with example content. This preview does not send an email.

Visit My account

A LITTLE FREEDOM

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.

Primary / lift & release

Browse assets Secondary / same rhythm

Toggle / state stays visible

Disabled / no false invitation

Try a mouse, a tap, or the Tab key. None of these examples submits data.

STAY ORIENTED

Follow your curiosity.

A world to explore.

The indicator travels to your choice. New content enters from the same direction.

Take the next turn.

Quick changes cancel the previous movement. The selected label and content never wait for an animation.

Good things, together.

Arrow keys move between tabs. Home and End jump to the first and last choice.

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.

Find an asset Format

Original file inventory · 6 selected assets
	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	PDF	58.5 KB

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

Explore the assets

TRY THE CONTENT STATES Local preview · No request is sent

Ready to explore.

The frame keeps its space as the content changes.

THE PLAYFUL END OF THE SYSTEMMotion study · Not a banner

Finished

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
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

Making something with us?

For source files, retail materials or help choosing the right artwork, tell us what you have in mind.

Talk to our team

A little Kick’n’roll.In every detail.

A place for every element.

Smile avatar · Dark

Wordmark avatar · Mint

Wordmark avatar · Dark

Wordmark avatar · Square

Double highlight · Green

Single highlight · Amber

Star sticker · Purple

Smile symbol · White

Wave path · Single layer

Bend path · Compact

Zigzag path · 01

Bend path · Wide

Zigzag path · 02

Underline path · Double

Lamborghini · Gold shield

Social avatars · Reference

Path layout · Reference

No matching assets yet.

One language. Every detail matters.

Poppins Regular

Room to read.

Stay playful.Stay consistent.

Recognisable at every size.

Paths are compositions, not repeating patterns.

Use the right version for the setting.

Make the everyday easy to read.

Keep everyday controls quiet.

Let the story arrive in order.

A familiar little hello.

The name, clearly.

A smile in your tabs.

Useful, without the noise.

The same feeling. Everywhere.

Made to work together.

An accent with a purpose.

A little company.

A little room in the bag.

Shop & filters

Find Your Ride

Your bag

Checkout

Your account

Track your order

Our story

Tu propia forma de rodar.

¿Cuál es el suyo?

¿Quién se apunta?

kick'n'roll Flash Scooter

kick'n'roll Foal Balance Bike

kick'n'roll Buddy Balance Bike

Una comprobación rápida.

Altura y alcance

¿Sentado o de pie?

Los detalles del modelo

UPS

Make room for possibility.

Ready when you are.

Follow your curiosity.

A world to explore.

Take the next turn.

Good things, together.

More, when you need it.

Keep the row together.

No matching files.

Build the whole picture.

A little character.

Mint stays mint.

Making something with us?

A little Kick’n’roll.
In every detail.

Stay playful.
Stay consistent.

Make room
for possibility.