The internet is your canvas.

Frameworks is a design tool that publishes. Drag elements, ship the URL. No handoff, no exports, no waiting on engineering for your hero copy.

frameworks.co/canvas
Design out loud. A page made by dragging, not exporting.
Get started →
CTA

— Built for shipping

A canvas that publishes.

Every block on this page is the same kind of layer you'd drag into a Frameworks artboard. Drag, drop, ship — no exports.

Atmosphere

One canvas. One URL. Zero handoff.

Designs that publish themselves. The artboard IS the website — no exporting, no engineering ticket, no Friday-night handoff document.

AI

Localize a page in a click.

Translate any layer into 30 languages without breaking the layout.

Templates

Start where the best ones do.

Hundreds of free templates from the community. Remix, then ship.

Performance

Pages that pass Core Web Vitals.

Lazy-load images, optimized fonts, edge cache — production-grade out of the box, with no <script> you have to write.

— Built with Frameworks

Sites shipped this week.

NudgeBy Tonik
SpeedrunBy a16z
EditorialBy Atelier
Coral · landingBy Studio Loop
Hush · agencyBy Atelier
Aurora · SaaSBy North

— Pricing

Pricing that ships.

Monthly Yearly · save 20%

Basic

For getting a site live this weekend.

$0 / mo

  • 1 site
  • Frameworks subdomain
  • Community templates

Business

For marketing teams running the site.

$30 / mo

  • Everything in Pro
  • 5 editor seats
  • Roles & permissions
  • Staging environments

Enterprise

For the largest design organizations.

Custom

  • SSO + SCIM
  • Audit log API
  • Dedicated CSM
  • Premium support

— Questions

Frequently asked.

Do I need to know code?

No. The canvas is the artifact — there's nothing to export.

Can I use my own domain?

Pro and above include custom domain mapping with auto-HTTPS.

How do collaborators work?

Business adds 5 editor seats with roles and permissions; Enterprise scales to unlimited with SSO.

What happens to my site if I cancel?

It moves to a Frameworks subdomain. You keep editing on Basic, or export the published HTML at any time.

— Design system

The poster, the canvas, the ring.

Source: DESIGN.md. Dark canvas. GT Walsheim display (Manrope substitute). Inter Variable body with character variants. Aggressive negative letter-spacing. One blue accent, four gradient spotlight cards.

Color

Anchor surfaces — canvas + lift

primary / inverse-canvas
#ffffff
canvas
#090909
surface-1
#141414
surface-2
#1c1c1c
hairline
#262626
hairline-soft
#1a1a1a

Text — binary hierarchy

ink
#ffffff
ink-muted
#999999
accent-blue · signal-only
#0099ff
semantic-success
#22c55e

Gradient spotlight family — the brand atmosphere

gradient-violet
#6a4cf5 · most common
gradient-magenta
#d44df0 · pink-magenta
gradient-orange
#ff7a3d · sunset wash
gradient-coral
#ff5577 · coral-pink

Typography

GT Walsheim Medium is Frameworks's proprietary display face — Manrope at weight 500 is the closest open-source substitute, with negative letter-spacing applied as a percentage of size (~5% at display, ~1% at body). Inter Variable handles the body, with character variants cv05, cv09, cv11 and stylistic sets ss03, ss07 enabled.

display-xxl110 / 500 / 0.85 / -5.5px · GT WalsheimThe internet is
display-xl85 / 500 / 0.95 / -4.25pxSection opener
display-lg62 / 500 / 1.00 / -3.1pxSub-section opener
display-md32 / 500 / 1.13 / -1.0pxCard title
headline22 / 700 / 1.20 / -0.8px · InterPricing tier headline
subhead24 / 400 / 1.30Lead body next to display
body-lg18 / 400 / 1.30 / -0.18pxHero subhead, lead paragraphs.
body15 / 400 / 1.30 / -0.15pxDefault body. The brand voice depends on Inter's character variants.
caption13 / 500 / 1.20 / -0.13px— Eyebrow / footer column
button14 / 500 / 1.00 / -0.14pxGet started for free

Radius

An unusually granular ladder: 4 → 100px pills + full circle. 20px is the default card; 30px is reserved for gradient spotlight cards so they read as atmospheric panels, not tighter UI.

xs
4 · chips
sm
6 · tags
md
10 · inputs
lg
15 · templates
xl
20 · pricing
xxl
30 · spotlight
pill
100 · CTA
full
∞ · icon

Components

Buttons — pill is the brand vocabulary

Pricing tabs — selected = lift, not color

Monthly Yearly

Inputs — blue ring is the only chromatic depth signal

Cards — surface lift carries hierarchy

pricing-card

surface-1

Standard tier. 20px radius. 24px padding.

gradient-spotlight-card

Atmosphere · not background.

30px radius. One per long page. Three is a moodboard.

Pills — the only button shape

primary secondary translucent accent-blue · signal hyperlink
View DESIGN.md ↗