Ship design workfrom principle to pixel

Free design tools and a copy-source UI kit. Learn UX rules and process, generate gradients and product visuals, extract tokens, export PDF, and install real components. No accounts, no paywalls.

Free foreverNo sign-in11 tools60 kit components
Open componentsBrowse Studio

Product tour

2880 x 1620

Intro

Default File is a set of focused design tools that turn practice into production, from principle to pixel.

Every view packs into a shareable link, so teammates open the same controls and leave with stills, tokens, PDF, or video.

No accounts, no paywalls, no lock in. Open a tool, make the thing, ship it.

Studio

Start with a tool.10 ready now.

Learn the rules, generate the assets, stage the shot, extract the tokens.
Every tool in the studio runs in the browser and exports something you can ship.

Browse Studio

Practice loop

One continuous loop.Learn, make, stage, export, install.

One path from a design question to a shippable asset, a staged product visual, or a component in your codebase.

Components

Polished by default.Every state, handled.

Accessibility, keyboard support, and motion are built in. 60 catalogue components power the tools on this site, from dock panels and tool rails to spectrum text and format toolbars.

  • Palette

    Color Picker
  • Intensity0.42
    Points8
    Number Slider
  • Floating Controls
  • Options Panel

  • Saved successfully

    Copied CSS variables

    Toast

  • Shader

    Detail

    Content Switcher

60 components with live demos, variants, and install paths.

Browse components

What's included

More than a kit.A complete working system.

Tokens, live controls, toolbars, and install paths. Default File UI is copy-source and importable.

Browse the catalogue

Components

Real controls, not placeholders

Pill tabs for tool modes and view switching.

Tokens

Color, type, radius, and motion scales

Ink
Muted
Card
Brand
Border
Accent

Shared scales keep tools and catalogue demos aligned.

Install

Registry path or package import

# Registry

itsvigneshv/default-file-ui/button

Installation guide

Toolbars

Panels, docks, and overlay hints

Drag to adjust · Esc to close

Built for product UI: floating controls, options panels, and instruction chips.

Outputs

Real files out.Stills, tokens, PDF, and video.

Leave with files and tokens you can drop into production, not screenshots of a demo. Stage Shot also exports WebP, MP4, and WebM.

  • SVG

    Vector exports that stay crisp at any size.

  • PNG

    Raster stills at 1x or 2x for decks and mocks.

  • JPG

    Compressed stills from shader gradients when you need smaller files.

  • CSS

    Variables and gradients ready to paste into styles.

  • JSON

    Token payloads for design systems and handoff.

  • PDF

    Paginated documents from markdown with tables kept intact.

Updates

Always improving.New features, fixes, and polish.

See all updates
Blur is computed in 32-bit float with a single dithered quantization, removing banding at the source.
Download exactly what the debanded preview shows, embedded as a crisp raster inside SVG or CSS.
Twenty harmonious palettes each for mesh and shader tools, validated for balanced color coverage.

Numbers

Counted, not claimed.Concrete numbers only.

Learn

28

UX principles with live, interactive demos.

Generate

40+

Curated gradient starting points across mesh and shader engines.

Kit

60

Catalogue components with demos, variants, and install paths.

  • 11 tools ready

  • 60 kit components

  • Stills, PDF, and video

  • 0 sign-ins required

Pricing

Free. Actually free.Everything included.

Every tool, every export, and the full component catalogue are free to use. No trials, no seats, no surprise upgrade wall.

  • All tools
  • All exports
  • Full kit catalogue
  • No accounts
  • No watermarks
Browse StudioBrowse the kit

FAQ

Common questions.Short answers.

Short answers about the tools, the kit, and what stays free.

Got questions?

Write to hello@defaultfile.com

Default File is a free set of browser design tools plus Default File UI, a copy source component kit. Use the Studio for UX learning, gradients, color systems, stage visuals, markdown export, and design extraction with AI. Install the kit into your own apps.
Yes. Assets you export from the tools are yours to use in commercial and personal projects. The UI kit ships under its own open source license on the package.
Tool state packs into the URL. Copy the address bar and a teammate opens the same view. Nothing is stored on a server for that share. Treat share links as public if they encode your configuration.
Stage Shot and Markdown Preview keep media and markdown on your device (browser storage or local file handling) unless you share a URL that encodes derived state. Design Extractor sends the image you choose to model inference when you run extraction. AI results can be wrong or incomplete, so verify them before use. We do not keep a durable cloud library of your uploads.
Open the catalogue, pick a component, and copy the registry path or package import. The Installation guide walks through foundation setup first. Create can scaffold a wired starter with one command.
Current versions of Chromium, Firefox, and Safari. Tools that use WebGL need a GPU capable browser; marketing pages stay CSS only.

Voices

What practitioners say.From idea to shipped, faster.

Designers and engineers use these tools to skip the busywork between a decision and a shippable asset, stage visual, or kit install.

“I stopped rebuilding the same gradients and token ramps for every project. Open a tool, export the asset, paste it in. The whole loop takes a minute.”

Placeholder voice

Product designer

Start free.Ship something today.

Practice a principle, stage a product shot, export a file, or install a component. Free either way.

Browse the kitBrowse Studio
Free foreverNo sign-in