Primary logo
Default lockup for light backgrounds, nav, footers, documents, and light hero sections.
Silverback · Brand standards
Logo, type & color
Approved logo lockups, typography, CTA patterns, and color pairings for web, decks, and partner materials. Teal accents, neutral foundations, and the category spectrum that powers icons, toolbars, and charts across the site.
Logo
Two SVG lockups cover the site: primary for light surfaces and light for dark UI. Always keep the mark and wordmark together.
Primary on paper
Use on off-white surfaces and subtle neutral panels where pure white feels too stark.
Light logo
Reversed lockup for dark teal, carbon dashboards, photography overlays, and the 404 page.
Light on carbon
Use on near-black UI shells, dark mobile nav drawers, and high-contrast hero treatments.
Clear space
Keep clear space on all sides equal to the cap height of the letter S in Silverback. No type, icons, or artwork may enter that zone.
Do
- Use the primary logo on white, paper, and other light neutral surfaces.
- Use the light logo on Dark Teal, Carbon, or dark photography with strong contrast.
- Keep the gorilla mark and Silverback wordmark together as a single unit.
- Scale proportionally. Minimum digital width is 120px unless a documented compact nav treatment applies.
- Link the logo to the homepage on every page except the homepage itself.
- Download SVG source files for web, slide decks, and partner materials.
Do not
- Do not stretch, squash, rotate, or skew the lockup.
- Do not recolor the logo outside the approved primary and light SVG files.
- Do not place the primary logo on busy photography without a solid contrast panel.
- Do not add drop shadows, outlines, glows, or decorative effects.
- Do not pair the primary logo with mid-tone teal backgrounds where contrast fails.
- Do not rebuild the wordmark in a substitute typeface or separate the icon from the name.
Source files
Open or copy the SVG paths below. Right-click any preview and choose Save link as to download.
Typography
Three typefaces: Inter Tight for UI and headings, Instrument Serif for italic accent words, JetBrains Mono for labels. All ship through Next.js Google Fonts with `display: swap`.
Strategy-led growth
Inter Tight
Primary UI and body
var(--font-inter-tight), ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif
- Body copy, navigation, buttons, forms, and card text
- Headings h1–h3 (weight 500, negative tracking)
- Default font on `<body>` via `font-family: var(--sans)`
search & AI
Instrument Serif
Accent display
"Instrument Serif", "Iowan Old Style", Georgia, serif
- Italic accent words inside headlines (`.accent`, `.serif`)
- Hero and section titles on homepage, services, solutions, and resources
- Pull quotes and decorative emphasis — never for long body paragraphs
SEO · GEO · PPC
JetBrains Mono
Labels and metadata
var(--font-jetbrains-mono), ui-monospace, "SF Mono", Menlo, monospace
- Eyebrows and kickers (`.eyebrow`, `.sg-kicker`, `.sg-eyebrow`)
- Dashboard labels, KPI captions, chart keys, and meta timestamps
- Brand standards page labels and copy-to-clipboard hints
Search & AI Visibility
Know how your brand shows up in AI search
Headlines stay in Inter Tight. One or two accent words switch to Instrument Serif italic in Teal. Eyebrows and kickers use JetBrains Mono uppercase labels.
Resources
SEO and GEO resources for traditional search and AI discovery.
Marketing templates use the same accent pattern inside `.sg-hero` blocks on light and dark surfaces.
| Element | Size | Weight | Tracking | Line height | Notes |
|---|---|---|---|---|---|
h1 | clamp(48px, 6vw, 84px) | 500 | -0.035em | 1.05 | Homepage and marketing heroes; pair with `.accent` or `.serif` span for teal italic emphasis. |
h2 | clamp(36px, 4.2vw, 56px) | 500 | -0.03em | 1.05 | Section heads on light and dark bands; CTA band titles scale to clamp(40px, 5vw, 68px). |
h3 | 22px | 500 | -0.015em | 1.05 | Card titles, sidebar blocks, and subsection labels. |
.lede / .sg-lede | 19–20px | 400 | normal | 1.55 | Hero and section intro copy; use `--muted` on light, `--muted-dark` or #B7BFB7 on dark heroes. |
body | 16px | 400 | normal | 1.5 | Site default; antialiased with optimizeLegibility. |
.eyebrow / .sg-kicker | 11–14px | 400 | 0.16em | normal | Uppercase label with teal dot pseudo-element (`::before`). |
h1Build a smarter growth strategy.
h2What we help teams improve.
h3Technical SEO foundations
.lede / .sg-ledeTeal-first brand accents, neutral charcoal foundations, and a category spectrum that powers service icons.
bodySilverback helps growth teams diagnose constraints, prioritize the next move, and report in language executives trust.
.eyebrow / .sg-kickerSearch & AI VisibilityAccent rules
- Wrap one or two emphasis words in `<span class="accent">` or `<span class="serif">` inside h1/h2 — not entire headlines.
- Accent spans use Instrument Serif, italic, weight 400, and Teal (`--accent`) on light or dark sections.
- Do not use Instrument Serif for paragraphs, nav labels, or button text.
- Keep mono labels uppercase with 0.16em letter-spacing; do not sentence-case eyebrows.
Do not
- Do not substitute Arial, Georgia, or system serif for Instrument Serif in accent spans.
- Do not use JetBrains Mono for headings or long-form body copy.
- Do not set headings below weight 500 or remove negative letter-spacing on h1/h2.
- Do not mix a fourth typeface without design review.
- Do not bold Instrument Serif accent words — italic weight 400 is the approved treatment.
CSS tokens
--sans· Inter Tight stack (body default)--serif· Instrument Serif stack (accent spans)--mono· JetBrains Mono stack (labels).serif· italic accent helper class
Eyebrows
One eyebrow spec sitewide: a JetBrains Mono uppercase label with a 6px teal dot. The size and tracking never change; only the dot tone and the surface do.
Meet the team
Default on light surfaces: text in Muted #3A3A3A, dot in Teal #21808D.
Who we are
On dark surfaces the text switches to Muted Dark #A8A8A8; the dot stays Teal.
FontJetBrains Mono (--mono)
Size14px, never resized
Tracking0.16em
CaseUppercase
Dot6px round, 8px gap, Teal #21808D
TextMuted #3A3A3A on light, Muted Dark #A8A8A8 on dark
Classes
Dot variations
Category-scoped content may recolor the dot using the category spectrum. The label text never changes color. Click a card to copy the hex.
Do not
- Do not change the 14px size or 0.16em tracking, even when a section feels cramped.
- Do not set eyebrows in sentence case or swap the mono font.
- Do not remove the dot; it is part of the mark.
- Do not color the text; variations apply to the dot only.
Brand core
The teal family anchors accents, CTAs, and chart highlights. Pacific Blue is the lighter interactive tone; Dark Teal adds depth in data visualization.
Neutrals
Carbon through platinum: the ink and paper system for typography, surfaces, borders, and dark hero dashboards.
Category spectrum
Six accent hues differentiate service pillars, hub cards, and capability groups. Each ships with faint and pale tints for borders and fills.
Teal
Search & intelligence
Coral
AI & content
Purple
Paid media
Blue
Analytics & reporting
Rose
CRM & lifecycle
Sage
Web & automation
Toolbar & icons
Category colors appear on capability icon pills, tool-stack signal badges, and service hub accents. Brand logos in the toolbar stay full-color.
CTA buttons
Two class families share the same visual language: `.btn` on the homepage, CTA bands, and light sections; `.sg-btn` on dark marketing heroes. Primary fills use Pacific Blue; ghost buttons stay transparent with a border.
Light surface
Homepage sections, resource strips, and forms on paper.
Dark surface
Marketing heroes, service pages, and pre-footer CTA bands.
Marketing hero (`.sg-btn`)
Dark `.sg-hero` blocks on services, solutions, resources, and about pages.
`.btn` family
Defined in `silverback.css`. Used with `.hero-ctas`, `.cta-band .actions`, and light UI.
Primary
Default conversion action
btn btn-primary- Homepage hero primary
- Pre-footer CTA band
- Resource strip CTAs
- Search submit
Primary + arrow
Primary with motion cue
btn btn-primary btn-arrow- Homepage hero
- CtaBandMarketing primary
- Browse / explore links on light sections
Ghost
Secondary action
btn btn-ghost- Hero secondary CTA
- CtaBandMarketing secondary
- Tertiary navigation actions
Ghost + arrow
Secondary with forward motion
btn btn-ghost btn-arrow- Homepage section browse links
- Insights module head CTA
`.sg-btn` family
Defined in `silverback.css`. Used inside `.sg-actions` on dark marketing templates.
Primary
Default conversion action on dark heroes
sg-btn sg-btn-primary- SgMarketingHero primary
- Service page heroes
- Solution page CTAs
- Form submit buttons
Ghost
Secondary action on dark heroes
sg-btn sg-btn-ghost- SgMarketingHero secondary
- Service page hero pairs
- Bottom-of-page CTA rows
Anatomy
| Padding | 14px 22px |
|---|---|
| Border radius | 8px |
| Font size | 15px |
| Font weight | 500 (`.btn`) · 600 (`.sg-btn`) |
| Icon gap | 10px |
| Hover lift | translateY(-1px) |
| Arrow motion | → shifts +3px on hover (`.btn-arrow` only) |
Color states
- Primary fill
--accent-2 · #2CA0ABPacific Blue — default background for `.btn-primary` and `.sg-btn-primary`
- Primary hover
--accent · #21808DTeal — hover background on primary buttons
- Ghost on light
--text · #1A1A1ATransparent fill, ink border and label
- Ghost on dark
currentColor · #FFFFFFTransparent fill, white label, rgba(255,255,255,.35) border
Do
- Pair one primary and one ghost button in heroes and CTA bands. Primary leads; ghost supports.
- Use `.btn-primary btn-arrow` when the action moves the user forward to a form, audit, or booking flow.
- Use `.sg-btn` on dark marketing heroes (`.sg-hero`, service pages). Use `.btn` on homepage, CTA bands, and light sections.
- Keep labels action-oriented and short: Request an audit, Book a discovery call, Browse articles.
- Stack CTAs with 12px gap inside `.hero-ctas`, `.sg-actions`, or `.cta-band .actions`. Wrap on small screens.
- Use `<button class="sg-btn sg-btn-primary">` for form submits; use `<Link>` for navigation CTAs.
Do not
- Do not place two primary-filled buttons side by side.
- Do not recolor primary buttons outside `--accent-2` / `--accent` without design review.
- Do not remove the 8px radius or switch to pill shapes on marketing pages.
- Do not use ghost buttons on busy photography without a dark scrim or solid panel behind them.
- Do not mix `.btn` and `.sg-btn` in the same CTA row unless migrating a legacy block.
- Do not add icons inside button labels except the built-in `.btn-arrow` pseudo-element.
Markup patterns
<Link className="btn btn-primary btn-arrow" href="..."><Link className="sg-btn sg-btn-primary" href="..."><div className="sg-actions">...</div><div className="cta-band dark"><div className="actions">...</div></div>
Semantic
Supporting tones for warnings, negative trends, and grade indicators outside the primary palette.
CSS custom properties
Reference tokens defined in silverback.css :root. Prefer variables over hard-coded hex in new components.
| Token | Hex | Role |
|---|---|---|
--dark-teal | #004C54 | Chart muted · depth |
--accent | #21808D | Primary accent |
--accent-2 | #2CA0AB | CTA · hero highlights |
--accent-soft | #D9ECEF | Tinted surface |
--chart-muted-text | #9FD4DA | Data viz label |
--ink | #1A1A1A | Primary dark |
--ink-2 | #232323 | Elevated dark |
--ink-3 | #2E2E2E | Inset dark |
--paper-2 | #EEEEEE | Muted surface |
--paper | #FFFFFF | Primary light |
--line | #E2E2E2 | Border |
--text | #1A1A1A | Body copy |
--muted | #3A3A3A | Secondary text |
--muted-2 | #6B6B6B | Tertiary text |
--muted-dark | #A8A8A8 | Dark surface text |
--warn | #B25A1F | Caution |