# 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.

Start free Watch the demo
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.

Nudge By Tonik
Speedrun By a16z
Editorial By Atelier
Coral · landing By Studio Loop
Hush · agency By Atelier
Aurora · SaaS By North

— Pricing

## Pricing that ships.

Monthly Yearly · save 20%

### Basic

For getting a site live this weekend.

$0 / mo

Start free

- 1 site
- Frameworks subdomain
- Community templates

### Pro

For freelancers and small teams shipping client work.

$15 / mo

Get Pro

- Unlimited sites
- Custom domain
- Password-protected pages
- AI translate

### Business

For marketing teams running the site.

$30 / mo

Choose Business

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

### Enterprise

For the largest design organizations.

Custom

Talk to sales

- 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-xxl 110 / 500 / 0.85 / -5.5px · GT Walsheim The internet is
display-xl 85 / 500 / 0.95 / -4.25px Section opener
display-lg 62 / 500 / 1.00 / -3.1px Sub-section opener
display-md 32 / 500 / 1.13 / -1.0px Card title
headline 22 / 700 / 1.20 / -0.8px · Inter Pricing tier headline
subhead 24 / 400 / 1.30 Lead body next to display
body-lg 18 / 400 / 1.30 / -0.18px Hero subhead, lead paragraphs.
body 15 / 400 / 1.30 / -0.15px Default body. The brand voice depends on Inter's character variants.
caption 13 / 500 / 1.20 / -0.13px— Eyebrow / footer column
button 14 / 500 / 1.00 / -0.14px Get 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

button-primary button-secondary button-translucent

Pricing tabs — selected = lift, not color

Monthly Yearly

Inputs — blue ring is the only chromatic depth signal

text-input · default
text-input · focused

Cards — surface lift carries hierarchy

pricing-card

surface-1

Standard tier. 20px radius. 24px padding.

pricing-card-featured

surface-2 · lifted

Pro tier. Same shape — one surface step up. No chromatic outline.

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 ↗