Editorial Designer vs UI Principles

Atelier UI · brijr

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.

Editorial Designer3/5
After: Tally landing page, made with Editorial Designer (Atelier UI)
UI Principles3/5
After: Tally landing page, made with UI Principles (brijr)

Scroll either page; the other follows.

Editorial Designer gives Tally a quiet magazine look: off-white paper, very large light Inter Tight headlines with one bold word, thin rules instead of boxes and a single rust accent for things that need attention. The dashboard follows through with a huge "$640" figure, numbered sections and line-only envelope bars. It is clearly its own direction, and the dashboard is the stronger page: on a wide screen the landing headline drops below the phone plate, leaving the first screen mostly empty, and some sections hug the left edge. Pick it for calm, editorial products that want restraint.

UI Principles gives Tally a restrained, neutral product look: near-white backgrounds, the system sans on the landing and Inter on the dashboard, two type sizes and one muted green used only for buttons, healthy bars and October in the chart. The hero is a plain budget card instead of a phone, and the dashboard is a clean grid of rules with black envelope bars and red only for Dining out. It is tidy, readable and works on a phone, but it is generic, with little that says Tally. Pick it to calm down a busy interface rather than to set a brand.

Side by side

FieldEditorial Designer (Atelier UI)UI Principles (brijr)
Fonts
  • Inter Tight
  • Inter
  • Inter
  • System UI
Colors
  • #f4f1ea paper
  • #141413 ink
  • #9b3a24 rust
  • #3a3936 charcoal
  • #cfc8b9 rule
  • #ebe6db sand
  • #fbfaf8 off-white
  • #1c1d1f near black
  • #2f6b4f muted green
  • #b3261e red
  • #5d6066 gray
  • #e6e4df line gray
Pick it for
  • editorial and lifestyle brands
  • calm consumer apps
  • restrained dashboards
  • saas products
  • tidying an existing interface
  • calm dashboards
Skip it for
  • loud launches
  • dense data tools
  • brands that need personality
  • landing pages that must stand out
Observations
  • the wide landing's first screen is mostly empty, with the headline pushed below the phone
  • some landing sections sit flush against the left edge
  • tidy but generic, with little brand character
  • the landing uses the device's system font, so it looks different on each platform

How the brief works

Install Editorial Designer (Atelier UI)

1 Run in your terminal

npx degit heyman333/atelier-ui/skills/editorial-designer#main .claude/skills/editorial-designer

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 UI Principles (brijr)

1 Run in your terminal

npx degit brijr/skills/ui-principles#main .claude/skills/ui-principles

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.