Cool Web Tools — Red, White & Blue
The unified design system for coolwebtools.net. Tokens, components, and patterns. Toggle the theme in the top-right to preview every component in light and dark.
Color
Brand anchored on Old Glory Red #B22234 and Old Glory Blue #3C3B6E. Dark mode brightens the accents for contrast.
Brand
Surface
Status
Typography
Inter for UI and body. JetBrains Mono for code, keys, and monospaced data.
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 brand red. 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
Sticky header above. Logo on the left, 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/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.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.
<!-- 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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/theme.css">
<script defer src="assets/tools.js"></script>
<script defer src="assets/header.js"></script>
<script defer src="assets/theme.js"></script>
<!-- In <body>: -->
<header id="cwt-header" data-current="dnslookup.html"></header>