Overview
The collection
UNEXPECTED INTERACTIONS. INDEPENDENT SPIRIT.

A little less ordinary.

A growing collection of 48 expressive components.
Start with an experiment. Take the source. Make it yours.

Free for your next great idea.MIT licensed
Explore full preview

Frame Morph Hero

One composition, three perspectives. A portrait window becomes a panorama, then the whole scene, while type, crop and project details move with it.

HeroesNew View code
Explore full preview

Editorial Hero

Oversized typography, an asymmetric image, and a clear invitation to read on. A quiet opening for studios and independent publications.

HeroesNew View code
Explore full preview

Showreel Hero

Give a film a proper introduction. A cinematic poster, considered typography, and a native video viewer visitors choose to open and play.

HeroesNew View code
Explore full preview

Product Spotlight Hero

An image-led product configurator. Change the finish, inspect another view, and compare models with a live price and dimensions.

HeroesNew View code
A LITTLE FORWARD MOMENTUM01 / BUTTON STUDIES

Good things ahead.

One label. A new direction.

HOVER · FOCUS · PRESS

Arrow Capsule Button

A clear call to action with a circular arrow that slides into its next direction.

ButtonsNew View code
TYPE, WITH A LITTLE PERSONALITY02 / BUTTON STUDIES

Words worth moving.

A small shift in perspective.

HOVER · FOCUS · PRESS

Rolling Text Button

A typographic button whose letters roll into place, one small detail at a time.

ButtonsNew View code
LET THE COLOR IN03 / BUTTON STUDIES

Room for a little more.

A tiny point. A full invitation.

HOVER · FOCUS · PRESS

Circle Fill Button

An outlined pill that fills with color from a small point at its edge.

ButtonsNew View code
AN OPENING FOR GOOD IDEAS04 / BUTTON STUDIES

Make an entrance.

Two panels. One clear action.

HOVER · FOCUS · PRESS

Shutter Button

Two diagonal panels meet behind the label for a confident, architectural click.

ButtonsNew View code
ATTENTION TO THE FINER DETAILS05 / BUTTON STUDIES

Follow the feeling.

A line that finishes the thought.

HOVER · FOCUS · PRESS

Outline Trace Button

A fine accent line draws around a restrained button, with a quiet arrow lift.

ButtonsNew View code
A LITTLE MORE HANDS ON06 / BUTTON STUDIES

Made to be pressed.

Press it. Feel the difference.

HOVER · FOCUS · PRESS

Tactile Button

A raised key with a mechanical press, a steady base, and a satisfying release.

ButtonsNew View code

folio®EXAMPLE WORKSPACE

ROOM TO GROW

Make room for more.

Starter

A little structure for your next big idea.

$12 / month

Billed monthly
  • 3 active projects
  • Your own workspace
  • Unlimited notes
Explore Starter

Scale

A shared home for a growing company.

$59 / month

Billed monthly
  • Unlimited projects
  • 20 team members
  • Workspace permissions
Explore Scale

Compare plans and see what’s included.

FOLIO / EXAMPLE PLAN DETAILS

Example plan details

Plan workspace

Pricing Plans

A considered pricing section with monthly and annual billing, honest savings, and a clear next step for every plan.

SectionsNew View code

folio®EXAMPLE WORKSPACE

MADE FOR YOUR EVERYDAY

Less scattered. More together.

ONE SHARED HOME

See the work, at a glance.

Bring projects, notes, and next steps into one calm workspace.

BETTER TOGETHER

Make room for your team.

Share a project and keep everyone working from the same page.

A CLEARER WEEK

Know what’s coming next.

Keep reviews and milestones close to the work they belong to.

FIND YOUR FLOW

Less looking. More doing.

Find the document you need, then get back to the good part.

Product benefits, with a preview of how they work.

Feature Bento

Show what your product makes possible. A flexible feature grid that pairs concrete benefits with useful visual previews.

SectionsNew View code

Product Gallery

Show the product from every useful angle. Thumbnail navigation and an expanded image viewer, built for detail pages and collections.

CardsNew View code

EXAMPLE STUDIO TEAM

THE PEOPLE BEHIND THE WORK

A few good people.

Mira Patel

Strategy & direction

