One Framer folder can now hold a component, a color and a curve

Tooling

Framer's Assets panel trades fixed sections for folders you name

Framer updates, October 26, 2026

Framer's Asset Panel Refresh removes the fixed sections that split a project's library by kind. Components, colors, text styles, code overrides and vectors can now sit in the same folder, arranged the way the project actually divides.

The update also brings agent support to the panel: Framer Agents can organize and manage assets when asked. Framer opened its sites to fifteen outside apps last week; this one keeps the help inside the editor.

A folder named for the pricing page can now hold the plan card, its two colors, the price text style and the override that swaps currency.

The entry does not say how an agent decides where things go. Name the folders yourself before handing over the tidying, so the filing follows your scheme rather than one it invents.

Shipped

October 26, 2026, on Framer's updates page

Kinds that mix

Components, Colors, Text Styles, Code Overrides, Vectors

Who files

You, with custom folders, or Framer Agents on request

Not stated

Nesting depth, search, or plan limits

Technique

Penpot makes the case for drawing layout in CSS's own terms

Penpot blog, October 20, 2026

In Declarative design with Penpot, Laura Kalbag tours features Penpot already ships rather than a release. Flex and Grid layouts are edited with the same properties CSS uses (direction, alignment, justification, wrap), and grid cells can span rows and columns or take named areas.

Design tokens follow the DTCG format with aliases. Her example composes a body.strong typography token from separate family, size, weight and line height tokens, and the Inspect tab shows the result as CSS, HTML or SVG.

{
  "body": {
    "strong": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": "{font.size.base}",
        "fontWeight": "{font.weight.bold}",
        "lineHeight": "{line.height.body}"
      }
    }
  }
}

A composite DTCG token of that shape: every value is an alias to a smaller token.

Workflow

Give the site a print stylesheet before a client presses print

brennenputh.me, October 24, 2026

Brennen Puth argues in Websites Should Be Printable that a page should survive a trip to paper, and shows the rules his own blog uses. An onlyPrint class appears only inside the print media query, a noPrint class hides the chrome, and type switches to points, from 12pt for paragraphs and lists up to 16pt for the top heading.

Links turn black so they still read in grayscale and code blocks get a 3px black border. He admits code blocks still break badly across pages, which is the honest part: print CSS is a pass worth an hour, not a solved problem.

@media print {
  .noPrint   { display: none; }
  .onlyPrint { display: inline; }
  p, ol      { font-size: 12pt; }
  h2         { font-size: 14pt; }
  h1         { font-size: 16pt; }
  a          { color: black !important; }
}

Condensed from the rules in the post.

Build a SaaS feature launch page laid out as the product's own design editor: three panes, with the page's sections as frames on a canvas.

1. Layout: a 52px dark toolbar (brand, centred file name, three nav links). Below it a three-column grid: a 252px sticky asset tree on the left, a canvas in the middle, a 264px sticky inspector on the right. Both side panes are full-height, dark (#1C1427), scroll on their own and use a monospace face at 13-14px.
2. Canvas: a flat saturated grape violet field (#4B2A78) with faint topographic contour lines in pale lavender at about 17 percent opacity as an SVG background. No gradients, no glow. Each section is a frame: an off-white board (#F6F2EA, 4px radius, 48px by 56px padding, max 760px wide) with a small tab above its top-left corner holding a number, the frame name and a kind word. The hero frame runs wider (960px): a full-width headline, then two columns of deck, an inline byline sentence (issue number, weekday, date, read time) and two actions beside a 3:2 illustration.
3. Asset tree: native details/summary folders, one per section, open by default. Inside each folder, rows of mixed kinds link to anchors on the page. Every row is a grid of an 18px kind glyph, a name and a small kind word (Text, Color, Component, Code, Vector, Image). Glyphs: a rotated square outline for components, a filled circle in the real color for colors, "Aa" for text styles, braces for code, a short curve for vectors.
4. Inspector: a dl for the current frame (name, source link, date, kind) plus a kinds legend. A small IntersectionObserver marks the frame in view: its board gets a 2px chartreuse (#D4EC4A) outline offset 6px, its tab turns chartreuse with ink text, its tree folder highlights and the inspector updates.
5. Type: Chivo Mono 700 for the headline, 500 for section heads, 400 for labels and UI; Piazzolla for reading at 19px, line-height 1.7, about 66 characters per line. Italic Piazzolla in deep violet (#5B3594) for emphasis and one pullquote under a 2px violet rule.
6. One inverted dark frame holds the reusable pattern with a live By job / By kind segmented control (two radio inputs, switched with :has()) that re-sorts the same seven assets.
7. Below 1280px drop the inspector; below 1024px hide the tree and show a sticky horizontal strip of section links; below 760px stack every two-column block, with the hero image between headline and deck.
8. Guardrails: body text never under 18px, line-height at least 1.6, WCAG AA contrast for every label on its actual surface, no fake search fields or dead toggles, no pill-shaped everything, no neon or glow, no purple-blue gradients, no readable text inside images, hover and focus states at 150ms with a prefers-reduced-motion guard, and a print stylesheet that hides the panes.

Show the full prompt

Works in Framer, Figma Make, v0, Lovable, Webflow, Claude Code and Beaver Builder AI.