Vintage vs Awwwards

Awesome Design Skills · juliobsz

Tied at 4/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 Engineer way: monospace, grids and labels. If it isn’t aligned, it isn’t done. Both are best for: visual direction.

Vintage4/5
After: Tally landing page, made with Vintage (Awesome Design Skills)
Awwwards4/5
After: Tally landing page, made with Awwwards (juliobsz)

Scroll either page; the other follows.

Vintage builds Tally as a Windows 95 desktop: a grainy teal background, beveled silver windows, Silkscreen pixel headings and JetBrains Mono text. Features, pricing and the FAQ each sit in their own window, and the dashboard adds a title bar, LCD-style readouts and segmented progress bars. It is the most fully committed theme in this batch, and it still works on a phone. Pick it for retro, playful or nostalgic brands.

Awwwards puts Tally on ruled sage-gray ledger paper with a red margin line, huge tight Familjen Grotesk headlines, IBM Plex Mono labels and blue ballpoint tally marks that draw themselves in the hero. The landing adds a playable month of envelopes on black and a giant footer wordmark. The Geist dashboard carries the idea with an electric-blue 'left to budget' panel, hatched bars and tally textures. It is one of the clearest concepts in the set and reads well on a phone. Pick it for launches and product pages that need a memorable idea.

Side by side

FieldVintage (Awesome Design Skills)Awwwards (juliobsz)
Fonts
  • Silkscreen
  • JetBrains Mono
  • Familjen Grotesk
  • IBM Plex Mono
  • Geist
  • Geist Mono
Colors
  • #008080 teal
  • #c0c0c0 silver
  • #000080 title-bar navy
  • #ffd166 LCD yellow
  • #000000 black
  • #ffffff white
  • #e8ece3 ruled sage paper
  • #2335d9 ballpoint blue
  • #0f1a14 ink
  • #c8392a margin red
  • #f3f2ee off-white
Pick it for
  • retro and nostalgic brands
  • indie and hobby software
  • playful consumer apps
  • campaign pages
  • product launches
  • showcase landing pages
  • fintech with a story
  • portfolio-style sites
Skip it for
  • modern premium brands
  • accessibility-first products
  • serious enterprise tools
  • conservative corporate brands
  • dark interfaces
Observations
  • the grey bevels and small pixel type make some text hard to scan
  • it is a costume: hard to tone down for a real product without losing the point
  • the hero illustration sits below the fold at desktop width

How the brief works

Install Vintage (Awesome Design Skills)

1 Run in your terminal

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

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 Awwwards (juliobsz)

1 Run in your terminal

npx degit juliobsz/skills/awwwards#main .claude/skills/awwwards

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.