1
Standard card
Use for general benefits, features and informational content.
Master hero eyebrow
This is the approved SiriusXM Trucking hero structure.
Every primary landing page should use this hierarchy, typography scale, spacing and button treatment unless the page has a documented reason to use another layout.
Typography system
One hierarchy across the entire site
Future SiriusXM Trucking pages should use these typography classes and values instead of creating page-specific font sizes.
Eyebrow example
Primary page heading
This is lead copy used directly beneath a major page or section heading.
Standard section heading
Section introductions use the same lead size and line height throughout the site.
Standard subsection heading
Standard body content remains consistent regardless of which landing page it appears on.
Master values
Core measurements
These measurements should not drift from page to page.
Page width
1240px maximum
Hero height
590px desktop minimum
Hero padding
72px top and bottom
Section spacing
76px standard
Body text
16px
Lead text
17px
Eyebrow
14px sentence case
Card radius
14px standard
Card padding
28px standard
Button height
50px minimum
Button radius
7px
Grid gap
22px standard
Color system
Approved SiriusXM Trucking palette
Page-specific colors should be used sparingly. SiriusXM blue, neutral grays, white and black remain the core visual language.
SiriusXM blue
#0000eb
Light blue
#54bfff
Black
#0f0f10
Light neutral
#f8fafc
Pale blue
#eef4ff
Button system
Approved CTA treatments
Button height, font weight, radius and horizontal padding stay consistent across pages.
Card system
Consistent cards and content blocks
Different page topics can use different content, but the surrounding card treatment remains consistent.
2
Consistent spacing
Card padding and internal typography do not change between landing pages.
3
Consistent styling
Border radius, outline and shadow are drawn from the master tokens.
Standard visual panel
Approved two-column structure
Use this layout when a page needs a visual, promotional panel or supporting information next to primary content.
Split content section
Keep content proportions uniform
Individual pages can change the content inside each column while retaining the same grid relationship, heading structure and spacing.
Feature one
Consistent title
Supporting copy follows the approved card scale.
Feature two
Consistent title
Supporting copy follows the approved card scale.
Step system
Approved numbered process layout
Use this component whenever a page needs to explain a process, setup sequence or purchasing workflow.
First step
Use the same title and supporting-copy scale.
Second step
Maintain the same internal spacing and alignment.
Third step
Do not create a new step style for individual pages.
Long-form content
Approved SEO and informational content hierarchy
Standard subsection heading
Longer informational sections should use this paragraph size, line height and content width. This prevents SEO sections on one page from appearing larger, denser or more compressed than similar content on another page.
Another standard subsection
Links inside informational copy use the SiriusXM blue, heavier font weight and a simple underline treatment. This is the approved inline-link appearance.
Data presentation
Standard pricing and comparison table
Tables should use this structure instead of introducing different typography, borders or spacing on each page.
| Example | Category | Value | Notes |
|---|---|---|---|
| Option 1 | Standard | $0.00 | Example table row |
| Option 2 | Standard | $0.00 | Example table row |
| Option 3 | Standard | $0.00 | Example table row |
Standard closing CTA
Every landing page should end with a clear next step.
Closing CTA sections use the same dark treatment, typography hierarchy, spacing and button structure.