Modern (Awesome Design Skills)

3/5 out of 5. Read the verdict

A contemporary editorial style with serif type, minimal palettes and clean layouts. From bergside's Awesome Design Skills.

Modern (Awesome Design Skills)
After: Tally landing page, made with Modern (Awesome Design Skills)
Baselineno skill installed
Before: Tally landing page, no design skill

Scroll either page; the other follows.Full Modern (Awesome Design Skills) pageFull baseline

Every skill gets the same Tally brief, alone in a clean project. How we test

Our verdict

3/5 out of 5

Passed the cut

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.

Pick it for

  • editorial SaaS
  • premium personal-finance brands
  • content-led products
  • calm dashboards

Skip it for

  • playful consumer apps
  • dark-mode products
  • dense admin tools

Observations

  1. dashboard: mostly white cards with little use of the purple beyond the sidebar

Install

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.

We installed the modern folder from this repo.

Details

Type
Skill
GitHub stars
3,255*
Updated
4mo ago
License
MIT
Source
GitHub (opens in a new tab)

Test runOpus 5.5Claude Code 2.1.303Oct 18, 2026generated in 5 minabout $1.09 at API pricescommit f631a09

* Stars are for the whole bergside/awesome-design-skills repository.

Made this skill?Put your score on your README, and claim this page for a link to your site.

1. Put your score on your README

Tested on Skills for Design: 3 out of 5 [![Tested on Skills for Design: 3 out of 5](https://skillsfordesign.com/badge/awesome-design-skills-modern.svg)](https://skillsfordesign.com/s/awesome-design-skills-modern/)

The badge links here. If a retest changes the score, it updates by itself.

2. Claim this page

Get a free backlink to your site.

  • A followed link, not nofollow. From the page about your skill, on a site about design skills, to your portfolio, product or studio. Search engines count it.
  • Your name on the page. Credited as the maker, right under the description, where every visitor sees it.
  • Free. Usually live within a few days.

How it will look

We check that you maintain the repo, then add your name and link, usually within a few days. Privacy

Similar

Same brief, other skills

Also for these tasks

Passed, score 3 out of 5

Flat (Awesome Design Skills)

Skill · Visual directionGitHub stars 3.3k

Flat gives Tally solid color blocks with no shadows or gradients: Inter type, a bright tangerine, tinted feature cards and an orange "how it works" band. The dashboard uses a dark sidebar and one tangerine tile for "Left to budget", with a bright color per envelope. It is clean and cheerful. Pick it for friendly products that want a simple, flat look.

updated 4mo ago

Passed, score 3 out of 5

Refined (Awesome Design Skills)

Skill · Visual directionGitHub stars 3.3k

Refined gives Tally a quiet editorial page: Playfair Display headlines, JetBrains Mono figures, white and warm off-white with thin lines and one deep blue accent. The dashboard uses Playfair for big numbers and keeps color to blue and red. It is clean and calm, though it is a familiar look. Pick it for understated premium products.

updated 4mo ago

Passed, score 3 out of 5

Sleek (Awesome Design Skills)

Skill · Visual directionGitHub stars 3.3k

Sleek gives Tally a light, minimal page: Inter, a neutral palette with one blue accent and an 8px grid. The dashboard puts a dark "Left to budget" card at the top of pale slate cards. It is tidy and readable, but generic. Pick it as a clean neutral base.

updated 4mo ago

Passed, score 3 out of 5

Square (Awesome Design Skills)

Skill · Visual directionGitHub stars 3.3k

Square gives Tally lots of white space, light large Google Sans headings, Anonymous Pro figures and a blue accent with violet touches. The dashboard puts a dark "Left to budget" card first, with red and amber for status. It is polished but generic. Pick it as a clean, light base.

updated 4mo ago

3/5 · passedInstall