SequelPG v0.2.1: editorial redesign, Slonik mark, and a single phosphor-lime accent
Everything up to v0.1.14 was about making the app work well: native AppKit grid, type-aware cells, a proper test-connection probe, bounded caches that kept the UI quick after a long session. With v0.2.1 the work shifts to how the app looks. We took the editorial “technical journal” aesthetic that the marketing site shipped with last month and translated it into a native SwiftUI app, in a way that still feels like a real Mac program rather than a web page in a window.
One signature: lime where the OS expects blue
macOS apps default to a system accent color and pick up that color for every selection, every prominent button, every tab indicator, every text caret. The fastest way to make an app feel unmistakably like yours and not like the templated default is to take that single color and make it yours. SequelPG’s color is #b9f25a — a phosphor-lime that came out of the marketing site’s terminal-CRT references.
The asset catalog now ships a custom AccentColor, so everywhere SwiftUI reads the system accent — sidebar row selection, results-grid row highlights, prominent buttons, progress indicators — you get lime instead of macOS blue. Tab indicators on the Structure / Content / Definition / Query bar get a 2px lime top accent. The SQL editor’s text-cursor insertion point is lime. The active-line gutter (when we land custom gutters in a later release) will be lime. It’s a single change with a disproportionate visual impact.
A real type system: SF Pro for chrome, JetBrains Mono for identifiers, Instrument Serif for editorial flourish
Most database GUIs render every label, value, count, and SQL fragment in the same system font. Identifiers, types, and counts are all monospaced data — aligning them on the grid makes long lists scannable instead of mushy. SequelPG v0.2.1 bundles JetBrains Mono (Regular, Medium, Bold) and uses it for every piece of technical content: table names in the navigator, column names and counts, type pills, SQL keywords in the editor, status meta in the toolbar, query-history rows.
UI chrome — window-level labels, button text, form fields — stays in SF Pro. This is a native macOS app; a serif body font would feel costume-y. But for the few places where the editorial aesthetic does belong — an object’s name in the tab header, an Inspector section title, an empty-state headline, the app brand on the connection picker — we use Instrument Serif Italic (also bundled). Three fonts, three jobs:
- SF Pro for chrome (buttons, form labels, window titles)
- JetBrains Mono for identifiers, types, counts, SQL, status lines
- Instrument Serif Italic, used sparingly, for object names and section titles — orders, users, Inspector, Row Detail
Bundled fonts are registered at app launch viaCTFontManagerRegisterFontsForURL and also declared in Info.plist’s ATSApplicationFontsPath, so they resolve cleanly in unit-test hosts and on first launch alike. If either registration path fails the SwiftUI Font.custom() call falls back to the system font for that face, so a missing bundle resource degrades gracefully instead of crashing.
Editorial structure: roman numerals, type pills, dotted rules
The marketing site numbers sections with roman numerals (i. — definition, ii. — connection,iii. — SSH tunnel) and uses dotted rules for quieter dividers. Both translate to the app:
- Tab headers — each tab in Structure / Content / Definition opens with a roman-numeral kicker (
i. — definition), an uppercase schema-kind label (app · table), and the object name in italic serif (orders). - Inspector — section titles like Inspector and Row Detail render in italic serif with a small
ii.or#16on the right. Between rows you see a dotted rule, not the heavy macOS divider. - Connection picker — the form on the right uses
ii. — connectionandiii. — SSH tunnelas section headers. The Connect button is a solid lime chip, not a system blue blob. - Empty states — the empty Query editor now shows a centered serif headline (A fresh query.), keyboard-cap chips for
⌘↵/⌘⇧F, and a quietv. — emptykicker.
Type pills everywhere a type appears
Column headers in Content, key rows in Inspector, and the Structure tab’s columns table all now carry a small uppercase type pill next to the column name. Pill color encodes the broad type family at a glance:
- Violet for built-in PostgreSQL types (
uuid,int8,varchar) - Mauve for user-defined types (
order_status,address_t) - Cyan for temporal types (
timestamp,timestamptz,date) - Amber for JSON (
json,jsonb)
The same tokens drive the SQL syntax palette: keywords sit in cool blue, function calls in violet, string literals in rose, numbers in amber, comments in muted ink. The Definition tab and the SQL editor in the Query tab share this palette so they read as the same surface.
The Slonik mark
The app icon has been the chamfered notched polygon since the first release. It was distinct but did not say PostgreSQL. v0.2.1 introduces a refined elephant mark (the Slonik, the PostgreSQL community’s longstanding mascot) drawn so it works at every required AppIcon size from 16px to 1024px:
- Round head as a large ellipse in lime
- Curled trunk as a single thick stroked path (renders cleanly even at 16px where details fall apart)
- Ear as a soft rotated ellipse with reduced opacity, for depth
- Off-white tusk and a small dark eye
- Warm-charcoal squircle as a backdrop, with a subtle radial gradient to lift the head
The exact same SVG drives the AppIcon, the favicon on sequelpg.com, the SlonikMark React component in the site’s nav and footer, and the OpenGraph card. One mark, four surfaces, identical at every size.
Concretely, v0.2.1 means
- New
Themedesign system with palette tokens (bg,bg2,line,accent,ink/ink2/ink3/ink4), bundled font helpers (Theme.mono,Theme.serifItalic), and shared editorial pieces (Tag,EditorialSectionHeader,SubSectionHeader,AppKbd,DottedRule) SequelPGApp.init()registers bundled fonts at launch; the window forces dark color scheme app-wide- New
AccentColorasset (lime) drives the system accent for every SwiftUI control SQLSyntaxColorsretuned to match the editorial tokens; keywords are blue, functions violet, strings rose, numbers amber, comments muted ink- All 10 AppIcon PNG sizes regenerated from the Slonik SVG via
qlmanage+sips
No behavior changes; this is a visual redesign, not a feature drop. Every existing connection, every query history entry, every saved layout still works exactly the same way. Grab v0.2.1 from the latest release or build from source with Xcode.