Soda's look · Soda

This is how Soda itself looks: its logo, colors and type, for its site (sodakit.dev), its docs and anything else that speaks for Soda. It isn't the look of apps made with Soda. Each of those has its own, set by its tokens (docs/styling.md).

The idea#

Soda is fizz: changes rising, always moving, and an app that's quick to make and light to run. In pictures that's bubbles, nearly all of them soft and out of focus. In the interface it's frosted glass (a panel the page shows through, the way a store holds what it can't read) and one pink. The mark is the cup it comes in: a 24 oz cup whose S is the cup, with a pink straw out of the top.

The cup is the one literal piece of soda. Everything else stays abstract: no cans, bottles, labels, ice or fizzing sounds. Use the pink once at a time, and only where it means something: the straw, the wordmark's bubble, a dot that marks a section, what's yours to press.

The logo#

The wordmark: lowercase soda in Soda Sans at its widest and weight 820, tight, with the bubble rising off the a. Use it wherever there's room for a word: a bar, a footer, a title.
The mark: a 24 oz cup, tapered from its rim, filled by an S (Soda Sans at weight 900) and cut to the cup's outline, so the S's own edges draw the cup; a pink straw leans out of the top. No lid, no outline: the S is the cup. Use it beside the wordmark in a bar, and alone where it's small and square: favicons, app icons, avatars.
Files: soda-wordmark.svg (ink, for light grounds), soda-wordmark-light.svg (for dark), soda-mark.svg and soda-mark-light.svg, soda-icon.svg (the mark on a tile, for an app's icon), and favicon.svg, which follows the browser's scheme. logo.json has the outlines (the cup one path, the straw another), for a page that draws the logo inline in its own colors.
Space and size: keep clear space around the logo at least as wide as the straw is long above the cup. The wordmark goes down to 56 px wide, the mark to 16 px.
Don't put the bubble over the d (the word reads soia), draw the cup's outline around the S or put a lid on it (the S is the cup), set soda in another font, color the letters or the cup anything but ink or light, add a shadow or a gradient, or put the logo over a busy picture without a frosted panel under it.

brand/logo.py draws all of it from web/fonts/soda-sans.woff2; run it again after changing the logo or the font (it needs pip install fonttools brotli skia-pathops).

Color#

	Light	Dark
Page	`#eef1f4` seltzer	`#05070c` night
Surface	`#ffffff`	`#0c1018`	panels, cards
Ink	`#0d1015`	`#eef1f5`	text, the logo's letters
Ink, soft	`#343a43`	`#c3c9d1`	body copy, over pictures too
Muted	`#565e69`	`#959daa`	labels, never over pictures
Pink	`#c8175f`	`#ff6aa6`	the bubble, the line that matters most, what's under the pointer, focus
Glass	white at 55%, its edge at 80%	`#0c1018` at 55%, its edge white at 12%	frosted panels over a picture, with a 24–40 px backdrop blur

Every text color reads at WCAG AA (4.5:1) on the page and surface of its scheme. The pink is the only color Soda has of its own. It marks one thing per view (the headline's second line, a big number), and whatever the pointer is on. The rest is ink and seltzer. Green stays for what's checked and safe, and the apps keep their own colors where they're named.

Type#

Soda Sans (GitHub's Mona Sans, subset and renamed as its license asks). Headlines at width 125, weight 800, letter-spacing -0.05em and line-height 1. Everything else at width 100.
Relay Mono (GitHub's Monaspace Neon) for what machines hold: hashes, bytes, addresses.

Pictures#

Bubbles rising, by day and by night, wide and tall, in art/ (where art/README.md has each prompt). New pictures keep to the same scene: bubbles and nothing else, nearly all soft and out of focus, a few sharp with an iridescent rim, soft light from the upper left, and room for words on the left.

Words#

Say what it does in plain, short sentences: "No server. No operator." Tell people what happens to their things rather than how Soda is built.