Modern vs Paper

Awesome Design Skills · Awesome Design Skills

Tied at 3/5 on the same brief. Pick by fit: the rows below show where each one is stronger.

Both built the Tally landing page in the same Claude Code test, and both design the Minimalist way: white space, one accent, and the confidence to leave things out. Both are best for: visual direction.

Modern3/5
After: Tally landing page, made with Modern (Awesome Design Skills)
Paper3/5
After: Tally landing page, made with Paper (Awesome Design Skills)

Scroll either page; the other follows.

Modern (Awesome Design Skills)

3/5

Modern gives Tally a deep purple hero with large light IBM Plex Serif headlines, JetBrains Mono labels and thin dividing lines. The dashboard uses a purple sidebar with the household switcher and white cards. It is calm and polished, and the purple keeps it away from the default look. Pick it for editorial-leaning product pages.

Paper (Awesome Design Skills)

3/5

Paper gives Tally a ledger feel: warm grainy off-white, black Montserrat headlines, Roboto body text, PT Mono labels and violet as the only accent. The landing hero is a budget sheet with a "synced" stamp and a taped-on note. It is tidy and has a small idea, but it stays close to a plain light page, and the mobile dashboard scrolls sideways. Pick it for calm, print-flavored products.

Side by side

FieldModern (Awesome Design Skills)Paper (Awesome Design Skills)
Fonts
  • IBM Plex Serif
  • JetBrains Mono
  • Montserrat
  • Roboto
  • PT Mono
Colors
  • #553f83 deep purple
  • #45326d dark purple
  • #fbfaf7 off-white
  • #ffffff white
  • #111111 ink
  • #eeeaf5 lilac
  • #f7f4ee paper
  • #efeae1 deep paper
  • #111111 ink
  • #8b5cf6 violet
  • #6d28d9 deep violet
  • #ffffff white
Pick it for
  • editorial SaaS
  • premium personal-finance brands
  • content-led products
  • calm dashboards
  • personal-finance and notes apps
  • calm SaaS
  • reports
  • simple dashboards
Skip it for
  • playful consumer apps
  • dark-mode products
  • dense admin tools
  • bold brands
  • dark-mode products
  • image-led marketing
Observations
  • dashboard: mostly white cards with little use of the purple beyond the sidebar
  • the paper texture is subtle, so it mostly reads as a plain light page
  • dashboard mobile: 546 px wide on a 390 px screen, so it scrolls sideways

How the brief works

Install Modern (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/modern#main .claude/skills/modern

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.

Install Paper (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/paper#main .claude/skills/paper

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.