---
title: Appearance
description: Personalize Sencho's look. Choose a visual style, tune the security charts and readability, pick a theme and accent, swap the interface and data fonts, and set the text size. Every choice is saved to the current browser.
---

**Settings → Appearance** is where you make Sencho look the way you want. Choose between the Calm and Signature visual styles, set how the security charts are colored, dial in readability, pick a theme and accent, choose the interface and data fonts, and scale the text. A live preview reflects every change as you make it.

<Frame>
  <img src="/images/settings/appearance-overview.png" alt="The Settings → Appearance page showing the Visual Style section with two preview cards: Calm (selected, with upright Critical heading and muted severity-color dots) and Signature (with italic serif Critical heading and saturated dots). Below are the Security Visualization chart-palette control with Muted selected, and the Readability section with its mode toggle, header-style control, and contrast slider." />
</Frame>

Several of these controls are also one click away from anywhere in the app: the **palette button** in the top bar, between the search and notification icons, opens a quick switcher for the theme mode, accent, visual style, readability, and text size. The sliders for contrast, borders, and glow stay in this Settings section.

<Frame>
  <img src="/images/settings/appearance-quick-switch.png" alt="The top-bar Theme quick-switcher popover: a Mode row with icon-only buttons for Dim, OLED, Light, and Auto (Dim selected); an eight-swatch Accent grid with Cyan selected; a Visual style row with Calm and Signature buttons (Calm selected) above a Readability toggle set to off; a Text size row with S, M, L, and XL preset buttons (M selected); and a footer line reading 'Saved to this browser · fine-tune borders & glow in Settings'." />
</Frame>

<Note>
  Appearance choices are saved to **this browser only**. They follow you across tabs on the same browser, and every device remembers its own look. Nothing here changes what other operators see.
</Note>

## Visual style

The **Visual style** is the master switch for how intense the interface feels:

- **Calm** (the default) keeps headings upright in the interface font, colors the security charts with a muted palette, and reduces material effects. It is the most readable setting.
- **Signature** uses italic Instrument Serif headings and the fully saturated chart palette for a more editorial look.

Picking a style sets the chart, header, and effects controls below in one move. You are free to adjust any of them afterward to build your own combination. When **Readability mode** is on it overrides these until you turn it off.

## Security visualization

The **Chart palette** sets the colors used on the Security page charts:

- **Muted** desaturates the severity colors so critical, high, medium, and low read as a calm progression with no jarring color pairings.
- **Heat** is a single warm ramp from a deep red through amber, with no competing hues.
- **Signature** is the saturated severity set.

## Readability

**Readability mode** is a single switch for the most legible result: upright headings, the muted chart palette, reduced effects, and a small contrast lift, all at once. While it is on, the heading and chart controls are locked to their calm values. Turn it off to set them by hand.

- **Header style** chooses **Clean** (the upright interface face) or **Signature** (italic Instrument Serif). Decorative moments such as the Sencho wordmark stay in the serif either way.
- **Contrast** is a master control that spreads the page tone, every border, and the text tiers together. Higher contrast darkens the page, brightens borders, and crisps up secondary text. Pairing high contrast with the OLED theme gives the sharpest reading on a true-black panel.

## Motion & effects

<Frame>
  <img src="/images/settings/appearance-motion-effects.png" alt="The Appearance Motion & effects section with a Constrained graphics callout above Reduced motion (off) and Reduced effects (on, with its full helper text about flattening bevels and disabling glass blur), an Ambient glow slider at 0.16 with a Reset to default button, and the start of the Theme section's live preview card below it." />
</Frame>

- Appearance shows a **Constrained graphics** callout whenever Reduced motion is off, pointing you at it as the first thing to try if the active Sencho tab feels heavy on integrated graphics or similar devices.
- **Reduced motion** minimizes interface animations and transitions (dialogs, menus, expand and collapse). Toasts are unaffected. The **Calm** visual style turns this on by default; choosing **Signature** turns it off. You can still toggle it independently afterward without changing which visual-style card is selected. On constrained graphics, this is the first control to try when the active Sencho tab feels heavy on idle.
- **Reduced effects** flattens card bevels, the accent glow, and chart gradients, and uses a simpler rendering path: glass blur is off and chrome fills are solid. It also stops the decorative masthead rail animations even if Reduced motion is off. Fresh installs get this through the default **Calm** visual style. Treat it as an optional secondary experiment for material cost; it is not a substitute for Reduced motion on the reported idle-GPU symptom. The impact varies by device, browser, and graphics configuration.
- **Ambient glow** sets the intensity of the soft, accent-tinted glow behind the page. Slide it to zero for a completely flat background. (Reduced effects already dims it and disables the slider.)
- A **Reset to default** button returns the Visual style to Calm. It is disabled while Readability mode is on.

