The atomic elements of the SafetyChain brand.
Logo, color, type, spacing, iconography, imagery, voice. Master these and everything else — every component, page, and slide — falls into place.
Logo.
The SafetyChain mark is the single most important brand asset. Use the wordmark wherever space allows; fall back to the signet only when the wordmark won't fit or when the context already names the brand.
Variations
Clear space
Maintain clear space equal to 1× the wordmark height on all sides — the same value used vertically and horizontally. Don't crowd the mark with text, photography, or graphic elements.
Don't
The signet is the same cyan as the background — it disappears. Use navy, white, or ink-900 instead.
Only navy, white, ink-900, or photographic backgrounds with sufficient contrast.
The wordmark always sits flat and horizontal. Same for the signet.
Lock the aspect ratio. If your space is wrong, change the space, not the mark.
Minimum size
16PX · DIGITAL MIN
20PX · SIGNET MIN
0.5IN · PRINT MIN
The thumbprint motif
The concentric, offset-line graphic lifted from the signet — our "thumbprint." It's a brand accent device, not a texture or a background fill. Treat it with restraint: it signals "SafetyChain" at a glance and loses all of its weight the moment it's overused.
Once per page, at most.
A single thumbprint per page, slide, or document. Never two. If a layout seems to want a second, it doesn't need the first.
Covers & accents only.
Typically on a cover page or title slide. Otherwise as a quiet accent feature behind a stat, a section break, or a CTA — never competing with content.
Always anchored to an edge.
The bottom of the thumbprint must run off an edge of the page or document, so it reads as anchored — never floating in dead space.
Color & opacity: the thumbprint renders in brand cyan on light and navy grounds, or white / pale cyan on dark grounds. Keep it low-contrast — roughly 15–30% against light, 25–45% against navy — so it never fights the headline or logo sharing the page.
File: assets/motif-rings.png — see the embeds & downloads below to grab it.
Embeds & downloads
Every brand mark lives at a known path under assets/. Grab the SVG for anything digital (it scales, recolors with currentColor where applicable, and stays sharp); use the PNG only when SVG is off the table. The same files are what AI tools should reach for when building decks, landing pages, or campaign collateral on our behalf.
For AI tools building decks or pages: the four files above are the only brand marks. Reference them by path in HTML/CSS; for inline SVG embedding, paste the snippet you need from below.
HTML embed · wordmark
<img src="assets/logo-dark.svg" alt="SafetyChain" height="28" />
<!-- on dark backgrounds: -->
<img src="assets/logo-light.svg" alt="SafetyChain" height="28" />HTML embed · signet
<img src="assets/signet.svg" alt="SafetyChain" height="40" width="40" />CSS background · motif (cover/title slide treatment)
/* Anchor to a corner, run off two edges, low opacity.
Bottom-right on light grounds: */
.slide-cover::after {
content: "";
position: absolute;
right: -8%; bottom: -14%;
width: 70%; aspect-ratio: 1;
background: url("assets/motif-rings.png") no-repeat center / contain;
opacity: 0.85;
pointer-events: none;
}
/* Top-right on navy grounds — render the rings white via filter: */
.slide-cover.is-dark::after {
right: -8%; top: -14%; bottom: auto;
filter: brightness(0) invert(1);
opacity: 0.55;
}Color.
Cyan and deep navy form the core of the brand. Lean on neutrals to do most of the work; bring in cyan to signal action and direction, and reserve semantic colors for status meaning — not decoration.
Brand
Semantic
Used only to convey state. Don't decorate with these.
Note: SafetyChain blues (cyan, navy) and grays are neutral — they carry the brand without taking a side. Use them for facility counts, descriptive figures, body copy, and anywhere a number isn't telling a positive or negative story. The system has no red; orange covers every "stop" or "failure" signal, with a deeper tone (#8F3505) for the most severe state when extra emphasis is needed.
Product color attribution
Each SafetyChain product line is anchored to a brand color. Use the product's color as the section accent — borders on cards, eyebrows above headlines, category badges, the dot next to a feature name. The navy core ("System of Action") is the parent identity that ties them together.
Quality Assurance
Documentation, audits, compliance.
- Fewer missed checks & deviations
- Faster detection & resolution
- Reduced audit prep time
- Always-ready documentation
Quality Control
In-process checks, SPC, output consistency.
- Less overfill, scrap & rework
- More consistent product output
- Reduced variability across shifts & lines
- More efficient processes
Supplier
Upstream risk, requirements, oversight.
- Lower upstream risk
- Less manual follow-up
- Standardized requirement processes
- Improved oversight
Production
Yield, throughput, plant performance.
- Improved yield & throughput
- Fewer quality-driven disruptions
- Stronger operator decision making
- Reduced downtime
of
Action
How to apply product colors
Do: use the product color for the section's accent — border, eyebrow, category badge, the colored bullet next to a feature name. Pair it with the cyan-led brand for buttons and links. Don't: override the button system, the semantic system (success/warning/etc.), or the typography rule (headers stay cyan). Product colors are anchors, not themes.
Usage
Use cyan-500 for primary actions, links, and brand accents. Use navy-900 for dark mode surfaces and high-contrast section breaks.
Let neutrals do the heavy lifting — most of the page should be ink-50 / ink-100 with cyan used sparingly for emphasis.
Apply semantic colors decoratively. A green button means "pass," not "next." Reserve them for status and data.
Optional: amber as a sales & marketing highlight
Same dual-meaning rule as orange. In-product, amber (#FFB400) is strictly the "warning / trending toward limit" semantic. In sales & marketing, it has a second role: a warm highlight color used in small doses to draw the eye to a single thing on the page.
- "New," "Featured," or "Limited" badges on landing pages
- Pull-quote underlines or stat backgrounds in decks
- Highlight chips on resource cards (e.g. "Just released")
- Email banner accents and event signage
- Underline / marker treatment behind a single word
- Buttons or any clickable action (cyan or orange only)
- Large solid fills — keep coverage under ~5% of the layout
- Body text or paragraph backgrounds (contrast falls apart)
- Anywhere near warning/alert badges in the same view
- In-product UI for anything other than the warning semantic
Pairing: amber sits best on navy or dark ink, where it's at its loudest, and on white where it still pops without overwhelming. Avoid amber on cyan — they're competing temperatures and the eye doesn't know where to land.
Use cyan-500 for primary actions, links, and brand accents. Use navy-900 for dark mode surfaces and high-contrast section breaks.
Let neutrals do the heavy lifting — most of the page should be ink-50 / ink-100 with cyan used sparingly for emphasis.
Apply semantic colors decoratively. A green button means "pass," not "next." Reserve them for status and data.
Typography.
Poppins for everything — display, body, UI. The rule: section and page headers (h1–h3) are cyan in Medium (500). Body text and functional labels (h4–h6) stay in ink. Keep each sentence a single solid color — don't split a line across two colors.
Scale
Weights
Medium 500 is the heading weight — cyan, restrained, confident. Regular 400 for body. SemiBold 600 for functional labels (h4–h6, buttons, table headers). Bold 700 is held in reserve — used sparingly, never to recolor or re-weight a word mid-sentence.
One color per sentence
Keep each headline or sentence in a single solid color. Don't split a line across two colors to emphasize a word — the whole line works harder when it reads as one clean thought. To shift emphasis, write a tighter sentence or break it into two; don't recolor a fragment.
One solid color across the whole line. It reads as a single, confident statement.
Navy works just as well as cyan — pick one color and let the whole sentence wear it.
Recoloring a fragment splits the reader's attention and makes the line feel busy. Keep it one color.
A single recolored word still breaks the rule. If a word needs to lead, rewrite so it comes first — don't tint it.
Reverse type on saturated backgrounds
Backgrounds in the SafetyChain system are limited to navy, cyan, shades of blue, gray, or white (see Components / Buttons for the full background rule). On any of the saturated brand-blue or ink fills, set text in white. Never black, ink, or navy text on those fills — white locks the reading hierarchy and keeps the brand looking deliberate instead of accidental.
On pale brand-blue tints (cyan-50 / cyan-100) and gray surfaces (ink-50 / ink-100, white), use dark ink. The accent colors — orange, green, amber — are never used as backgrounds in the system.
Why this rule exists
Dark text on a saturated brand color reads as "I forgot to invert the foreground." White on the same fill is the universal signal of a finished design. The amber carve-out is the only place where the accessibility math forces a different answer.
Spacing.
A 4-point grid. Every margin, padding, and gap on the system is a multiple of 4px. Use the token, not the raw value.
Radii & shadows.
Subtle, deliberate corner rounding and elevation. We're an industrial product — sharp enough to feel precise, soft enough to feel approachable.
Radii
Shadows
Iconography.
Lucide-style line icons with a 2px stroke on a 24px grid. Rounded caps and joins. Icons sit on the baseline of the text they accompany; never inside a colored circle unless they're functional status indicators.