Little Worlds Games / Website kit 01

A kit for
worlds with character.

The reusable identity, components, and page patterns behind this site. Everything in one portable package.

01 / Studio identity

A window into a little world.

One quiet studio identity frames very different games. The simple arched mark stays readable at small sizes; the detailed illustrations do the storytelling.

02 / Palette

Warm, calm, and a little playful.

Forest#163F3A
Ivory#F6F1E7
Honey#E8B35F
Coral#D87557
Sage#748A73

Forest and ivory carry text and navigation. Honey, coral, and sage are accents. Game artwork keeps its own palette.

--paper: #F6F1E7;
--ink: #163F3A;
--honey: #E8B35F;
--coral: #D87557;
--sage: #748A73;
--serif: 'LWG Bookman', Georgia, serif;
--sans: Arial, Helvetica, sans-serif;

03 / Type

Personality in the headline.
Clarity in the details.

Little worlds.
Big personality.

Bookman gives the studio its warm display voice. System sans keeps body copy, labels, and controls straightforward.

A small window. A world of possibility.

Local Bookman font files, licence text, outlined logo masters, and editable source are included.

04 / Actions & navigation

Clear next steps.

Discover a world In development

Filter selection

Keyboard focus, hover, disabled, selected, and reduced-motion states are part of the stylesheet. The live catalogue includes working search and filters.

05 / Icon family

Small details, one language.

arrow-right
arrow-left
arrow-up-right
chevron-right
chevron-down
menu
close
download
external-link
search
play
pause
worlds
spark
check
copy
info
grid
filter
mail

20 independent SVGs. 24 px grid, rounded 1.75 px strokes. Colour follows the surrounding text.

06 / Feedback & status

Keep people oriented.

✓
Ready to downloadYour file is available.
i
In developmentThis world is still taking shape.
!
Work in progressDetails may change as the project develops.
!
That didn’t quite workTry again, or return to the previous page.

These are component examples. The website has real catalogue empty states, a missing-page screen, and confirmation feedback for copy actions.

07 / Reusable patterns

A consistent frame.

How does the mobile navigation work?

At narrow widths, navigation moves behind a labelled menu button. The button announces whether the menu is expanded; Escape closes it and returns focus.

What changes for reduced motion?

Decorative transforms, animations, and smooth scrolling are disabled when the visitor requests reduced motion.

08 / Page library

Ready to explore.

09 / Developer handoff

One complete package.

Use little-worlds-website-kit-01.zip. It contains the portable site, source artwork, brand assets, design tokens, page generator, and handoff documentation. The media ZIP is an optional subset for sharing art and logos.

The site uses plain HTML, CSS, and JavaScript. There is no framework dependency, analytics script, mailing-list backend, or payment flow. Project text is editable in the page generator and exported content data.

The hosted version is a private review site. Connecting littleworldsgames.com, choosing a public audience, and adding any future signup service are separate launch steps.