# Hans Study brand assets — usage guidelines

Brand package v2026.05 · Updated 2026-05-31 · Contact: [media@hans.study](mailto:media@hans.study)

This document covers how to use the Hans Study marks and brand
elements correctly. The companion [LICENSE.txt](LICENSE.txt) covers
what is permitted versus what requires written permission.

If you want to use a mark and you are not sure whether the use is
covered, ask. Email is faster than guessing.

## The marks

### S monogram

The S monogram is the primary mark. Use it standalone in any context
where the "Hans Study" wordmark would be redundant (favicons, app
icons, social profile avatars, signage). Available in:

- **White** (`tsg-mark-white.svg`) — default for dark backgrounds.
- **Black** (`tsg-mark-black.svg`) — for light backgrounds.
- **Orange** (`tsg-mark-orange.svg`) — accent only; not the default.
- **Two-tone** (`tsg-mark-two-tone.svg` / `tsg-mark-two-tone-light.svg`) — special applications only; clear the use first.
- **Wireframe** (`tsg-mark-wireframe-white.svg` / `tsg-mark-wireframe-orange.svg`) — diagrams, slide decks, technical content.

### Wordmark

Where the full name is needed alongside the mark, set the wordmark
in **Barlow Condensed Black (800)**, uppercase, with letter-spacing
~2%. The wordmark may sit to the right of the monogram with one
mark-width of space between them.

## Colour palette

| Token | Hex | Use |
|---|---|---|
| Background | `#0c0c0b` | Page background (default dark theme) |
| Surface | `#111110` | Cards, panels |
| Surface 2 | `#161614` | Elevated panels |
| Border | `#1e1e1c` | Default border |
| **Orange (primary)** | `#df7a1e` | Accent, links on dark, buttons |
| Orange dark | `#a04d10` | Accent on light backgrounds (passes AA) |
| Orange bright | `#ff9900` | Hover state, highlight |
| Text | `#d4d0c8` | Body text on dark |
| Text 2 | `#a8a69c` | Secondary text |
| Text 3 | `#807e74` | Tertiary / muted text |
| White | `#f2efe8` | Headings on dark, light section background |
| Red | `#bf3b2e` | Error, danger, "before" state |
| Green | `#68d391` | Success, "after" state |

Brand orange is `#df7a1e`. When used on a light background as body
text or a small UI element, use `#a04d10` (darker variant) to meet
WCAG AA contrast.

## Typography

| Family | Source | Use |
|---|---|---|
| **Barlow Condensed** (700, 800) | Google Fonts | Display headings, marks, eyebrows, buttons |
| **IBM Plex Sans** (400, 500, 700, 400 italic) | Google Fonts | Body copy |
| **Share Tech Mono** (400) | Google Fonts | Monospace eyebrows, metadata, code in copy |

All three are open-source SIL Open Font Licence. Self-host or load
from Google Fonts as you prefer.

## Clear space and minimum size

- **Clear space**: maintain at least 0.5× mark-height of empty space
  on every side of the mark. Never crop into this zone.
- **Minimum size**: the S monogram is legible down to 16 × ~23 pixels
  (the favicon size). Do not go smaller.
- **Maximum size**: no maximum, but at sizes above ~512 px use the
  highest-resolution PNG export (`-2048.png`) or the SVG.

## Don'ts

- **Don't** re-colour the marks outside the published palette.
- **Don't** stretch, shear, or otherwise distort the marks.
- **Don't** rotate the marks unless the use is obviously decorative
  (e.g., a watermark on a presentation slide rotated 90°).
- **Don't** combine the S monogram with other glyphs to form a new
  mark.
- **Don't** add drop shadows, glows, embosses, bevels, or other
  effects.
- **Don't** place the marks on backgrounds that fail contrast
  against the chosen fill.
- **Don't** use the orange wireframe variant for body text or any
  context where a solid mark would be expected.

## Asset files in this directory

| Folder | Contents |
|---|---|
| `svg/` | All mark variants in vector form. The canonical source. |
| `png/` | PNG exports at 16, 24, 32, 48, 64, 128, 192, 256, 512, 1024, 2048 px for white, black, orange. |
| `favicon/` | Browser favicons at all required sizes plus `apple-touch-icon`. |
| `podcast/` | StudyByt3s podcast cover art (1400 / 3000 px) for podcast directory submissions. (Coming soon.) |
| `hans-study-brand-kit.zip` | Everything in this directory bundled for one-click download. |

## Quick reference

- Default mark on dark: `svg/tsg-mark-white.svg`
- Default mark on light: `svg/tsg-mark-black.svg`
- Accent only: `svg/tsg-mark-orange.svg`
- Browser favicon (auto-discovered by browsers): `favicon/favicon.ico`
- Apple touch icon: `favicon/apple-touch-icon.png`

## Versioning

This brand package is versioned `vYYYY.MM`. The current version is
**v2026.05**. Major palette or mark changes increment the version.
The current version always lives at this URL; previous versions are
archived on request.

## Contact

Brand questions, asset requests, and permission requests:
[media@hans.study](mailto:media@hans.study).

Public brand page: [hans.study/brand/](https://hans.study/brand/)