What City Star Style Guide Actually Is and How to Use It
The City Star Style Guide is a typographic and layout reference system for designing city-themed maps, infographics, and visual assets that need to look cohesive at scale. It covers font pairings, color palettes, iconography standards, and spacing conventions that maintain consistency when you're producing multiple related assets. The original files are hosted on the City Star project GitHub repository, and the downloadable package includes a PDF reference and a set of Figma components.
Getting Started with the City Star Style Guide
I grabbed the latest release and started applying it to a transit map project. The first thing that trips people up is the kerning adjustment built into the heading layer. The guide specifies a tight letter-spacing value for display text, but if you apply it directly to a paragraph block, everything looks cramped. You need to apply it at the character level or use a style sheet override. I wasted about forty minutes before I realized the default paragraph style was overriding the heading rules because the cascade order was wrong in my Figma setup. Setting the heading style as a parent component fixed it immediately. The color system uses a six-tier palette with specific contrast ratios baked in. The light theme swatches are labeled C0 through C5, and the dark theme adds C6. Don't mix them across themes without checking the WCAG output, because the guide assumes you're committing to one theme per project. I ran into this when a client wanted to pull a C3 blue from the light palette and drop it into the dark layout, and the contrast dropped to 2.8:1. The fix was swapping it to C4, which is the next step up and still hits 4.5:1 minimum. Easy once you know to check the Contrast Checker plugin before committing. Iconography is where most projects go sideways. The guide ships with a 24-pixel grid system, but the visual weight centers slightly lower than the geometric center. If you place icons on a baseline without adjusting by two pixels downward, they look floaty next to the body text. I started using a tiny offset rule in my component library—every icon gets a parent frame with a minus-two-pixel Y offset and a comment in the dev mode so anyone who touches it knows why. Took me five minutes to set up and saved me from back-and-forth with the engineering team every time someone questioned the alignment.
Common Pitfalls and What to Watch For
The spacing system uses an 8-pixel base unit, but there are three exceptions built into the guide that aren't highlighted in the main documentation. Section dividers use a 12-pixel gap instead of 16, data tables use 6-pixel row padding, and footnote references use 10 pixels. These all exist for readability reasons—the guide explains them in the appendix, not in the quick-start section. If you standardize everything to 8 and its multiples, your layouts will look technically correct but slightly off from the intended feel. I learned this the hard way when a designer on my team rebuilt a dashboard using a pure 8-pixel cadence and the client noticed the tables felt "crowded" without being able to explain why. Another thing the guide doesn't make obvious is that the type sizes are optimized for screen reading at 1x resolution, not for high-DPI displays. On Retina screens, the 14-pixel body text can read a bit thin if your rendering settings aren't adjusted. Enable subpixel anti-aliasing in your design tool and bump body copy to 14.5 pixels if you're targeting primarily Apple devices. It's a minor tweak but it makes a noticeable difference in perceived legibility. The style guide also doesn't account for Cyrillic or CJK character support in its default font stack. If your project includes those scripts, you'll need to swap in the secondary typeface the guide lists in the appendix—the one based on Noto Sans—and adjust line heights by roughly eight percent. I discovered this when we localized a map set for a Russian market and the cyrillic glyphs were clipping into the line below at the standard 1.5 multiplier.
When City Star Style Guide Doesn't Work
There are legitimate cases where this system breaks down. The guide assumes a rectangular grid layout with left-aligned text flows. If you're doing circular dashboards, radial navigation, or freeform editorial designs, a lot of the spacing and hierarchy rules won't translate cleanly. The icon grid especially suffers on non-rectangular canvases because the 24-pixel cells force awkward clipping or oversized negative space. In those situations, I'd recommend pulling the color palette and typography rules from the guide but building your own layout system rather than forcing the template to fit. It takes more upfront work but saves you from fighting the framework later. The download link is straightforward—go to the City Star GitHub releases page and grab the latest .zip. The file runs about twenty-two megabytes and includes the full component library, the PDF reference, and a few sample project files that demonstrate proper usage. I'd suggest opening the sample files before touching the components yourself, because seeing the intended output makes the decisions in the guide a lot clearer than reading the documentation alone.
Get the Full Details
