Logo
Five colorways.
Teal on dark first.
The Sh// mark and the word Shibboleth at a 4:3 size ratio. Use deep teal when the background is light, and white on photos.
Horizontal wordmark
Stacked lockup
Sh// monogram
Logos, colors, type and icons for Shibboleth. Every logo is outlined, so no fonts are needed to show it. Use the files as they are.
The Sh// mark and the word Shibboleth at a 4:3 size ratio. Use deep teal when the background is light, and white on photos.
Click a color to copy its hex. Keep the gate light as the only glow, and use Ember only for blocked or stopped states.
IBM Plex Mono for the mark, code and labels. Inter for the word, headlines and body. Cinzel for seals and stamps, sparingly.
1.5 px stroke, round caps and joins, drawn in currentColor. Click one to download its SVG.
All icons in one file: shibboleth-icons-sprite.svg, as <symbol id="sh-NAME"> for <use href="#sh-NAME">.
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.
/* Sh// Shibboleth: the beam
Light through the seam of the gate. Use on Obsidian #08090a or Basalt #111316.
https://shibbolethgate.com/brand/#beam */
/* Vertical beam with haze. The parent needs position:relative and overflow:hidden.
Set --beam-x to move it across the parent. */
.sh-beam{position:relative;overflow:hidden;--beam-x:62%}
.sh-beam::before{content:"";position:absolute;left:var(--beam-x);top:-120px;width:900px;height:700px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(45,212,191,.10),rgba(45,212,191,.03) 55%,transparent);pointer-events:none}
.sh-beam::after{content:"";position:absolute;left:var(--beam-x);top:-40px;width:2px;height:380px;background:linear-gradient(180deg,transparent,rgba(220,255,250,.55) 35%,rgba(45,212,191,.35) 75%,transparent);box-shadow:0 0 24px 3px rgba(45,212,191,.18);pointer-events:none}
/* Optional slow brighten. Opacity only, so it stays on the compositor. */
.sh-beam.sh-beam--pulse::after{animation:sh-beam-pulse 12s ease-in-out infinite}
@keyframes sh-beam-pulse{0%,100%{opacity:.6}50%{opacity:1}}
/* Divider: a horizontal beam on the top edge of a section.
Put <div class="sh-beam-rule" aria-hidden="true"></div> inside a section that has position:relative. */
.sh-beam-rule{position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none}
.sh-beam-rule::before{content:"";position:absolute;left:50%;top:-40px;width:min(900px,96%);height:80px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(45,212,191,.10),rgba(45,212,191,.03) 55%,transparent)}
.sh-beam-rule::after{content:"";position:absolute;left:50%;top:0;width:min(640px,72%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(45,212,191,.35) 25%,rgba(220,255,250,.55) 50%,rgba(45,212,191,.35) 75%,transparent);filter:drop-shadow(0 0 6px rgba(45,212,191,.45))}
@media (prefers-reduced-motion:reduce){.sh-beam.sh-beam--pulse::after{animation:none;opacity:.85}}
Keep space equal to the cap height of the S in Sh// (X) clear on every side. Nothing else, including text, edges or other marks, goes inside it.
| Asset | Digital | |
|---|---|---|
| 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 // | |
