– BRAND ASSETS · v2026.05
Hans Study brand assets.
Marks, palette, typography, and usage guidelines for press, podcasts, editorial, and authorised partners. Last updated 2026-05-31.
© 2024-2026 Hans Study. All rights reserved. The Hans Study word mark and S monogram are unregistered trademarks. Use beyond the permitted editorial scope below requires prior written permission.
Downloads
All assets are also browsable individually below.
The S monogram
The primary mark. Use the variant that fits the background. Aspect ratio 696:1014 (taller than wide). Minimum size 16 px wide.
PNG exports
Raster exports at all standard sizes. White on the left column, orange on the right. Black variants follow the same naming pattern.
Favicons
Browser tab icons and the Apple touch icon. The site references these automatically; included here for downstream use (e.g., embedded apps, browser launcher tiles).
- favicon.ico (multi-resolution ICO)
- favicon-16.png
- favicon-32.png
- favicon-192.png
- favicon-512.png
- apple-touch-icon.png
Colour palette
Primary orange is #df7a1e. On light backgrounds, switch to #a04d10 for accessible contrast.
Background
#0c0c0b
Page background (default dark theme)
Surface
#111110
Cards, panels
Surface 2
#161614
Elevated panels
Orange (primary)
#df7a1e
Accent, links on dark, buttons
Orange dark
#a04d10
Accent on light backgrounds (passes WCAG 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
Typography
Three families. All open-source SIL Open Font Licence. Self-host or load from Google Fonts.
Barlow Condensed
700, 800
Display headings, wordmark, eyebrows, buttons
IBM Plex Sans
400, 500, 700, 400 italic
Body copy
Share Tech Mono
400
Monospace eyebrows, metadata, code in prose
Web elements (the design system)
Every reusable element used across articles, knowledge base entries, tool pages, and landing pages. Each example is a live render of the production element, not a mock. The semantic name and intended use are noted next to each one.
Typography in use
H1 display heading
H2 section heading
H3 subsection heading
– EYEBROW · METADATA STRIP
Body copy uses IBM Plex Sans at 15–16px, line-height 1.7, colour var(--tx) on dark surfaces. Long-form paragraphs cap at ~760px wide for readability.
Monospace metadata uses Share Tech Mono at 11px, letter-spaced, often uppercase.
Buttons
Primary action: solid orange. Secondary or tertiary action: ghost (outline).
Knowledge base callouts
Seven semantic callout variants used in articles and knowledge base entries. Pick the variant whose colour and meaning match the content.
When in doubt, use Callout. Reserve Warn for actual reader-harm scenarios.
Inline article callout
For long-form articles (outside the knowledge base), use the lighter inline callout instead of a knowledge base callout. Smaller, lighter-weight, fits the prose flow.
Inline callout pattern. Use this for personal-take annotations, side observations, or short emphasis that should not interrupt the article structure with a full bordered card.
Badges, chips, tags
Used in card metadata strips, KB entry headers, and post listings.
Code
Inline code uses the monospace family at body weight. Block code uses syntax-highlighted blocks.
Example inline: set SQL Server max memory explicitly before deploying.
# Example block (PowerShell)
Set-Service -Name "RemoteRegistry" -StartupType Disabled
Stop-Service -Name "RemoteRegistry" -ForceTables
| Vendor | Stack | Status |
|---|---|---|
| Cisco | Catalyst 9300, IOS XE 17.x | Primary |
| Aruba | CX 6300, AOS-CX 10.13 | Primary |
| Juniper | EX series, Junos OS 23.4 | Secondary |
Inline tables use a single light border on the row separator. Wider tables get a wrapper that scrolls horizontally on small screens.
Lists
- Unordered list, used heavily in body content
- Bullets in muted text colour, body line-height
- Tightened spacing for lists that sit close to surrounding paragraphs
- Ordered list (browser default counters)
- Decimal markers, comfortable indent
- Use for sequential steps where order matters
Form elements
Forms appear on the contact and mentorship pages. Label sits above the input. Focus state shifts the border to brand orange.
Status indicators
Translucent checkbox-style chips for audit reports, checklists, pass/fail tables, control inventories, and inline content. Three semantic variants in three sizes. Designed so the same indicator reads consistently anywhere on the site.
Pass / good / complete / recommended
Info / notice / pending / partial
Fail / blocked / not complete / banned
Three sizes: 12 by 12 (small), 16 by 16 (default), 24 by 24 (large).
Inline usage example (a checklist):
- SMBv1 removed across the fleet
- Print Spooler disabled on non-print servers (CVE-2021-34527 mitigation)
- LAPS deployment pending, schedule with IT
- TLS 1.0 and 1.1 still enabled at the OS level
For accessibility, pair each indicator with adjacent text describing the state. The indicator itself is decorative.
State colour chips
Pill-shaped state chips for diagrams (before / after metric panels, comparison tables, swim lanes). Reserve red and green for actual semantic states; do not use them for decoration.
Citations block
Every article, news item, and knowledge base entry carries 2 to 4 outbound citations to primary sources. Renders automatically under the body content from the metadata on each post. Do not compose manually.
References
- Example primary source (NIST SP 800-171 Rev. 2)NISTcsrc.nist.gov
- Example vendor doc (Cisco Catalyst 9300 Series)Ciscocisco.com
Outbound links open in a new tab. Source-pinned. If a vendor moves a doc, this block gets updated.
Author bio block
Auto-appended below every article, news item, and knowledge base entry. Renders below the citations block and above tags.
Permitted use (no prior permission required)
- Editorial / journalistic use referencing Hans Study, Hans Study's work, books authored by Hans Study, or the StudyByt3s podcast. News articles, podcast notes, conference programmes, academic citations. The marks must be unmodified.
- Linking to hans.study, with the Brand Assets serving as the link target (a clickable logo or wordmark linking back to the site).
- Personal reference. Saving a copy for your own device, study, or archival.
Requires written permission
- Commercial use of any kind. Advertising, marketing materials, paid promotion, sponsored content, merchandise, apparel, signage, products or services for sale.
- Modified, derivative, or combined works. No re-colouring outside the published palette, no stretching, no integration into other marks, no use as a component of another design.
- Implied endorsement. No use that suggests Hans Study endorses, sponsors, or is affiliated with a third party when no such relationship exists.
- Misleading or deceptive contexts. No phishing, impersonation, fraud, or reputation-damaging use.
- Use by competitors. Other consulting practices, integrators, or advisory firms may not use the Brand Assets in any context suggesting association, affiliation, or comparable services.
- Re-distribution as part of a third-party asset library, icon set, design system, or template.
Permission requests: media@hans.study. Include the asset(s), intended use, duration, and where it will appear. Reasonable editorial and academic requests get a same-business-day response.
Legal
The full licence text including warranty disclaimer, enforcement, and jurisdiction is at /brand/LICENSE.txt. Detailed usage guidelines including clear-space, minimum size, and do/don't are at /brand/USAGE.md.
This package is governed by the laws of the Province of Ontario and the federal laws of Canada applicable therein.