Identity & web design

Pufflet

A cloud-hosting identity and website concept that makes a technical first step feel approachable—without hiding what a builder needs to know.

Focus: Brand identity · Website UI/UX · Mascot applications
Status: Design concept
Design: 2026

Make the first step feel smaller.

Cloud hosting often starts with vocabulary before it starts with a person’s project. Pufflet asks a simpler question: what are you trying to put online? The direction pairs a friendly identity with a clear entry flow, leaving the technical choices available when they become useful.

A cloud with a little character.

The turtle makes the cloud tangible. Its soft shell and sturdy little body suggest a place to carry a project, while the rounded lowercase wordmark keeps the identity direct. The mark needs to work before colour or motion is added.

Supplied colour identity. Original vector geometry.

Original Pufflet identity in a monochrome outline treatment — Supplied monochrome identity, not an exploratory sketch.

Playful at the edges. Clear at the centre.

Ink carries text and controls. Cream gives the page a softer base. Lime, lavender and pink belong to the character and supporting moments, not every action. The website uses sturdy sans-serif type so the mascot never has to carry the interface’s hierarchy.

Ink

#101425

Cream

#F4EFE6

Lime

#B4F28B

Lavender

#8B78F8

Pink

#FF4F91

A website built around the way you arrive.

The opening establishes the feeling, then quickly gets practical. Repository, files and container are different entry paths—not three plans to compare. Try switching the path below. This responsive design study keeps the first decision visible and explains the next step without pretending to connect or deploy anything.

Website concept

A softer way to ship

Big ideas.
Little friction.

Your next side project deserves a home. A friendlier front door to cloud hosting, made for people who love making things.

Find your starting point

Pufflet’s original lime turtle with a cloud-shaped shell

Make something
worth sharing.

Start with what you have

One calm first step.

Different projects need different paths. Choose yours before the technical details appear.

From your repo to a new home.

Connect a project. Review the build settings. Publish when you’re ready.

Review your project Confirm the settings Publish with confidence

Less setup.
More making.

A product direction, not an active hosting service.
No account or deployment is created in this study.

One mascot, different contexts.

The identity can feel loud on a campaign surface and quiet inside a product. The stacked lockup gives the character more room; the dark variant keeps the same outline readable when the background changes. Neither requires a different mascot.

Stacked identity for compact applications.

Supplied Pufflet identity in white and lime on a navy background — Dark-background identity application.

Let friendliness support the task.

A recognisable welcome

The character introduces the product. It stays away from the path selector and critical instructions.

Progressive detail

A builder chooses the starting material before meeting configuration. The interface does not assume everyone arrives with a repository.

A mobile reading order

On small screens the promise, action and mascot stack in that order. Entry-path controls remain full-size tap targets.

Warmth is useful when it reduces hesitation.

The next design test is not whether people like the turtle. It is whether they can choose a path, understand what happens next and recover from an unsuccessful build. This concept establishes the identity and entry experience; service behaviour, error recovery and usability testing remain future work.