Premium vs Square

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.

Premium3/5
After: Tally landing page, made with Premium (Awesome Design Skills)
Square3/5
After: Tally landing page, made with Square (Awesome Design Skills)

Scroll either page; the other follows.

Premium gives Tally the clean, bright SaaS treatment: white and light grey surfaces, Inter throughout, a bright blue accent and a dark closing panel. The dashboard is tidy and well spaced, with a donut gauge and blue bars. Nothing is wrong with it, but it looks like many fintech sites. Pick it if you want safe, polished and current.

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.

Side by side

FieldPremium (Awesome Design Skills)Square (Awesome Design Skills)
Fonts
  • Inter
  • JetBrains Mono
  • Google Sans
  • Plus Jakarta Sans (landing)
  • Anonymous Pro
Colors
  • #ffffff white
  • #f5f5f7 light grey
  • #111827 ink
  • #3b82f6 blue
  • #1d4ed8 deep blue
  • #8b5cf6 violet
  • #ffffff white
  • #f8fafc pale slate
  • #3b82f6 blue
  • #2563eb deep blue
  • #8b5cf6 violet
  • #111827 ink
Pick it for
  • SaaS landing pages
  • fintech onboarding
  • product dashboards
  • startup marketing sites
  • SaaS landing pages
  • personal-finance apps
  • calm dashboards
  • starter templates
Skip it for
  • brands that need personality
  • editorial or luxury work
  • dark-mode products
  • brands that need personality
  • dark-mode products
  • editorial sites
Observations
  • generic: the blue-on-white SaaS look is common
  • landing: the hero phone mockup is small for the space it sits in
  • generic: close to many blue-on-white templates

How the brief works

Install Premium (Awesome Design Skills)

1 Run in your terminal

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

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 Square (Awesome Design Skills)

1 Run in your terminal

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

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.