SW Sprocket Rocket Theme Tester

Live reference for Global Theme Styles and optional SW Theme Settings. Update theme settings and refresh this page to verify typography (including responsive/clamp), colors, buttons, containers, and misc tokens.

Brand & email footer

Values from Brand Kit and Marketing → Email → Configuration (footer / company address). Empty rows mean the portal should configure them.

Brand Kit

Primary logo

Primary logo from Brand Kit

Favicon

Favicon from Brand Kit

Fonts

Font names from Brand Kit when HubL exposes them (bodyFont / headingFont, etc.). If those tokens are empty, values below match Global Theme Styles → Typography (fonts in use on this theme).

Heading font
Roboto (theme)
Body font
Roboto

Brand colors

Primary, secondary, and three accent colors from Brand Kit (brand_settings.* + |hex).

  • Primary
    Not set
  • Secondary
    Not set
  • Accent 1
    Not set
  • Accent 2
    Not set
  • Accent 3
    Not set

Email footer / organization

Company name
Smithworks, LLC
Address line 1
584 E. Burney Glen Drive
Address line 2
—
City
Meridian
State / region
Idaho
Postal code
83646
Country
United States

Colors

Swatches use CSS variables from compiled theme output (:root). Hex values below match Global Theme Styles (same source as the variables).

For Sprocket Rocket themes that include the SW Theme Settings add-on, links on dark backgrounds (e.g. .bg-dark, .text-light bands) are controlled in SW Theme Settings — not by the main link color / link hover fields alone. The “Same palette on dark background” preview below shows both theme utility colors and that dark-link treatment.

Brand & text (light section)

primary
#182120
secondary
#e63c26
tertiary
#182120
body bg
#fff
body color
#111111
heading
#111111
borders
#e5e7ea
link color
#0072b2
link hover color
#45a1d7

Utility

success
#0072b2
info
#7ccbf8
warning
#FFD966
danger
#E06666
light
#ededed
dark
#333333
white
#ffffff
black
#000000

Gradients

Gradients are CSS values (not a single hex). Source: theme.colors.gradient_one.css / gradient_two.css.

gradient_one
linear-gradient(to bottom, rgba(0, 114, 178, 1), rgba(0, 0, 0, 1))
gradient_two
linear-gradient(to right, rgba(0, 114, 178, 1), rgba(0, 0, 0, 1))

Same palette on dark background

primary
#182120
secondary
#e63c26
tertiary
#182120
success
#0072b2
info
#7ccbf8
warning
#FFD966
danger
#E06666
light
#ededed
gradient_one
linear-gradient(to bottom, rgba(0, 114, 178, 1), rgba(0, 0, 0, 1))
gradient_two
linear-gradient(to right, rgba(0, 114, 178, 1), rgba(0, 0, 0, 1))

Link on light

Uses link color / link hover color from this Colors section. Sample: in-page link.

Link on dark

With SW Theme Settings, uses dark-band link variables. Sample: in-page link. Details: SW Theme Settings.

Dark-band link colors are set in SW Theme Settings when that add-on is enabled (see below). The link color and link hover color swatches above apply to typical body copy on light backgrounds.

Typography

Headings and display classes are driven by theme typography settings (including responsive min/max where enabled).

SampleNote

Heading 1

One H1 per page in production.

Heading 2

Section titles.

Heading 3

Subsections.

Heading 4

Fourth level.
Heading 5
Fifth level.
Heading 6
Sixth level.

Linked heading 2

Linked heading inherits theme link colors.

Display 1

Display scale.

Display 2

Display 3

Display 4

Lead paragraph — introductory emphasis.

.lead / .large

Body (.p) uses base font size and line height from theme.

Rich text body pattern.

Small / fine print

.small
Blockquote sample for theme quote styling.
blockquote / .blockquote

Wrapping headings

This heading 1 is intentionally long so you can check line height and balance.

This heading 3 wraps across multiple lines for the same reason.

This heading 5 needs even more words to wrap because the type size is smaller.

This heading 2 wraps to show spacing relative to body copy and other levels.

This heading 4 also wraps; compare rhythm with the column to the left.

This heading 6 is the smallest level and needs extra words to demonstrate wrapping.

General styles

Light background

Standard paragraph with in-page link, strong, emphasis, sup, sub, strikethrough, and underline.

.text-primary · .text-secondary · .text-dark

Ordered list

  1. First item
  2. Linked item
  3. Nested
    • Nested A
    • Nested B

Unordered list

Blockquote in a light section.

Horizontal rule:

/* sample code */

Dark background

Paragraph on dark with link (uses SW dark-background link variables when SW Theme Settings are present).

code on dark

Images

Sample rich-text image using theme border radius (.sr-border). Placeholder hosted at smithworks.marketing (not copied into the theme).

Pillar section placeholder — sample imagery for theme preview

Tables

Light background

TitleStatusUpdated
Sample row linkActiveMar 24, 2026
Another rowDraftMar 23, 2026
Row with longer title for wrapping testsScheduledMar 22, 2026
Plain title, no linkArchivedMar 21, 2026
Short linkReviewMar 20, 2026

Dark background

TitleStatus
Sample linkOK
Second rowOK
Third row with linked titleOK
Fourth row plain textPending
Fifth row — another linkOK

Forms & inputs

Native fields pick up theme input styling from base-overrides (not a HubSpot form module).

Pagination

Minimal pager pattern for blog/listing contexts (theme colors).

Containers

Max widths from Containers in global settings.

Outer wrapper: default .container (this section is already inside one).

.container-small — narrow max width.

.container-large — wide max width.

Misc

.sr-card uses card background + opacity from theme. .sr-border uses border color and radius.

.sr-card.sr-border — card surface sample.

Border utility only (.sr-border) on body background.

SW Theme Settings

These options feed :root in sw-theme-settings.css (for example --link_color_dark_bg, --link_hover_color_dark_bg, --link_visited_color_dark_bg, and link text-decoration variables).

Dark-background link colors

  • Link (dark background)
    #7dd3fc
  • Link hover (dark background)
    #bae6fd
  • Link visited (dark background)
    #7dd3fc
Link text decoration
underline
Link hover text decoration
underline
Show button focus border
true

Link appearance: light vs dark

Link on light background uses link color and link hover color from the Colors section above (Global Theme Styles). Link on dark background uses the SW Theme Settings colors and text-decoration choices in this section.

Samples on a light page background

Link on light

From Colors (link / hover). Example: in-page link.

Link on dark

SW dark-band tokens. Example: in-page link.

Samples inside a dark section band

Same pairing when both panels sit inside a dark region (e.g. hero or footer band). Link on light still uses the Colors link swatches; the inset panel is only a light surface for contrast.

Link on light

Still from Colors link / hover. Example: in-page link.

Link on dark

SW Theme Settings on native dark surface. Example: in-page link.

Tab to a button in the Buttons section to verify the focus ring when Show button focus border is enabled.