CityScout, from idea to enterprise

Overview

A brand that reads like the public record, built for the clients who depend on it.

How might we take a brand made for a scrappy launch and make it credible to enterprise clients, inside a product that AI tools keep building?

From idea to enterprise

Scroll sideways through the product before Athens.

Naming the failure mode

“It looks AI generated” describes a real problem and gives a designer nothing to work with, so I started by naming the specific conditions behind it. Components had drifted into several versions of the same button, because each was generated for the screen that needed it. Values were hardcoded where they were used, so a change never spread. The product still wore the personality of the library it was scaffolded from, gradients and heavy shadows stood in for hierarchy, and color appeared wherever a section wanted interest, so it carried no meaning.

AI generates each screen on its own terms, with no memory of the decisions it made elsewhere. Commitment is the part that takes a person.

Athens: nine decisions

I came up with Athens, a brand and system built to read like the public record that CityScout sells. I wrote every choice down as one of nine decisions, so that a person or an agent applies it the same way every time.

1. Two families, nothing else

   Newsreader sets display and page headings, and IBM Plex Sans sets everything else. The system has no italic, no monospace, no eyebrows, and no capitals for emphasis.

2. Three token layers, one file

   Primitive ramps feed brand aliases, which feed semantic jobs. Components touch only the semantic layer, which is also the only place light and dark exist.

3. Stage is hue, momentum is form

   Six stage hues run in pipeline order. A filled dot, a hollow ring, or a gray ring marks a project as active, stalled, or dead, and a new filing is a solid maple pin.

4. No shadows, in either theme

   Depth comes from a surface step and a hairline. Tailwind's shadow and ring classes fail the build.

5. Everything left-aligned

   Text, figures, dates, and headers all align left. Tabular figures line the numbers up, so right-aligned columns had nothing left to do.

6. Icons take the color of their text

   Icons are Lucide at a 2-pixel stroke, hand-fitted at 16 and 32 pixels. Words and borders carry status, so an icon never has to.

7. One pill in the system

   The stage badge is the only pill. Buttons, chips, and avatars are square with a 4-pixel corner.

8. Juniper is identity, cypress is interaction

   The brand uses one teal family. Its dark step carries the logo and dark bands, its lifted step carries buttons and links, and orange is the signal.

9. Write like the record

   Every claim shows its record, with a source and a date. Copy names the thing, such as a filing, a parcel, or a firm of record, and titles state the finding.

A system the AI can be right against

The package

Screens with project data are prototypes with example records.

What’s next

What I learned

1. AI moves the bottleneck from production to judgment.

   The founders built a working product without a designer. What they could not generate was a point of view, and more prompting would not have produced one, because no single output had failed.

2. Coherence belongs to the whole product.

   Every generated screen was reasonable on its own. Only a person holding the whole product in mind could make the screens agree with each other.

3. Give the tools something to agree with.

   I reached the same conclusion on an enterprise design system from the other direction. The most useful thing to hand AI-assisted work is a system it can be right against.