If the active Sencho tab feels heavy on constrained graphics, see [High GPU usage on constrained graphics](/operations/troubleshooting#high-gpu-usage-on-constrained-graphics).

## Theme

The Theme section opens with a live preview card that mirrors a real fleet-health card (sample value, title, subtitle, and icon swatches plus page/card/band/well surface tones and outline/primary buttons), updating instantly as you adjust the controls below it so you can see a change before committing to it.

The **Mode** control sets the overall surface palette:

- **Dim** (default) is a raised charcoal. Cards and panels sit clearly above the page without going fully black.
- **OLED** is true black, ideal for power-saving panels. Borders stay visible so cards never merge into the background.
- **Light** is the bright theme, with the same directional, opaque borders inverted for a white surface.
- **Auto** follows your operating system, switching between Dim and Light as your OS does, and re-resolving live when the OS flips.

The **accent** is Sencho's one data color. It drives charts, sparklines, progress bars, focus rings, active states, the masthead and sidebar rails, and the ambient page glow, so changing it recolors the whole product cohesively. Eight well-spaced hues are available: **Orange**, **Amber**, **Lime**, **Cyan** (the default and the signature), **Blue**, **Violet**, **Magenta**, and **Steel** (a deliberate near-neutral). Status colors (green for healthy, amber for warning, rose for error) stay constant regardless of accent so state always reads the same.

**Border brightness** lifts or softens every hairline on its own, so the separation between cards reads exactly how you like it. A **Reset fine-tune** button returns contrast, border brightness, and ambient glow to their defaults.

## Typography

Sencho uses three type contexts. The interface and data faces are yours to change; the heading style follows your Visual style choice.

<Frame>
  <img src="/images/settings/appearance-typography.png" alt="The Appearance Typography section with Interface font chips showing Ag sample text (Geist selected, IBM Plex, Hanken Grotesk) and Data font chips showing 01 sample text (Geist Mono selected, Plex Mono, Fira Code), with a Text size slider at 1.00×." />
</Frame>

- **Interface font** sets the sans face used for body text, labels, navigation, and buttons. Choose **Geist** (default), **IBM Plex Sans**, or **Hanken Grotesk**.
- **Data font** sets the monospace face used for the terminal, stat values, codes, and timestamps. Choose **Geist Mono** (default), **IBM Plex Mono**, or **Fira Code**.
- **Text size** scales the entire interface from a single root multiplier. In Settings this is a continuous slider (default `1.00×`); the top-bar quick switcher offers **S / M / L / XL** presets. Both stay in sync.

## Display

The **Display** group holds layout and log-chip preferences for this browser:

- **Density** switches between **Comfortable** (roomy rows, the default) and **Compact** (tighter rows and tiles that fit more on screen for dense dashboards).
- **Log chip color** controls how service chips are colored in log views on multi-service or multi-container stacks. Single-service, single-container stacks do not show chips. **Unified** uses the accent color for all service chips. **Per service** assigns each service a stable label color for faster visual scanning when following multiple services at once.

## Navigation

The **Navigation** group chooses how the desktop top bar presents page destinations. Phone navigation is unchanged.

- **Navigation style**
  - **Smart bar** (recommended default): keeps a short set of primary destinations visible and moves the rest into a grouped **More** menu.
  - **Classic bar**: shows the full horizontal destination strip. Choosing Classic shows a callout that Classic bar will be removed soon; the preference is kept until then.
  - **Compact launcher**: puts destinations in a left-side launcher menu and optionally pins up to seven **quick links** on the bar.
- **Top navigation labels** (Classic and Smart): shows text beside top navigation icons. Turn it off for an icon-only bar; destinations stay reachable by tooltip, accessible name, and the command palette. Phone layout always keeps labels. With labels off, **Top navigation alignment** places the icon-only bar left or centered.
- **Quick links** (Compact launcher): labeled pins after the launcher, with a trailing **+** that opens reachable unpinned destinations. Right-click a pin and choose Remove, or manage the full list under Appearance. Up to seven pins; recommended defaults start you with four.

Deploy-progress behavior and the diff-preview-before-save step are stack workflow preferences, so they live in **Settings → Infrastructure → Stacks**, not here.

## Troubleshooting

<AccordionGroup>
  <Accordion title="My theme didn't carry over to another device or browser">
    Appearance is saved to the browser you set it in, not to your account. Every browser and every device keeps its own look on purpose, so a compact laptop setup never forces the same rhythm on a large desktop. Open Sencho on the new browser, pick your theme, accent, fonts, and density again, and they persist there from then on.
  </Accordion>
  <Accordion title="My appearance reset to the defaults">
    Sencho reads your choices from this browser's local storage. Clearing site data, signing in from a private or incognito window, or a browser that blocks local storage drops you back to the defaults: **Dim** mode, **Cyan** accent, **Geist** and **Geist Mono** fonts, **1.00×** text size, and **Comfortable** density. Re-pick what you want and it sticks for that browser.
  </Accordion>
  <Accordion title="Will changing my accent or theme affect other operators?">
    No. Appearance is local to your browser and is never sent to the server or shared. Other operators, and your own other devices, keep whatever look they set. There is no shared or organization-wide appearance setting; each person chooses their own.
  </Accordion>
  <Accordion title="The quick switcher doesn't have the contrast, border, and glow sliders">
    The top-bar palette button is a fast path for the most-used controls: mode, accent, visual style, readability, and text size. Contrast, border brightness, and ambient glow live here in **Settings → Appearance**, where the live preview reflects each change as you drag. Both paths write to the same per-browser storage, so a change in one shows up immediately in the other.
  </Accordion>
</AccordionGroup>
