Streakwave website system

Build every page with purpose.

This handbook defines the reusable decisions behind a clear, capable Streakwave experience: hierarchy, color, type, components, layouts, and conversion patterns. Use it before creating a page—not after.

Start with foundations Read the rules

How to use this handbook

Start with the system. Then solve the task.

This is the reference for decisions shared across Streakwave.com. Use the foundation before choosing a component; use the component before creating a new variation; use the pattern to make the experience consistent from page to page.

01FoundationsIdentity, color, typography, spacing
02ComponentsControls, fields, status, navigation
03LayoutsCommerce, dashboard, and catalog structures
04PatternsBehavioral rules that protect trust

01 / Foundations

Use a system, not a collection of styles.

Foundations are the non-negotiable decisions that make separate pages feel like one Streakwave experience: an intact signature, intentional color roles, and typography that separates commerce from editorial content.

Typography system

New Hero

New Hero is the single typeface for every Streakwave touchpoint: navigation, product data, actions, headlines, and supporting copy.

Create contrast with scale, weight, spacing, and color—not a second typeface.

One family: New HeroRegular 400Medium 500Bold 700ExtraBold 800

Color system

Use brand color for recognition and action; use neutrals for structure; use semantic colors only for meaningful status.

Brand & action

Streakwave Navy--swav-colorwheel-primary · #1F3A6D

Navy Hover--swav-colorwheel-primary-hover · #295288

Action Purple--swav-colorwheel-accent-purple · #5724E8

Purple Hover--swav-colorwheel-accent-purple-hover · #421EC4

Accent Gold--swav-colorwheel-accent · #FDCB69

Gold Hover--swav-colorwheel-accent-hover · #E4B44D

Neutrals & surfaces

Ink--swav-colorwheel-text-default · #252525

Muted text--swav-colorwheel-text-muted · #444444

White--swav-colorwheel-white · #FFFFFF

Black--swav-colorwheel-black · #000000

Light gray--swav-colorwheel-light-gray · #F6F6F6

Off white--swav-colorwheel-off-white · #F9F9F9

Gray border--swav-colorwheel-gray-border · #DDDDDD

Table header--swav-colorwheel-table-header · #F0F0F0

Search background--swav-colorwheel-search-bg · #F5F5F5

Input border--swav-colorwheel-input-border · #B0B0B0

Placeholder--swav-colorwheel-placeholder · #AAAAAA

Muted icon--swav-colorwheel-muted-icon · #888888

Semantic status

Information background--swav-colorwheel-info-bg · #E0F0FF

Information border--swav-colorwheel-info-border · #3399FF

Warning background--swav-colorwheel-warning-bg · #FFF4CC

Warning border--swav-colorwheel-warning-border · #E6B800

Error background--swav-colorwheel-error-bg · #FFE6E6

Error red--swav-colorwheel-error-red · #CC0000

Success green--swav-colorwheel-success-green · #2E8540

Spacing & shape

8162440

Use the 4px base unit to create rhythm. Use 8–16px inside controls, 24px between related groups, and 40px when one decision needs to separate from the next. Corners stay square unless a component has a functional reason to round.

01.1 / Logo system

The signature identifies the source.

The wordmark and the Streakwave are one complete piece of artwork. The Streakwave is the curve that becomes the V and carries the mark’s sense of connection. Preserve both elements, use an approved single-color version, and protect their clear space.

Primary signature / Wordmark + StreakwaveOriginal vector artwork · 305 : 60

Streakwave Navy · #1F3A6DDefault on white or light neutral surfaces

01 / Primary navyDefault for light surfaces

02 / Reversed whiteFor solid navy only

03 / Single-color blackFor monochrome output

xxxx

Give the signature space.

Set x to the wordmark letter height, excluding the Streakwave. Keep at least 1x clear on every side of the complete signature, measured from the outermost Streakwave and letterforms.

50px high

≈254px wide

Digital ≥ 50px high
Native ratio ≈ 254px wide
Print ≥ 35mm wide

Keep fine details legible.

Use the full signature at 50px high or larger. At its native 305:60 ratio, 50px high is approximately 254px wide. The measured specimen is capped at 50px high; never reduce the signature below this size.

