#13251F#64706A#087C55#A3F4BD#DFE5E1#EDF2E8#E1EDD8#D2E5C8Version 1.0 | September 2026 | Selected identity: The chamber
Brand foundation
Sluis is Dutch for waterlock. The identity is built around controlled passage.
Let AI in. Keep control.
Secure, enterprise-ready AI chat for your whole team. A security gateway for your apps and agents. Every AI request passes through Sluis.
Use Sluis Chat and Sluis Gateway as product names beneath one identity.
Logo system
Two interlocking banks leave a stepped channel in negative space. The enclosing silhouette feels dependable, while its open route expresses access under control.
The selected symbol and outlined wordmark are immutable source artwork. Use the supplied SVG; do not retype the logo, close the channel, stretch, rotate, outline, add effects or make a gradient version.
Primary: Green symbol and Ink wordmark on Paper. Inverse: Mint on Ink. Monochrome: Ink on light backgrounds. Use a solid contrasting panel over busy imagery. The symbol may stand alone when the brand name is already present.
Clear space and size
The symbol viewBox is 100 x 100. Its visible bounds are 18-82, or 64 units. A bank is 16 units thick. Define x as that thickness; leave at least x beyond the visible edges of the mark or full logo. The visible symbol height is 4x.
Minimum digital asset dimensions: horizontal logo 120 CSS px wide; symbol 24 CSS px square. The supplied 16 px icon is reserved for favicon use. Print starting points: full logo 30 mm wide, symbol 6 mm square. Proof at actual size for the selected process and stock.
Colour codes
HEX is the digital source of truth. RGB values use sRGB. HSL values are rounded. CMYK values are approximate process conversions, not ICC-profile or Pantone equivalents. Proof printing with the selected profile and paper.
| Name | HEX | RGB | HSL | CMYK % (approx.) | Role |
|---|---|---|---|---|---|
| Ink | #13251F | 19, 37, 31 | 160 / 32% / 11% | 49 / 0 / 16 / 85 | Primary text, primary buttons and dark brand surfaces. |
| Muted | #64706A | 100, 112, 106 | 150 / 6% / 42% | 11 / 0 / 5 / 56 | Secondary text on Paper; functional outlines on light surfaces. |
| Green | #087C55 | 8, 124, 85 | 160 / 88% / 26% | 94 / 0 / 31 / 51 | Signature mark, selected states and deliberate emphasis. |
| Mint | #A3F4BD | 163, 244, 189 | 139 / 79% / 80% | 33 / 0 / 23 / 4 | Inverse logos, highlights and app-icon backgrounds. |
| Line | #DFE5E1 | 223, 229, 225 | 140 / 10% / 89% | 3 / 0 / 2 / 10 | Quiet dividers and decorative borders, not essential control boundaries. |
| Paper | #EDF2E8 | 237, 242, 232 | 90 / 28% / 93% | 2 / 0 / 4 / 5 | Primary light brand surface and editorial backgrounds. |
| Soft | #E1EDD8 | 225, 237, 216 | 94 / 37% / 89% | 5 / 0 / 9 / 7 | Secondary panels and gentle sections with Ink text. |
| Sage | #D2E5C8 | 210, 229, 200 | 99 / 36% / 84% | 8 / 0 / 13 / 10 | Tertiary blocks, diagrams and quiet large background areas. |
Accessible combinations
Normal text requires 4.5:1. Large text requires 3:1 at 24 CSS px regular or 18.67 CSS px bold. These are calculated solid-colour ratios, not a complete interface accessibility audit. Use other cues alongside colour for states.
| Foreground / background | Ratio | Normal text | Large text |
|---|---|---|---|
| ink / paper | 14.07:1 | Pass | Pass |
| muted / paper | 4.54:1 | Pass | Pass |
| green / paper | 4.59:1 | Pass | Pass |
| ink / mint | 12.37:1 | Pass | Pass |
| mint / ink | 12.37:1 | Pass | Pass |
| paper / green | 4.59:1 | Pass | Pass |
| green / mint | 4.03:1 | Avoid | Pass |
| muted / soft | 4.25:1 | Avoid | Pass |
| line / paper | 1.12:1 | Avoid | Avoid |
Green on Mint is for large text; use Ink on Mint for body copy. Muted text is appropriate on Paper, not Soft at body size. Line is a decorative divider and should not be the only essential boundary of a control. Use a stronger approved colour for that purpose.
Typography
Use Geist for headings, body copy, interface labels and presentations. Use weights 400, 500, 600 and 700. Use Geist Mono for code, IDs and technical values. This retains the type families in the existing website. The logo lettering stays as supplied vector paths and is not recreated using either typeface.
| Role | Size / line height (CSS px) | Weight | Tracking |
|---|---|---|---|
| Display | 64 / 66 | 600 | -0.03em |
| Page title | 48 / 52 | 600 | -0.03em |
| Section | 32 / 38 | 600 | -0.02em |
| Subheading | 24 / 30 | 600 | -0.02em |
| Body | 16 / 26 | 400 | 0 |
| Label | 14 / 20 | 500 | 0 |
| Caption | 12 / 18 | 400 | 0 |
| Technical | 13 / 20 | 400 | 0 |
On small screens, use 40 / 44 for display text and 32 / 38 for page titles. Keep body copy at 16 / 26. Aim for 55-70 characters per line. Prefer sentence case and normal tracking in body copy.
Layout, iconography and image direction
Use a 4 px base. Spacing steps: 4, 8, 12, 16, 24, 32, 48, 64 and 96 px. Start with 24 px mobile gutters and 48 px desktop gutters, allowing 64-96 px between major sections. Controls use 6 px corners, panels 12 px. Dividers are 1 px Line. Start icons at a 24 px grid with 2 px strokes. Preserve the app tile mask provided in the pack.
Imagery should draw from waterlocks, channels, gates and calm engineered spaces. Keep geometric diagrams simple and legible. Use soft light, pale materials and restrained green accents. Avoid generic glowing brains, neon circuitry, stock padlocks and excessive decoration.
Voice and copy
Be calm, direct and precise. Lead with the benefit and describe the mechanism. Prefer concrete words: team, request, gateway, apps and agents. Keep security, routing and compliance claims consistent with the actual product. Use specific action labels such as Explore Sluis Chat and Explore Gateway.
Spell the brand Sluis in prose, with Sluis Chat and Sluis Gateway for product names. The logo remains lowercase artwork. Preserve the supplied tagline and product descriptions above.
Motion
Lock cycle is the selected default. It runs once in 2000 ms: the two banks open, hold briefly, then close into the exact approved Chamber mark. The upper bank opens from 0-560 ms, holds from 560-1160 ms and closes from 1160-2000 ms. The lower bank opens from 0-640 ms, holds from 640-1200 ms and closes from 1200-2000 ms. Travel is (-11, -5) for the upper bank and (+11, +5) for the lower bank in the 100-unit symbol viewBox. Each moving segment uses cubic-bezier(.65, 0, .35, 1). The wordmark stays fully opaque and still. Use transforms only; no fading, bounce, spin, loop, hover replay or scroll trigger.
With reduced-motion preferences, show the static logo immediately. The animation never prevents reading or interaction. Use animated/sluis-logo-animated.svg as an image; it starts when the image loads. Reloading or inserting a new instance can replay it. Keep the same mounted SVG during client-side navigation for one initial application entrance.
Applications
Use the horizontal logo for website headers, decks and documents. Use the standalone symbol for avatars, favicons and app tiles. Use Ink and Mint for a dark presentation surface. Use Paper and Green for editorial compositions. The PDF includes illustrative website and social compositions using approved copy; they do not represent new product screens or functionality.
Assets and implementation
- sluis-logo.svg: primary horizontal signature.
- sluis-symbol.svg: standalone green mark.
- svg/: static colour variants.
- png/: transparent raster exports.
- icons/: app icons, SVG favicon and multi-size ICO.
- animated/: motion assets, preview and HTML example.
- brandguide/brand-tokens.css: font faces, colours, spacing, radii and motion tokens.
- brandguide/brand-tokens.json: matching structured values.
- brandguide/sluis-colour-codes.csv: spreadsheet-friendly colour codes.
- brandguide/fonts/: existing Geist webfonts and their license.
The PDF has embedded type and vector logos. This Markdown is editable content; build_brandguide.py is the reproducible layout source. A brand-tokens.css import expects the fonts/ directory beside the stylesheet.
References
Rebuild
Install reportlab, svglib, fonttools and brotli in your Python environment, then run python3 brandguide/build_brandguide.py from the pack. The PDF uses the bundled webfonts and static SVG assets. pypdf and Poppler are used for quality checks, not for authoring.