sitehelper.online
Design system: theme and UX concept
← Back

1) Theme

Dark navy palette with high-contrast text and a single primary accent. Designed for vertical SaaS conversion: clarity, low eye strain, and strong readability.

background: #0b1220
panel: #111c33
card: #0e1a32
border: #1d2d4d
accent: #4aa3ff
text: #e6e9ef
muted: #8b96ae
ok: #31d583

2) Typography

System font stack tuned for speed and legibility. No custom web fonts; relies on Inter/system-ui with platform fallbacks.

font-family:
  Inter, ui-sans-serif, system-ui,
  -apple-system, Segoe UI, Roboto, Arial, sans-serif;
Brand
22/800 brand
H1
18/700 section
H2
16/700 card
Body / small
13–14 regular

3) Layout

4) Components

1
Step
step
Card
card
Tab active
tab[aria-selected=true]
Button
.btn
Home / Topic
breadcrumb
Notice
.notice

5) Page structure

<header>
  brand + tagline
</header>
<breadcrumb/>
<panel>
  h1 + meta
  tabs / steps / wysiwyg
</panel>
<footer>
  sitehelper.online • HTTPS templates and automation
</footer>

Long-tail pages inherit the same tokens instead of custom layouts. Keep per-page `` and `<meta name="description">` specific to the topic.</p> </div> <div class="card"> <h2>6) UX rules</h2> <ol> <li>One primary action per view.</li> <li>Copy-paste primary; linked examples are supporting.</li> <li>Every page has a visible path back to Home.</li> <li>Accessibility: semantic tabs, readable contrast, visible focus.</li> </ol> </div> <div class="card"> <h2>7) References</h2> <p class="small">Existing pages following this system:</p> <div class="small" style="margin-top:8px"> <div><a href="index.html">index.html</a> — home + tabs + wizard</div> <div><a href="order.html">order.html</a> — conversion</div> <div><a href="pages/caddy-auto-https.html">pages/caddy-auto-https.html</a> — long-tail page</div> <div><a href="faq.html">faq.html</a> — FAQ index</div> <div><a href="status.html">status.html</a> — status + cert health</div> </div> </div> <div class="footer">sitehelper.online • Design system</div> </div> </body> </html>