jordan@eopsin:~/style

bayl.es style

A code editor's color theme, translated to the web. Color works like syntax highlighting, words are set in a grotesk, and machine facts in your editor's mono. It's one family, with a small context clue per site. This page is built with the stylesheet it describes; switch the site and theme above to see each signature.

01principles

02signatures

One hue per site, fading into a neighbor. It shows up on the strip at the top, the dot after the wordmark, the prompt path, panels and the primary button.

03color roles

Each hue is a role, the same on every site. The ratio under each swatch is measured live against the page in the current theme. Text colors need 4.5:1; fill-only colors need 3:1.

04type

wordmark 700/56eopsin
name, jordan onlyJordan Bayles.
title 600/24Set up your passkey
lede 400/20One sign-in for Jordan's server.
body 400/17Words people read are Schibsted Grotesk.
meta, mono 12–13jellyfin.bayl.es · 14 services · lan · fi -> != ===

05components

guest@eopsin:~/accounts eopsin
.top · .prompt · .mark

01shortcuts

J JellyfinMovies and TV jellyfin.bayl.es H Home AssistantSmart home lan K KiwixOffline Wikipedia home only
.label · .rows · .row (.off when unavailable) · .meta.public / .private
last checkedOct 11 · 212 books
statusSyncing normally
attentionFirst sync is running
can't download3 titles
.kv · .dot.ok / .warn / .err
footer: the site's own links first, style.bayl.es last, on every site

new here?

  1. Sign in once with your Jellyfin username and password
  2. Create your passkey. About a minute in all.

Hints sit under the field in grey.

approve this tv?

Only continue if the code is on your own screen right now.

.panel · .panel.alert · .steps · label + input · .help · button / .btn.quiet · .actions

06contrast

Every text color meets WCAG AA (4.5:1) on the page and on every tinted panel, in both themes; non-text marks (field borders, focus rings, dots) meet 3:1.

Each hue comes in two strengths: the role color is safe for text, and *-bright / --sig-fill are for fills only. Unavailable items turn grey, never faded. When adding a color, check it on the page and on the darkest panel tint it can sit on. The ratios in section 03 are live.

07favicons

home
my
id
audible

Server sites: an "e." monogram on a tile in the site's signature color. jordan.bayl.es: the Chasma Sound logo, white on black (in that repo).

08never

09use it


          

            Pin a tag; a site only changes when you bump it. Rules and reasoning in
            DESIGN.md;
            usage and release steps in the
            README.