Tenant Pane / Brand system / v1
Pane Grid.
Multiple isolated contexts inside one container. Restrained geometry, readable type, and a quiet teal accent.
The mark & wordmark
32-unit grid. Outer frame: (3,3), 26 × 26, radius 3, stroke 2. Four square panes: 7 × 7 at x/y 8 and 17. The 2-unit gutter stays open. Clear space: 8 units on every side. Minimum mark: 16px; 24px or larger preferred. Keep the wordmark readable at 18px or larger.
Wordmark SVGs contain editable text. Install Inter for consistent external use; convert the text to outlines in your export workflow. The website uses locally served Inter.
Color
#101820 · dark canvas
#69B8A9 · dark accent
#F5F7F6 · light canvas
Light mode uses Teal 700 (#236B60) for actions and #1B6258 for links. Do not use the dark-theme teal for small text on white. Tenant workspace colors remain supplemental identity cues, independent of brand teal.
Type & layout
| Role | Specification |
|---|---|
| UI & prose | Inter, 400 / 500 / 600 / 700; Segoe UI fallback |
| Hero | 40–72px, 600, 1.14 line height, −0.035em tracking |
| Section title | 28–38px, 600 |
| Body | 16px, 400, 1.65 line height |
| Technical labels | Cascadia Code / Consolas; 11–12px |
| Spacing | 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96px |
| Radii | 4px controls; 8px panels; no pill styling |
| Content | 1160px maximum; 20px mobile / 32px desktop side margins |
Use with restraint
- Flat navy and paper surfaces. No gradients, glow, or ornamental grids.
- One teal accent for actions and focus. Use readable names alongside workspace colors.
- Small icons: 24-unit viewBox, 1.5–2-unit strokes, familiar geometry, no emoji.
- Browser chrome actions remain icon-only, with tooltips and accessible names. Marketing calls to action may have readable labels.
- Keep real product captures truthful. Label synthetic content, preserve identity cues, and link the full capture when cropping.
- Switch themes to inspect both modes. Product screenshots keep their actual native theme.
Brand assets do not establish profile isolation, Microsoft access, or verified tenant identity. The four panes represent contexts; they are not a promise of split-screen page layout.