Protect the signature

Do not modify the supplied artwork.

Don’t stretch

Don’t rotate

Don’t add effects

Don’t improvise color

01.2 / Typography system

Make the next decision easy to scan.

New Hero is the sole working typeface for Streakwave. Build hierarchy through its weight range, scale, spacing, and purposeful color—not through competing type families.

System typeface / New Hero

One family. Clear hierarchy.

Use New Hero for every website moment: navigation, interface, product content, campaign headlines, long-form body copy, price, and data. Its four approved weights create enough contrast without fragmenting the system.

Regular400 · Body and supporting copyMedium500 · Headings and navigationBold700 · Labels and actionsExtraBold800 · Price and high-priority data

H1 / Page titleReliable connections start here.40px / 48px
New Hero · 500

H2 / SectionBuild with a clear system.34px / 42px
New Hero · 500

H3 / ComponentProduct decision surface28px / 36px
New Hero · 500

Body

Use body text to explain the useful next step. Keep reading measures comfortable, language direct, and paragraphs short enough to scan.

16px / 25.6px
New Hero · 400

Campaign / displayBuild the moment with purpose.34px / 42px
New Hero · 500

LabelInventory available now14px / 18px
New Hero · 700

Let size establish hierarchy.

Use weight for decisions, not decoration. New Hero Medium is enough for headings; ExtraBold belongs to price and critical data.

Use one family consistently.

New Hero creates all required contrast through its approved weights, scale, spacing, and color. Do not introduce a second display or editorial face.

Keep reading comfortable.

Use 45–75 characters per line for body copy, left alignment, and the canonical 1.6 body line height.

02 / Components

Use familiar controls consistently.

Components should reduce effort, not introduce a new visual language on every page. Reuse the approved action, status, and field patterns before inventing a new one.

Actions

Use one filled action for the page’s primary outcome. Use an outline for a meaningful alternative. Use a quiet action only when the task is optional or reversible.

Status language

In Stock — AvailableLow Stock — Act soonBackorder availableOut of stock

Inputs & filters

Search product catalog

In stock only Show promotions

02.1 / Button system

Make the next action obvious.

Buttons move a visitor forward. Their visual weight must reflect the consequence of the action: one primary commitment, one meaningful alternative when needed, and quiet text actions for secondary or reversible tasks.

Primary action

Use once per decision surface for the action that completes the customer’s task. Action Purple is reserved for this role.

Secondary action

Use when a legitimate alternative exists but must not compete with the primary action.

Quiet action

Use for optional, low-risk actions. A quiet action never stands alone as the only path forward.

Gradient action

Reserve for a featured campaign or high-value conversion moment. Never use for add to cart, checkout, destructive actions, or dense utility screens.

Label the outcome.

Start with a precise verb: Add to cart, Request a quote, Download spec sheet. Avoid generic labels such as Submit, Click here, or Learn more.

Keep hierarchy intact.

Do not place two filled primary buttons in the same decision surface. If choices are equal, use a selection step before the action.

Design every state.

Use the supplied hover token, a visible keyboard focus treatment, and a disabled state only when the reason is immediately explained.

02.2 / Gradient system

Add atmosphere without competing with the message.

Gradients are an expression layer, not a color substitute. Use the approved Signal Depth gradient only for large editorial or conversion surfaces where it can create depth behind high-contrast content. Keep product, data, and form surfaces solid.

Approved / Signal Depth

Depth for a focused moment.

Use on a hero, campaign panel, or full-width call to action. White content and a gold eyebrow preserve hierarchy.

radial + linear / Streakwave Navy family

Default / Solid surfaces

Clarity for decisions.

Use white, off-white, or Streakwave Navy for catalog cards, dashboards, forms, tables, and product purchase surfaces.

WhiteOff whiteStreakwave Navy

Use at a meaningful scale.

Gradients belong on a full-bleed or large contained surface—never inside small controls, table cells, or product cards.

Keep copy readable.

Place text over the deepest area, use white for primary copy, and validate contrast after any crop or responsive change.

Motion remains ambient.

