Cool Web Tools — Blueprint design system
coolwebtools.net is reskinned on Palantir's Blueprint (v6) — vendored locally, no CDN, no React. Tokens, components, and the AppShell layout below. Toggle the theme in the top-right to preview every component in light and dark.
Color
Blueprint's standard palette, read straight out of the vendored assets/vendor/blueprint/blueprint.css — intent-primary blue #2D72D2, intent-success green #238551, intent-warning orange #C87619, intent-danger red #CD4246.
Intents
Surface
Status
Typography
Blueprint's standard system-font stack for UI and body — no Google Fonts, no web font download. -apple-system, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue", sans-serif. A system monospace stack for code.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body text: cool web tools is a directory of small, single-purpose web utilities. Each tool is a stand-alone page with no tracking, no signup, and no fluff.
Muted text: helper copy, captions, and meta information.
Mono text: const tools = ['png','jwt','regex','json'];
Components
Building blocks every tool page can drop in.
Cards with a top accent stripe in Blueprint primary blue. Use sparingly — for callouts or featured tools.
Featured tool →$ curl -sSL https://coolwebtools.net | grep tool
<a href="jsonformatter.html">JSON Studio</a>
<a href="regextester.html">Regex Tester</a>Inline links use the brand blue, with an underline on hover. Visited links keep the same color so navigation stays predictable.
This paragraph is muted — for captions, helper text, or meta data.
Header / navbar
Fixed, full-width Blueprint navbar (bp6-navbar) above everything. Hamburger (mobile only) on the left, brand, tools search in the middle, theme toggle on the right. Press ⌘K / Ctrl K or / to focus search anywhere on the page.
cwt-brandLogo + site title — links back to index.html.cwt-searchLive tool filter, sourced from assets/core/tools.js. Arrow keys to navigate, Enter to open, Esc to clear.cwt-theme-toggleLight / dark switch. Persists in localStorage; falls back to prefers-color-scheme.cwt-navbar__hamburgerVisible below 960px only — opens the off-canvas tools drawer.AppShell layout
Every page gets: a fixed top navbar, a fixed left sidebar (Blueprint Menu, grouped by category, rendered from window.CWT_TOOLS) with the current tool highlighted, and the tool's own <main class="cwt-main"> pushed to the right. Below ~960px the sidebar becomes an off-canvas drawer toggled by the hamburger. Injected entirely by assets/core/header.js — no per-tool-page markup changes.
(.cwt-main)
How to add this to a tool page
Drop the following into the page's <head> and add a header element. Existing inline styles keep working — the theme just provides defaults and tokens. The navbar, sidebar, and drawer are all injected automatically by header.js; no extra markup is needed for them.
<!-- No-FOUC bootstrap (inline, before paintable content) -->
<script>
(function () {
try {
var t = localStorage.getItem('cwt-theme');
if (t !== 'light' && t !== 'dark') {
t = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
}
document.documentElement.setAttribute('data-theme', t);
} catch (e) {}
})();
</script>
<link rel="stylesheet" href="assets/core/theme.css">
<script defer src="assets/core/tools.js"></script>
<script defer src="assets/core/header.js"></script>
<script defer src="assets/core/footer.js"></script>
<script defer src="assets/core/theme.js"></script>
<!-- In <body>: -->
<header id="cwt-header" data-current="dnslookup.html"></header>
<main class="cwt-main"><div class="cwt-container">…</div></main>
<footer id="cwt-footer"></footer>