A measured frame,
one accent, 1px everywhere.
Every pattern on this site is taken from journeymro_site. Class names are kept verbatim, so markup moves between the two projects without translation. The whole system is one CSS file and one JS file, no build step and no dependencies — link them and the page is already in the system.
The system in one screen
Those five numbers carry most of the look. The rest is restraint: headings at weight 300 and negative tracking, labels in wide-tracked uppercase mono, prose in sentence case, and a single cyan spent only on the active state, hover and links. Nothing else competes.
Contents
Foundations
Palette and tokens in both themes, the type scale, spacing and geometry, and the contrast floors that decide which greys may carry prose.
02The frame
Two hairlines 1320px apart, repeated on every band. The grid background, the reticles, the docking notches, and the page skeleton that holds them together.
03Components
Buttons, forms, navigation, tabs, cards, overlays and feedback — every interactive part, with its markup underneath.
04Data display
Tables, stat rows, meters, chart containers and a full dashboard layout. The part journeymro_site had least of — built out here first.
Mobile
What the frame does below 820px: the drawer, the breakpoint ladder, touch targets, and the tables-on-a-phone question answered properly.
06Logo & wordmark
The lockup, its baseline rule and the clipped J, clear space, the favicon, and where each mark is allowed to appear.
07Icons
One family: 24px box, no fill, currentColor stroke at 1–1.5. Thirty-six of them, drawn to the frame's own weight.
Using it
Copy assets/css/journeymro.css, assets/js/journeymro.js and assets/fonts/ into the new project. Then this, and nothing else:
<link rel="stylesheet" href="assets/css/journeymro.css">
<script src="assets/js/journeymro.js" defer></script>
<!-- must be inline in <head>, before first paint -->
<script>
(function () {
try {
/* Dark is the house default — the light theme is opt-in, and a visitor
whose OS is light should still meet the site as it is meant to look. */
document.documentElement.setAttribute('data-theme', localStorage.getItem('jm-theme') || 'dark');
} catch (e) { document.documentElement.setAttribute('data-theme', 'dark'); }
}());
</script>Reach for a token. Every colour, size and duration in the system has one, and a hardcoded hex is a bug the light theme will find for you.
Add a second accent. If two things both need attention, one of them doesn't.
Let horizontal rules run full-bleed and keep content in a narrower column inside them.
Use a shadow as an edge, or a radius on anything but the outer corner of a notch.
Size type up rather than down. Alliance is a light grotesque and reads small for its nominal size.
Set prose in --muted or --dim. They are chrome colours; --dim is below the AA floor.