Everything with your name on it.

One shield, six ways to use it.

Pick by where it is going, not by what looks best in the folder. Use the SVG wherever the software will take it: it stays sharp at any size, from a business card to a building wrap. The PNGs exist for tools that refuse SVG.

Primary lockup

Horizontal, dark The default. Use this one unless you have a reason not to. Website headers, letterhead, invoices, anything on white or cream. SVGPNG 2000px

Horizontal, light Same lockup for dark backgrounds. Petrol, ink, or a dark photo. Never put the dark version on a dark background. SVGPNG 2000px

Stacked For square and near-square spaces where the horizontal version would shrink too far: yard signs, truck doors, stamps, hard hat stickers. SVGSVG for dark bg

Shield alone

Shield, full colour When the name is already nearby or there is no room for it. App icons, favicons, a repeated badge in a document. It carries its own dark field, so it sits on light or dark. SVGPNG 512PNG 1024

Social avatar A true 1080 square with the mark centred. Facebook, Instagram, LinkedIn and Google all crop to a square or circle, so use this and nothing else for a profile picture. PNG 1080×1080

Wordmark only Text with no shield. Email signatures, formal documents, and anywhere the shield already appears above. SVGSVG for dark bg

One colour, for fabrication

Vinyl cutters, embroidery machines, engravers, rubber stamps and single-colour printing cannot reproduce the gold-on-dark badge. These are drawn as a true single colour, so the shield reads as an outline and the 28 stays legible.

One colour, black Engraving, stamps, faxes, black-and-white print, laser etch. SVG

One colour, white Knockout on a dark garment, dark vinyl, or a dark photo. SVG

One colour, gold Foil stamp, gold embroidery thread, or a single-colour gold print on dark. SVG

Give it room, and don't shrink it past legible.

Clear space

XXXX

X = the height of the "28". That is roughly one fifth of the shield's height. Keep at least X of empty space on all four sides. No text, no photo edge, no border inside that margin.

Minimum size

Screen: 24px tall minimum. Print: 0.35 inches (9mm) tall minimum. Below that the star and the chevrons turn to mud and the 28 closes up. If you need it smaller, use the one-colour version, which holds together better at small sizes.

The five things that go wrong.

Every one of these has happened to somebody's logo. If a vendor sends back a proof that looks like one of the four on the right, send it back.

DOUse the file as supplied, at its own proportions.

DON'TStretch or squash it. Hold shift when you resize.

DON'TRotate or tilt it. The shield sits upright.

DON'TAdd shadows, glows, bevels or outlines.

DON'TRecolour it. Six variants are supplied above.

Two golds, on purpose.

Click any swatch to copy its hex. These are the values actually running on the site, read straight out of the stylesheet, not approximations.

Core

Supporting

Contrast, measured

Real ratios, calculated. Anything at 4.5:1 or above is safe for normal text under WCAG AA.

Two faces, one for saying it and one for reading it.

Every specimen below is set in the real webfont this site serves, so what you see is what your visitors see.

Copy the tokens, don't retype the hexes.

The custom properties the site actually runs on. Hand-transcribing hex values is how a brand ends up with four slightly different golds, so copy this block instead.

/* State 28 Insurance & Safety - design tokens */
:root {
  /* core */
  --ink:        #10151B;  /* body text */
  --paper:      #F6F4EF;  /* page background */
  --white:      #ffffff;
  --petrol:     #0B4A4F;  /* primary dark */
  --petrol-600: #0C5C63;
  --petrol-400: #21A199;

  /* accent - interface only, never the logo */
  --amber:      #F4A81D;  /* buttons, highlights */
  --amber-600:  #DB9110;  /* hover */
  --amber-700:  #B4740A;
  --amber-800:  #8A5A08;  /* gold TEXT on light (5.39:1) */

  /* logo only - do not use in UI */
  --badge-gold:  #C89740;
  --badge-field: #161C24;

  /* text + lines */
  --steel:    #495260;
  --muted:    #656D79;  /* 4.76:1 on paper */
  --hair:     #E6E1D7;
  --field-bd: #94907F;  /* input borders */
  --pos:      #2E9E6B;

  /* type */
  --font-display: 'Clash Display', 'Geist', sans-serif;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* shape + motion */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(16,21,27,.05), 0 2px 6px -2px rgba(16,21,27,.08);
  --shadow:    0 1px 2px rgba(16,21,27,.05), 0 6px 16px -6px rgba(16,21,27,.12),
               0 18px 44px -16px rgba(16,21,27,.16);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --maxw: 1200px;
}

How it should sound.

Plain, specific, and checkable. The whole positioning is that Dustin can prove what he says, so the writing never needs to oversell.

One block, paste it once.

Built with inline styles and a websafe fallback stack, because email clients strip stylesheets and do not load custom fonts. Copy the HTML and paste it into the signature editor in Outlook or Gmail. Swap the name and title for anyone else on the team.

Dustin Smith, CSP Founder · State 28 Insurance & Safety CSP · CHST · MBA · Licensed TX P&C Agent (720) 660-4110  ·  dustin@state28safety.com state28safety.com Texas Insurance Agency Lic. #3527728

Copy signature HTML

Real sites, not stock.

Every photo on the site is from a job Dustin actually worked. That is a real differentiator against competitors running stock imagery, and it is worth protecting: if a photo would not survive the question "whose site is this?", don't publish it.