If animation is used, drift light fields slowly and honor reduced-motion preferences. Never tie it to scroll or let it distract from an action.

03 / Ecommerce navigation

Help shoppers find, decide, and continue.

The ecommerce header has three jobs: get a user to the right product quickly, make account and cart state obvious, and preserve orientation when the catalog becomes deep.

Customer serviceTools & resourcesContact

Promotions Closeout dealsSupport Back to top

Hierarchy

Keep service links quiet. Make search, product discovery, account, and cart visible in the primary row. Never let marketing links compete with the cart.

Interaction

Open desktop mega menus from a deliberate trigger and close them predictably. On mobile, use a focused panel or accordion—never a shrunken desktop menu.

Content

Name categories in customer language. Keep critical catalog paths within two levels and make the active location visible through the page, not color alone.

04 / Commerce patterns

Put purchase-critical facts in one decision surface.

A product list exists to help a buyer compare, trust availability, and take the next step. Price, stock, fulfillment detail, and action must remain visible, truthful, and aligned—without forcing the user to hunt.

U Ubiquiti

Enterprise Fortress Gateway

SKU: UBI-EFG

Use the list row to show only the facts that help a buyer decide: product family, identifying SKU, a concise capability summary, and a clear path to purchase.

U Ubiquiti

UniFi G6 Mini Dome Camera

SKU: UBI-UVC-G6-MINI-DOME

05 / Dashboard design

Show what changed and what requires action.

A dashboard is not a wall of metrics. It is an operating surface: show the current state, elevate exceptions, and connect every number to an accountable next step.

Open orders148↑ 12% this week

Inventory alerts18Needs review

Revenue$84.2k↑ 8.4% this week

Fulfillment96.8%On target

Revenue trendLast 30 days

Needs attention

18 products below reorder pointReview
6 orders awaiting approvalOpen
Daily inventory feed completeView

Recent ordersView all

Order	Customer	Status	Total
#SW-10482	Alpine Networks	Shipped	$2,469.00
#SW-10481	Signal Ridge	Pending	$1,189.00

Show the exception

Put alerts, overdue work, and meaningful movement ahead of historical detail. Pair every color state with an explicit label or icon.

Design for action

Every KPI should lead to a useful detail view, filter, report, or owner action. If a number cannot change a decision, it does not deserve the first screen.

Protect density

Use a consistent grid, quiet dividers, and predictable data columns. Dense information needs alignment and hierarchy—not decorative cards.

06 / Scaffolding

Start with structure before styling.

Scaffolding defines how catalog content behaves before visual treatment is applied. Choose List when comparison needs context; choose Grid when image-led scanning is the task.

Media

ManufacturerProduct title and supporting detailSKU: EXAMPLE-001

$199.00● In stock

Media

ManufacturerA second product titleSKU: EXAMPLE-002

$89.00● In stock

Copy the scaffolding CSS

.sg-catalog--list .sg-product { display: grid; grid-template-columns: 180px minmax(0, 1fr) 300px; }
.sg-catalog--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-product__buy { display: flex; flex-direction: column; }
.sg-product__buy button { margin-top: auto; }

/* List price/stock surfaces must never crop their content. */
.sg-product__buy { overflow: visible; }

07 / Experience rules

Protect clarity, trust, and completion.

These rules apply across templates. They prevent local styling decisions from hiding critical information, changing product truth, or creating inconsistent purchase behavior.

Never crop commerce data

Price, savings, availability, warehouse detail, and purchase controls may grow. Their containers must show the complete state at every breakpoint.

Keep the action anchored

In List view, match the purchase column to the media height and place the primary CTA at the bottom. The buyer should always find the next action in the same place.

Make add-ons scannable

Use a stable choice, detail, and price structure. Allow product detail to wrap; keep choice and price legible without horizontal collisions.

Preserve price truth

The server-rendered customer price is the source of truth. Formatting, attribute refreshes, and client-side behavior must never replace it with an incorrect value.

08 / Conversion pattern

Ready to connect with us?

Use this full-width CTA after a high-information section when the next step is a conversation. State the outcome, make the primary action explicit, and offer one lower-commitment alternative.

Schedule a demo How it works