This editorial ui kit borrows from print: serif headlines, hairline rules, sharp corners and warm paper colors. It suits products that read more like a magazine than an app.

What is included

• Ink black buttons with outline, ghost and danger variants in five states and three sizes
• Line bordered fields, textarea, select menu, checkbox, radio, toggle and slider
• Content, stat and profile cards with square corners, flat alerts, a toast and a modal
• An article card with a label, headline, byline and read time, a pull quote and a newsletter box
• Navbar, tabs, breadcrumb, pagination, avatars and an accordion

Where to use it

Use it for blogs, newsletters, publishing tools, portfolios and long form landing pages where reading comes first.

Design notes

Headlines use Instrument Serif and body text uses Inter. The paper color is #F7F3EA, cards are #FFFDF8 and the single accent is terracotta #B3472A. There are no shadows. Structure comes from 1 px ink lines and white space, and every corner is square except avatars.

Built for editing

Spacing sits on a 4 point grid and layers have clear names. Fonts are free on Google Fonts (Instrument Serif and Inter) and every color is a fill you can change in the fill panel. Text sizes stay at 12, 14, 16, 20 and 36 px, so the scale is easy to follow.

How to use it

Copy the kit with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. Install the free Google Fonts first so the text looks the same.