Branding & themes¶
CertIntel has four visual themes - Brutal (the default), Classic Blue, Liquid and Phosphor - and each can be shown in light or dark mode. The same themes appear on this wiki, the public website, the dashboard and the Windows Agent, but each place remembers its choice differently.
Wiki and website theme¶
Use the Theme picker in the wiki header to choose a theme; the adjacent
light/dark button controls color mode independently. The choice is shared
between certin.tel and wiki.certin.tel through cookies, so both sites look
the same. The first time you change it a notice titled Your appearance
preferences asks whether to Remember my appearance; with that on, the
choice is kept for up to a year. With it off, or when cookies and browser
storage are blocked, the choice lasts only for the current page. See
Privacy & cookies. This is a personal preference for the public
sites only; it does not change your tenant, dashboard or Agent settings.
Agent screenshots on this wiki follow your wiki theme and light/dark mode. Click an image to open it in a viewer covering 95% of the screen. Choose Actual size to inspect fine details, and press Escape or Close to return to the page.
Tenant appearance¶
On plans that include the Appearance feature, a tenant administrator
opens Tenant appearance in the dashboard sidebar (the page was previously
called Branding; the old /branding address still works). This sets the
default look of the tenant's dashboard and sign-in page for everyone.
- Under Theme, choose Default - Brutal, Classic Blue, Liquid or Phosphor.
- Optionally open Dashboard colors, expand Light mode or Dark mode, tick Customize … next to any color you want to change (for example Buttons and selected navigation or Text on buttons) and pick a color. Unticked colors keep following the theme. Use original {theme} colors clears every customization. Light and dark palettes are saved separately.
- Under Layout density, keep Comfortable (default) or choose Compact. Compact uses slightly smaller text and tighter spacing in the header, side menu, cards, tables and forms, so more rows and tiles fit on one screen. Nothing is hidden or moved; it is the same layout, closer together. The density applies to everyone in the tenant unless a user picks their own under My appearance; the sign-in page is unaffected.
- Click Save (the page confirms Appearance saved.). Reset to defaults restores Brutal, comfortable density and no customizations.
Keep text readable against its background, and keep the success, warning and error colors distinguishable. A child-organization administrator cannot open this page; it is tenant-administrator only, and on plans without the feature the dashboard reports Your plan does not enable appearance customization.
Tenant logo and favicon¶
The same page has a Tenant logo and favicon card. Custom images appear only
on your tenant's own <slug>.app.certin.tel pages (and on your vanity domain,
if set); the shared app.certin.tel
sign-in page keeps the CertIntel identity, and personal themes never replace
these images.
| Image | Requirements |
|---|---|
| Dashboard logo | PNG, JPEG or WebP, at most 1 MB, 64–1600 pixels wide and 32–400 pixels high, aspect ratio between 2:1 and 8:1. Recommended: a transparent 640 × 160 PNG with a horizontal wordmark. Displayed within 160 × 40 pixels. |
| Favicon | PNG, JPEG or WebP, at most 256 KB, square, 64 × 64 to 512 × 512 pixels. Saved as a 64 × 64 PNG. No SVG or animated images. |
Uploading a new image replaces the existing one. Tick Remove current logo or Remove current favicon and click Save images to go back to the selected theme's own artwork.
Client co-branding (MSP mode)¶
Tenant appearance applies to the whole workspace. On plans with MSP (the
Enterprise plan), a client organization can add its own name and logo next to
it: Organizations → Co-branding on the client's row (workspace-wide
branding.update). The client logo follows the same shape rules as the
dashboard logo, but at most 256 KB, and is stored as PNG.
- In the dashboard the client's name and logo appear beside the tenant's branding while the view is that organization only (selected in the top bar, or after switching into the client). The tenant theme, colors, logo and favicon stay as they are.
- Emails and scheduled reports for that organization read
for in their header, as text only; no logo is sent by email. - The sign-in page and the vanity domain keep the tenant's branding.
See MSP mode for the form, the Clients page and switching into a client.
Your own address (vanity domain)¶
On plans that include a workspace address (https://<slug>.app.certin.tel),
a tenant administrator can also serve the same workspace at a hostname the
organization owns, for example certintel.your-company.com. Open
Security → Your own address (vanity domain), enter the hostname, click
Add vanity domain, and create the two CNAME records the page then shows
at your DNS provider (Re-check DNS & renew now repeats the check later):
| Name | Type | Target | Why |
|---|---|---|---|
certintel.your-company.com |
CNAME | your workspace address, <slug>.app.certin.tel. |
Sends visitors to this workspace. Point it at your workspace address exactly as shown, not at the shared sign-in address. |
_acme-challenge.certintel.your-company.com |
CNAME | the Delegated DNS-01 target shown on the page | Lets CertIntel prove control of the name to the certificate authority, now and at every renewal. Leave it in place. |
Then choose Check DNS & issue certificate. CertIntel verifies both records through public resolvers, obtains a certificate for exactly that hostname (no wildcard, no other names), renews it automatically before expiry, and keeps a still-valid certificate in service if a renewal fails. Records that propagate later are picked up by a periodic re-check, so you do not have to click again. Sign-in and the dashboard then work at both addresses, and the Security page's other controls (workspace-host-only sign-in, IP allowlists) treat the vanity domain exactly like your workspace address.
Notes:
- One vanity hostname per tenant. Most DNS providers cannot place a CNAME at
a bare domain (zone apex); use a subdomain such as
certintel.<your-domain>. - With Cloudflare, set both records to DNS only (grey cloud), not proxied.
- The Delegated DNS-01 record behind the vanity domain appears on the Delegated DNS-01 page but cannot be revoked or deleted while in use; remove the vanity domain first.
- Remove vanity domain stops serving the certificate immediately. Changing the tenant slug invalidates the first CNAME until you update it.
- The feature is enabled per deployment; if the card is not on the Security page, your CertIntel installation does not offer it.
My appearance (per user)¶
On the same plans, every signed-in user can pick their own look under You → My appearance in the sidebar. The preference is stored with the account, so it follows you across browsers and devices.
- Theme: Use tenant default (follow whatever the administrator sets, including future changes) or one of the four themes. A personal theme also unlocks the same Dashboard colors editor for your own palette; the tenant's custom colors are then no longer used for you.
- Color mode: Use system setting, Light or Dark. The light/dark button in the dashboard header saves to this setting as well.
- Layout density: Use tenant default, Comfortable or Compact. Choosing Comfortable explicitly opts you out of a compact tenant; Compact gives you the denser layout even when the tenant is comfortable.
- Save stores the choice; Reset to tenant default removes it.
Tenant logos and favicons are not affected by personal themes. On plans without the Appearance feature, and on the sign-in page, the header's light/dark button is remembered by a cookie in that browser only.
Time zone¶
CertIntel stores every timestamp in UTC and shows it in a time zone you choose, on every plan. It works the same way as the theme: the workspace has a default and each person can override it.
- Workspace default: a tenant administrator sets Time zone in the Organization settings card of Settings → Security. New workspaces start on UTC. The change is written to the activity log.
- Personal choice: anyone signed in opens You → My preferences and picks a zone, or Use workspace default to follow the administrator's setting (including future changes). The choice is stored with the account.
Every date and time on the dashboard follows the zone in effect: certificate
validity, last-seen and next-check times, activity and job history, the page
footer clock. Times carry the zone's abbreviation (EDT, CET, JST), and
the Since / Until filters on the Activity Log and Background Jobs pages
read the values you type in that zone. Alert messages and scheduled-report
emails use the workspace default. Two things stay in UTC: the Hour (UTC)
you pick when scheduling a report or backup, and API responses, which are
ISO-8601 with an explicit offset.
Windows Agent theme¶
The Windows Agent follows the tenant theme and the tenant's customized button colors (the Buttons and selected navigation and Text on buttons colors of the matching light or dark palette) after it receives branding from the platform. This requires an install-token-enrolled agent that has been approved. An agent connected with an integration API key uses its local theme.
To choose a theme for one server, the server administrator opens Settings → Appearance, turns Tenant override on, then chooses a Visual theme. Platform check-ins will no longer change that server's theme. Turn Tenant override off to resume following the tenant; Refresh platform theme fetches the tenant's current theme immediately. The override applies to the server; the local visual theme and Color mode preferences are saved for the Windows user running the app. Light/dark mode remains independently selectable when following the tenant. Windows high-contrast colors take priority.
The appearance status explains whether the agent is following the tenant, using an override, waiting for approval, or unable to obtain branding. When branding is unavailable, the local theme is used until a successful check-in.
Brand assets¶
Official CertIntel logos, icons, and colors, mirrored here from the identity
package in certintel-documentation (docs/product/brand/) so they're easy to
download. The assets and palette below describe the default Brutal identity,
which uses a cream canvas, near-black type and outlines, pink
actions, and yellow and blue supporting accents, set in Space Grotesk and
Space Mono.
All logo files are SVG with the lettering converted to outlines, so they render identically without any font installed. App icons and favicons also come as PNG. "Light" and "dark" in a file name describe the background the file is made for, not the color of the artwork.
Primary logos (mark + wordmark)¶
Horizontal - website headers, presentation titles, product signatures.
| Preview | File |
|---|---|
| logo-horizontal-light.svg | |
| logo-horizontal-dark.svg | |
| logo-horizontal-certin-tel-light.svg | |
| logo-horizontal-certin-tel-dark.svg |
Use the certin.tel versions when the domain is the intended identifier.
Stacked - square or narrow layouts.
| Preview | File |
|---|---|
| logo-stacked-light.svg | |
| logo-stacked-dark.svg |
Wordmarks¶
For spaces where the full logo is too dense.
| Preview | File |
|---|---|
| wordmark-certintel-light.svg | |
| wordmark-certintel-dark.svg | |
| wordmark-certin-tel-light.svg | |
| wordmark-certin-tel-dark.svg |
Standalone mark¶
The shield and radar symbol on its own.
| Preview | File | Use |
|---|---|---|
| mark-pink.svg | Default mark on light backgrounds | |
| mark-ink.svg | Single-color use on light backgrounds | |
| mark-cream.svg | Dark backgrounds | |
| mark-white.svg | Dark or colored backgrounds |
App icons¶
512×512 outlined tiles for PWA manifests, touch icons, and app listings. Pink is the default tile; the others are alternates for different surfaces.
| Preview | Tile | Files |
|---|---|---|
| Pink (default) | .svg · .png | |
| Yellow | .svg · .png | |
| Blue | .svg · .png | |
| White | .svg · .png | |
| Cream | .svg · .png |
Favicon¶
favicon.svg · favicon-32.png · favicon-16.png
The favicon uses heavier strokes than the marks above so it stays legible at 16px. It is this site's own browser tab icon.
Color palette¶
HSL values are canonical; hex values are rounded for SVGs and design tools.
| Swatch | Name | HSL | Hex | Role |
|---|---|---|---|---|
| Cream | hsl(44 100% 92%) |
#FFF4D6 |
Default page canvas | |
| Ink | hsl(0 0% 7%) |
#121212 |
Text, outlines, shadows, text on bright fills | |
| Pink | hsl(330 100% 68%) |
#FF5CAD |
Primary actions, selected controls | |
| Yellow | hsl(48 100% 60%) |
#FFD633 |
Callouts, labels, table headers | |
| Blue | hsl(222 100% 70%) |
#6694FF |
Information panels, supporting emphasis | |
| Pale yellow | hsl(48 100% 80%) |
#FFEB99 |
Header, footer, secondary surfaces | |
| White | hsl(0 0% 100%) |
#FFFFFF |
Cards and content panels | |
| Lime | hsl(90 90% 62%) |
#9EF547 |
Small positive-status accents |
Keep cream as the dominant canvas and lime as an occasional accent. Put ink
text on every bright fill. Bright pink is a fill or decoration, not a text
color on cream or white - for links on light surfaces use the darker
hsl(330 100% 34%) with an underline, as this site does. The accent colors
don't replace warning or error colors.
Typography¶
| Role | Typeface |
|---|---|
| Wordmark, headings, interface | Space Grotesk (bold for the wordmark and headings) |
| Small labels and metadata | Space Mono |
| Long-form reading and code | System sans-serif and monospace |
Both typefaces are free under the SIL Open Font License. The logo files don't need them installed.
Using the logo¶
- Keep clear space of at least one shield-width around the logo.
- Minimum sizes: horizontal logo 160px wide, stacked logo 120px wide, and the mark 24px high. Below that, use the favicon.
- Keep the logo level, unshadowed, in its supplied colors and proportions.
- Use
alt="CertIntel"on logo images, or empty alt text when the product name is already written next to the mark.
Source¶
These files are the canonical copy from certintel-documentation at
docs/product/brand/. To change the identity or add a variant, change it there
first and re-sync this folder.