We refreshed the dashboard and website UI (Editorial design)

Thank you for using BotShade.

We have completely refreshed the design of both the dashboard and the website. We adopted a new Editorial look that lays out information with ink headings and rules on a calm, paper-like surface.

In this article:

• What changed
• Why we chose Editorial
• What makes Editorial Editorial
• Two design themes
• Switching themes
• The website follows the same idea
• Looking ahead

What changed

We reworked the design to organize information with rules and typography, the way a magazine is typeset. We pulled back on decorative elements and now lean on whitespace and a clear heading hierarchy for readability. Color is used only where it carries meaning: a warm magenta for primary actions in Plum, a deep ink in Editorial; numbers, IDs, and other data are left in a neutral monospace either way.

We also reorganized the dashboard’s navigation. Bot-level settings now sit on two axes — bot-wide settings as top tabs, and per-feature settings in the left sidebar — and the bot home places status and controls at the top, so the next operational move is always one click away.

Why we chose Editorial

The previous BotShade leaned on the “cool monochrome / modern means undecorated” idiom common in developer-facing tools. It’s a clean look, but for the people running Discord servers — who need warmth and trust at the same time — it felt a bit distant.

So we borrowed from editorial design — the way magazines and newspapers set type — instead. The strength of Editorial is that it relies on typography and whitespace alone to make information readable, without piling on decoration. A reading-like calm, a sense of certainty, and the quiet impression that “this was thought through” — those are what a dashboard actually needs.

What makes Editorial Editorial

A few of the elements that define the Editorial look:

• A paper-like surface and ink headings — instead of pure white, the surface carries a slightly warm tone. Ink-black headings on top stay easy on the eyes for long reading sessions.
• Rules over cards — rather than stacking cards everywhere, we separate regions with a 1.5 px hairline. “No decoration, structure speaks” — the rule magazines have lived by for a century.
• A hard offset shadow as the signature — primary buttons carry a deliberate 3 px / marigold-colored hard shadow, the way a magazine cover does. Pressing one absorbs the shadow, giving a paper-turning feel under your finger.
• Bricolage and JetBrains Mono — headings are set in Bricolage Grotesque, body in Hanken Grotesk + Zen Kaku Gothic New, and data (numbers, IDs, timestamps) in JetBrains Mono. Roles are visually distinct at a glance.

Two design themes

You can pick whichever theme you prefer on the dashboard.

• Plum — warm greige surface with black/white accents (monochrome). A soft layout where rounded cards float.
• Editorial — a paper surface led by ink, with a hard offset shadow as its signature. A magazine-like layout divided by rules.

Both themes support light and dark modes. The light mode gives you the calm of paper; the dark mode is a warm, sign-lit black that reads gently for night sessions.

Switching themes

Go to Settings → Preferences → Design theme to switch anytime with a live preview. Your choice is saved in the browser and persists across visits.

The settings panel shows a miniature live preview of each theme, so you can see how it’ll actually feel before committing. Try whichever fits the mood you want when you’re working.

The website follows the same idea

The website you’re reading was rebuilt on the same principle — whitespace-led, ruled, restrained.

• Navigation is quiet, headings use text-wrap: balance for evenly-broken lines, and body copy uses text-wrap: pretty to suppress orphans. The wrapping behavior of the whole site is raised by one level.
• The resource lists (knowledge base, blog, release notes, announcements, security, incidents) share a single card spec, with subtle hairlines as row separators.
• On pages like /product/security, collapsible “technical details” drawers let readers who want the depth go deeper, without forcing it on everyone else.

Looking ahead

We’ll keep polishing the details of every screen to make the dashboard even easier to use. If anything catches your eye — or if there’s something you’d like to see differently — please send us your feedback.