Mira helps teams find the clearest version of their story. She brings audience research, thoughtful questions, and a practical plan to every new project. Before a design takes shape, she works with clients to understand the people it needs to serve. Her work connects a brand’s ambition to the decisions a visitor makes on a real website.

Daniel Park

Product & design

Daniel turns complex ideas into calm, useful experiences. His work moves between visual systems, product details, and the everyday paths people take through a website. He cares about clear hierarchy, strong typography, and giving the content room to do its job. He works closely with engineers so that the finished product feels as considered as the first design.

Sofia Reed

Creative engineering

Sofia brings ideas to life through accessible, resilient interfaces. She builds the details that make a site feel responsive, from image galleries to well-labeled forms. Her approach starts with a useful foundation, then adds motion where it helps someone understand a change. She makes sure the experience works just as well with a keyboard, on a phone, and at a slower connection.

MEET THE TEAM

Team Grid

Introduce the people behind the work. Portrait cards with useful roles, short introductions, and a full profile a visitor can open.

SectionsNew View code

HOW WE GET THERE, TOGETHER.Scroll through the four stages ↓

THE PROCESS

A good process. A better outcome.

04 stages
  1. 1 week

    Discover

    We ask the right questions, get to know your audience, and agree on what success looks like before the first pixel.

    • Workshop
    • Audience insights
    • Project brief
  2. 2 weeks

    Design

    We shape the story, explore a visual direction, and turn it into a prototype your team can click through and discuss.

    • Art direction
    • UI system
    • Clickable prototype
  3. 2 weeks

    Build

    The approved design becomes a fast, responsive website. We connect your content and check the details on real screens.

    • Development
    • CMS setup
    • Device testing
  4. 1 week

    Launch

    We make the final checks, show your team around, and get the site into the world with a clear plan for what comes next.

    • Quality assurance
    • Team training
    • Launch support

ONE CLEAR DIRECTION. EVERY STEP OF THE WAY. ↗

Process Timeline

Make your process easy to understand: readable stages, clear deliverables, and a visual that follows each phase as visitors scroll.

SectionsNew View code

Project Grid

A portfolio section that earns its space: filter by discipline, scan the work, and open the full case study.

SectionsNew View code

Project Preview List

An editorial project index with real case-study links, artwork on focus, and useful thumbnails on small screens.

SectionsNew View code

Good ideas. Built together.

Find the clearest expression of who you are, what you do, and why it matters to the people you want to reach.

  • Positioning
  • Audience insight
  • Brand narrative
See the Kin story

Choose a service to see what’s included.

ANTICRAFT / EXAMPLE JOURNAL

Service Showcase

A clear, considered way to explain what you do. Switch between services, capabilities, and the work behind them.

SectionsNew View code

Article Rail

Give your journal a place on the homepage. Image-led article cards with useful metadata and a touch-friendly reading rail.

SectionsNew View code
EXAMPLE CLIENT STORIES

Real words. Better work.

Customers can find the right bag and see the details that matter. The storefront finally feels as considered as the products.

Mira PatelFounder, KIN

Browse three example client stories.

Testimonial Slider

Give client stories room to speak. A portrait-led testimonial section with clear controls and no automatic cycling.

SectionsNew View code

Scratch Reveal

A little curiosity pays off. Scratch a foil surface and uncover a print worth finding.

ExperimentsNew View code

Pixel Swap

Switch between product views, project images, or campaign artwork with a pixel wipe.

ExperimentsNew View code
BLUE HOUR / FIELD STUDY 006≈
38° 42′ N
A MOMENT OF STILLNESS

Go with
the flow.

A small movement can change everything.

Ripple Field

A quiet pool for your next idea. Move across the surface and leave a passing ripple.

BackgroundsNew View code

Before / After

Two points of view, one surface. Pull a fine line between what was and what could be.

CardsNew View code
ANTICRAFT
DEPARTURES
OPEN TICKETS
HERESOMEWHERE GOOD
NEXT DESTINATION AC 001ALL GREAT THINGS BEGIN WITH GOING.
NEXT DEPARTURE: WHENEVER YOU’RE READY.Selected departure: Stay curious.

Split Flap

Good things are on their way. A mechanical departure board with hinged letters and a cascading flip.

TypographyNew View code

Floating Dock

A little lift for every destination. Icons grow and make room as your pointer passes.

NavigationNew View code

Sliding Nav

An ink pill that follows your attention, then settles back on the place you call home.

