Flat vs Riso

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 Maximalist way: loud color, big type, more is more. Both are best for: visual direction.

Flat3/5
After: Tally landing page, made with Flat (Awesome Design Skills)
Riso3/5
After: Tally landing page, made with Riso (Awesome Design Skills)

Scroll either page; the other follows.

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.

Riso prints Tally in two inks: federal blue for headings and line art, fluorescent pink only on things you click, on warm grainy paper with halftone dots and offset print shadows. The dashboard keeps the same paper and two inks. It has a real point of view, but both mobile pages scroll sideways. Pick it for playful, print-loving brands.

Side by side

FieldFlat (Awesome Design Skills)Riso (Awesome Design Skills)
Fonts
  • Inter
  • JetBrains Mono
  • Space Grotesk
  • Overpass Mono
Colors
  • #ffffff white
  • #f6f4f1 warm grey
  • #f2673c tangerine
  • #8b5cf6 violet
  • #111827 ink
  • #16a34a green
  • #fbf5ea paper
  • #f3ead9 deep paper
  • #2c40a7 federal blue
  • #f237a1 fluorescent pink
  • #111827 ink
  • #ffffff white
Pick it for
  • consumer apps
  • SaaS landing pages
  • simple product dashboards
  • small-business sites
  • indie and creative brands
  • zines and event pages
  • playful consumer apps
  • portfolio sites
Skip it for
  • luxury or editorial brands
  • dark-mode products
  • dense data tools
  • enterprise tools
  • dark-mode products
  • dense data tools
Observations
  • the many envelope colors make the dashboard a little noisy
  • blue text everywhere makes the hierarchy flatter than it could be
  • landing mobile: 446 px wide on a 390 px screen, so it scrolls sideways
  • dashboard mobile: 489 px wide on a 390 px screen, so it scrolls sideways

How the brief works

Install Flat (Awesome Design Skills)

1 Run in your terminal

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

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

1 Run in your terminal

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

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.