PukoPuko
Sign in

Layerkit

A pixel-accurate design tool that ships real components, free forever.

Business · Obsidian & Amber · Archivo Black / Archivo · motion editorial

Start with this look
LLayerkit

Design at the pixel. Ship the component.

A canvas that snaps to a four-pixel grid and exports code that matches it. No handoff, no redlines, no dependency you did not choose.

Start free
  • No credit card
  • Free forever
  • Open source core
Vibrant workstation setup for photo editing with RGB lighting and large monitor displaying an edited portrait.

The system

  1. Pixel-accurate design system

    Every token, spacing step and radius lives on a four-pixel grid, and the export honours it

  2. Zero dependency

    Exported components import nothing but React. Swap the framework and the export follows

  3. Dark mode first

    Every component is drawn in both themes at once, and both are tested before you see them

Three steps to production

  1. Install the system

    One command adds the tokens and the base components to your repository

  2. Compose your UI

    Draw on the canvas, or write it, and both stay in sync

  3. Ship to production

    Export is a pull request. Review it like any other

One quote

01 / 01

The first tool where what the designer drew is what the browser rendered. Our handoff meeting is gone.
Tanvi SoodDesign Lead, Northgate Pay

Live

  1. Real-time collaboration

    Cursors, comments and edits from the whole team, on the same canvas, with no lag we can measure

  2. Version control

    Every change is a commit. Branch a design, merge it, or revert to Tuesday

  3. Plugin ecosystem

    Four hundred plugins, written in TypeScript against a documented API, reviewed before listing

Layerkit or the usual tools

LayerkitOthers
Pixel gridEnforced, four pixelsOptional, and off by default
Code exportReal components, no dependenciesGenerated markup to rewrite
Version controlGit-style branches and mergesA history panel
PriceFree forever for individualsA seat, a month, forever
SourceCore is openClosed

Showcase

Four things built in Layerkit and shipped as they were drawn.

01 / 04

  • A person writing on a notepad while holding a smartphone with a green screen, ideal for mockups.

    Axiom component library

    Fernhill · 140 components, exported and in production in a fortnight

  • Close-up of hands typing on a laptop next to a cup of coffee on a wooden desk.

    Forge analytics dashboard

    Quillstack · Dark and light themes from one canvas

  • A creative mood board with business touchpoints and inspirational images taped to a white wall.

    Meridian onboarding flow

    Orbital Grid · Twelve screens, versioned like code

  • Curved monitor screen showing ChatGPT interface in low-light, focus on technology and AI.

    Halyard design system

    Halyard · The whole system rebuilt on the four-pixel grid

FAQ

Questions

  • For individuals, yes, forever. Teams pay for shared libraries, SSO and support.

Pricing

Free for one person, always. Teams pay per editor.

  1. Free

    ₹0/month

    Billed monthly

    • Unlimited files
    • Full export
    • Community plugins
    • No shared libraries

  2. Builder

    ₹1,200/editor/month

    Billed monthly

    • Shared libraries
    • Branching and merging
    • Private plugins
    • Email support

  3. Studio

    ₹3,600/editor/month

    Billed monthly

    • SSO
    • Audit log
    • Dedicated support
    • Custom export targets
Compare plans
Palette
Obsidian & Amber
bold · modern · editorial
Type and roundness
Archivo Black / Archivo
sharp corners · flat elevation
Motion and fit
Editorial
wipe · 0.85s · business, clinical, professional