Card title
Cards use a subtle gradient surface with an orange-tinted border for grouped content and features.
Brand & Design
BOMHort Styleguide
The visual language of BOMHort — logo, colors, typography, and components. Use these tokens and assets to keep the brand consistent across the website, docs, product UI, and community materials.
Logo & Mascot
Meet the BOMHort dragon — a friendly guardian hoarding a stack of SBOM documents. Always keep clear space around it and never distort, recolor, or add effects.
On dark background
On light background
BOMHort
Horizontal lockup (mascot + wordmark)- Do use the transparent PNG on any background.
- Do pair the mascot with the “BOMHort” wordmark in navigation and headers.
- Don't stretch, rotate, recolor, or add shadows to the mascot.
Color Palette
BOMHort ships a dark-first theme. Accents provide emphasis; keep large surfaces neutral.
Brand Reds — from the mascot
The two red tones extracted from the BOMHort dragon: a light crimson body and a deep maroon for shading.
Accents
Surfaces
Text
Typography
Typeface: Inter, with a system-font fallback stack. Headings are tight and bold; body copy is comfortable at 1.6 line-height.
Eyebrow · uppercase label
Heading 1 — clamp(2rem, 4vw, 3.4rem)
Heading 2 — section title
Heading 3 — subsection
Lead paragraph — used for intros and hero copy at a slightly larger size.
Body text — the default paragraph style for descriptions and long-form content across the site.
Muted text — captions, footnotes, and metadata.
Buttons
Primary for the main action, muted for secondary actions.
Pills & Badges
OpenSSF Sandbox ProjectIconography
Icons are Flowbite Icons (MIT), rendered as CSS masks so they inherit color. Headline icons use the orange accent.
Cards
Another card
Keep card copy concise. One idea per card works best for scannability.
Accent Band
Used sparingly to highlight community and call-to-action sections. Combines a teal glow with a soft orange counter-light.