NavigationNew View code

Expanding Menu

One compact capsule unfolds into an editorial index. A small entrance to a bigger world.

NavigationNew View code

Radial Nav

A constellation of destinations around one central idea. Open up and choose a direction.

NavigationNew View code

Curtain Menu

Give navigation the whole stage. A sweeping curtain makes way for oversized destinations.

NavigationNew View code
LEAVE THE ORDINARY BEHIND.

Make a
little scene.

+01 / X
+02 / Y
MOVE THROUGH THIS SPACE. LEAVE SOMETHING GOOD.

Cursor Trail

Leave a little art wherever curiosity goes. A trail of prints that follows your next move.

ExperimentsNew View code

Drag a poster left to advance or right to go back, then release to throw. Use the left and right arrow keys, Home, or End. The collection repeats.

Throw Stack

Ideas worth throwing around. Grab the top print, flick it aside, and see what’s next.

ExperimentsNew View code
A LITTLE GIVE. A LOT OF CHARACTER.

MAKE

WAVES.

Elastic Type

Give your words a little give. Letterforms stretch, lean, and spring back around the pointer.

ExperimentsNew View code
Pull the bottom-right corner inward, or activate the cover to reveal its contents.

Peel Reveal

A little curiosity goes a long way. Peel back a paper corner to discover what’s underneath.

ExperimentsNew View code

Orbit Gallery

Put your work into orbit. Spin a dimensional wheel of posters, projects, or ideas.

ExperimentsNew View code

Move across the print, or adjust the viewing angle.

Lenticular Panel

Two artworks. One surface. A ribbed print that changes its mind as you move across it.

ExperimentsNew View code
Drag to arrange. Or use arrow keys to move, Shift and arrows for larger steps, left and right brackets to rotate, and Home to restore this sticker.

Sticker Field

A freeform collage you can pull apart, throw around, and make your own.

ExperimentsNew View code

After-dark experiments

Good ideas rarely keep office hours.

Spine Archive

A shelf of physical project sleeves. Pull a spine into focus and reveal its story.

ExperimentsNew View code

Scroll inside this story to change its format. Use the chapter buttons, arrow keys, Home, or End to navigate. Every idea starts with a frame.

01 / PORTRAITA different perspective.

Morphing Stage

One story, changing proportions. Scroll through a stage that shifts its shape around your ideas.

ExperimentsNew View code
A LITTLE ATMOSPHERE GOES A LONG WAY

A space
to dream.

Light, with a life of its own.

Aurora Background

A moving wash of light that gives your next big idea its own atmosphere.

BackgroundsNew View code
AN INVITATION TO INTERACT
Move your pointer. Feel the pull.

Magnetic Button

A tactile button with a soft magnetic pull. Go on, get a little closer.

Buttons View code
ONE WORD AT A TIME

Good things take motion.

A staggered entrance.

Split Text

An expressive word-by-word reveal for headlines that deserve an entrance.

Typography View code
COLOR OUTSIDE THE ORDINARY

Stay a little
different.

A brighter turn of phrase.

Gradient Text

A flowing spectrum of color for a few words you want to make unforgettable.

TypographyNew View code
A BRIGHTER KIND OF CARD✳

Less ordinary.

Find your light.

Spotlight Card

A quiet surface that lights up wherever curiosity takes the pointer.

ANTICRAFTDIGITAL OBJECTS
COLLECTION 001
A different
perspective.
Move around. See it differently.

Tilt Card

A gentle shift in perspective that makes a flat card feel like an object.

GOOD IDEAS DESERVE THE SPOTLIGHT

Made to
stand out.

A little glow. A lot of character.
Follow the finer details.

Border Beam

A fine trace of light that travels around a surface and brings its edges to life.

CardsNew View code
THOUGHTS IN CONSTANT MOTION
STAY CURIOUS ✳
MAKE SOMETHING ↗
A little momentum goes a long way.Hover to pause.

Marquee

An endless rhythm of words, logos, or cards with just the right amount of energy.

THE ART OF THE DETAILS

Small details.
Big difference.

Copy the source. Change every detail. Make something only you could make.

Editorial Accordion

Big type, fine rules, and room to breathe. A more considered way to tell the story.

48 OF 48 COMPONENTSAN OPEN COLLECTION. A WORK IN PROGRESS.