CSS
Inject custom CSS into your status dashboard to match your brand.
Custom CSS injects into every public page on your status dashboard after default styles load. Override fonts, spacing, or hide elements when you need precise control beyond the primary color picker.
Common uses
Custom CSS is injected into a <style> tag appended to your status dashboard's <head> after the page's default styles load, so any rule you write takes precedence over the page defaults. It applies across all status dashboard pages.
If you only need to change the dashboard accent color (hyperlinks, primary buttons, focus rings, and similar highlights), use the Primary color picker in the Branding tab instead. It applies across all public dashboard pages and does not require writing CSS. Custom CSS is better suited when you need to override other styles or want finer control beyond the accent color.
- Override colors, fonts, or spacing to match your brand
- Hide specific elements (including the platform status bar when using a custom header — see the Header docs for the
nav[aria-label="Dashboard status bar"]selector) - Add custom animations or transitions
- Load a web font via
@import
Example — brand font and accent color
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.sd-status-badge--operational {
background-color: #16a34a;
}Tailwind CSS
The status dashboard is built with Tailwind CSS. Common utility classes already used by the page will be present in the compiled stylesheet. However, because Tailwind only generates CSS for classes found in source code at build time, less-common utilities you reference in custom HTML are not guaranteed to be available. For reliable styling in your Header and Footer HTML, use inline styles or define your own classes here rather than depending on Tailwind utilities.
Behavior
- Styles are applied dynamically on page load — no server-side processing.
- Changes take effect immediately on the next page load after saving.
- If you clear all CSS and save, the
<style>tag is removed.