# Shibboleth brand kit

Sh// Shibboleth. projectseven Co., Ltd. · IC24

All logo SVGs use outlined paths, so no fonts are needed to display them. Icon SVGs use `currentColor`.

## Contents

| Folder | What is in it |
|---|---|
| `logo/svg`, `logo/png` | Horizontal wordmark, stacked lockup and Sh// monogram in five colorways |
| `app-icon/rounded`, `app-icon/circle` | App icon and avatar, six backgrounds, SVG plus PNG at 1024, 512 and 256 |
| `favicon` | favicon.ico (16/32/48), favicon.svg, PNG 16/32/48, apple-touch-icon 180, android-chrome 192/512, maskable 192/512, site.webmanifest, head-snippet.html |
| `social` | Open Graph 1200x630 and GitHub social preview 1280x640, photo and vector versions |
| `icons/svg` | 23 line icons, 24 px grid, 1.5 px stroke, round caps and joins |
| `icons/png/{teal,white}/{24,48,96}` | PNG exports of every icon |
| `icons/shibboleth-icons-sprite.svg` | All icons as `<symbol id="sh-NAME">` for `<use href="#sh-NAME">` |
| `beam` | The beam: vertical and divider SVGs (transparent and on a background), PNG at 1x and 2x in `beam/png`, and `shibboleth-beam.css` |
| `contact-sheet.png` | Everything on one sheet |

## Colorways

| Name | Sh// | Word | Use on |
|---|---|---|---|
| light-on-dark (primary) | Teal `#2dd4bf` | Bone `#eceef0` | Obsidian `#08090a` or Basalt `#111316` |
| dark-on-light | Deep teal `#1f9e8f` | Obsidian `#08090a` | White or light paper |
| teal | Teal `#2dd4bf` | Teal `#2dd4bf` | Dark backgrounds, single-color use |
| black | `#08090a` | `#08090a` | Light backgrounds, print, fax, stamps |
| white | `#ffffff` | `#ffffff` | Photos and dark backgrounds |

## Palette

| Name | Hex | Role |
|---|---|---|
| Obsidian | `#08090a` | Page background |
| Basalt | `#111316` | Raised background, icon tile |
| Slate | `#15181c` | Panels |
| Seam | `#24282e` | Hairlines |
| Seam 2 | `#30353c` | Strong lines |
| Bone | `#eceef0` | Primary text |
| Ash | `#a0a6ae` | Secondary text |
| Dust | `#6f757d` | Tertiary text, second line of headlines |
| Gate teal | `#2dd4bf` | The mark, links, the light through the gate |
| Deep teal | `#1f9e8f` | Teal on light backgrounds, pressed states |
| Sand | `#d9c29a` | Warm accent, stone |
| Bronze | `#b07a3f` | Seals and stamps |
| Ember | `#c8643c` | Stop and block states only |

## Type

| Face | Use | Settings |
|---|---|---|
| IBM Plex Mono SemiBold (600) | The Sh// mark, code, labels | Tracking -0.02em on the mark |
| Inter Medium (500) | The word Shibboleth | Mark-to-word size ratio 4:3 |
| Inter SemiBold (600) | Headlines | Tracking -0.03em, line height 1.06 |
| Inter Regular (400) | Body | |
| Cinzel 500/600 | Seals and stamps only, sparingly | Tracking 0.06 to 0.14em |

All are free on Google Fonts.

## Clear space

Keep space equal to the cap height of the S in Sh// (call it X) clear on every side of any logo. Nothing else, including text, edges or other marks, goes inside it.

## Minimum size

| Asset | Digital | Print |
|---|---|---|
| Horizontal wordmark | 96 px wide | 25 mm wide |
| Stacked lockup | 64 px wide | 18 mm wide |
| Sh// monogram | 24 px wide | 8 mm wide |
| Below 24 px | Use `favicon-16` (the two strokes //) | |

## Do

- Use the supplied files as they are.
- Use teal on dark first. Use deep teal `#1f9e8f` when the background is light.
- Put the white logo on photos, over the darkest area.
- Keep the gate light as the only glow.

## Don't

- Don't retype Sh// in another font, or change the slashes to backslashes or pipes.
- Don't stretch, skew, rotate, outline or add shadows to the logo.
- Don't use teal `#2dd4bf` on white. It is too faint.
- Don't recolor the mark outside the five colorways, or use Ember for anything except blocked states.
- Don't place the logo on busy imagery without darkening it first.
- Don't use the icons as filled shapes or change the stroke width. Scale them in 24 px steps when you can.

## The beam

The beam is the light coming through the gap between the gate doors: a thin vertical line in Gate teal with a soft haze around it. Laid flat, it becomes the divider between sections. It is the one glow the brand uses.

| Part | Vertical | Divider |
|---|---|---|
| Line | 2 px wide, 380 px tall | 1 px tall, up to 640 px wide |
| Line color | transparent, `rgba(220,255,250,.55)` at 35%, `rgba(45,212,191,.35)` at 75%, transparent | transparent, `rgba(45,212,191,.35)` at 25%, `rgba(220,255,250,.55)` at 50%, `rgba(45,212,191,.35)` at 75%, transparent |
| Glow | `box-shadow: 0 0 24px 3px rgba(45,212,191,.18)` | `filter: drop-shadow(0 0 6px rgba(45,212,191,.45))` |
| Haze | 900 x 700 radial, `rgba(45,212,191,.10)` to `.03` at 55% to transparent | 900 x 80 radial, same stops |

Copy-paste CSS is in `beam/shibboleth-beam.css` (`.sh-beam`, `.sh-beam--pulse` and `.sh-beam-rule`).

When to use it:

- Heroes and covers, standing beside the headline, never across it.
- Over gate imagery, lined up with the gap between the doors.
- As a divider between sections on Obsidian `#08090a` or Basalt `#111316`.
- Still, or with a slow brighten of 10 seconds or more. Keep it still when the viewer asks for reduced motion.

Don't:

- Use more than one vertical beam in a view.
- Recolor it. It is Gate teal light only, never Sand, Ember or another hue.
- Put it on white or light backgrounds. It disappears.
- Run it through words, faces or the logo.
- Thicken it, give it hard ends, or drop the haze.
- Sweep, flicker or slide it. The only motion is a slow brighten.

## Icons

gate-closed, gate-open, allow, block, inspect, isolate, route, decrypt, quarantine, deceive, rule-match, trace, policy-areas, snapshot, tenant, all-tenants, draft, approve, audit, simulate, read-only, compare, grain

© 2026 projectseven Co., Ltd. · IC24