Skip to main content
Brand
Changelogv0.43

Visual identity

ShipSigma

AI-powered freight intelligence platform for carrier benchmarking, spend analytics, and shipping cost control.

Light surfacePrimary wordmark
Dark surfaceApproved dark artwork

Compact identity

Favicon scale

logoSvg
16px
32px
48px
Dark

Semantic system

Brand colour

data-brand
PrimaryIdentitySecondarySupportAccentHighlightNeutralContent
Brand ID
shipsigma
Token package
@brandos/tokens/css/shipsigma
Heading
Open Sans
Body
Open Sans

01.01 · Shipsigma Blue ramp

19 shades of Shipsigma Blue

Shipsigma Blue identity ramp generated from canonical shipsigma token data.

01.02 · Shipsigma Orange ramp

19 shades of Shipsigma Orange

Shipsigma Orange identity ramp generated from canonical shipsigma token data.

01.03 · Shipsigma Gray ramp

19 shades of Shipsigma Gray

Shipsigma Gray identity ramp generated from canonical shipsigma token data.

01.04 · Semantic slots

Meaning over hue

Components consume semantic slots, never raw ramps. The hue can evolve; the meaning shouldn't.

Brand PrimaryAnchor identity & CTAs
Token
--semantic-brand-primary
Class
bg-primary
Brand AccentHighlights & accents
Token
--semantic-brand-accent
Class
bg-accent
Surface 1Card surfaces & chrome
Token
--semantic-surface-1
Class
bg-base-100
ContentBody & headings text
Token
--semantic-content-primary
Class
text-base-content
InformativeInformation & neutral cues
Token
--semantic-status-informative
Class
text-info
SuccessPositive & confirm states
Token
--semantic-status-success
Class
text-success
WarningCaution & warning states
Token
--semantic-status-warning
Class
text-warning
ErrorDestructive & error states
Token
--semantic-status-error
Class
text-error

02 · Typography

Open Sans on display · Open Sans for everything else

Heading and body families resolve from the canonical effective specification and its font registry.

Heading typefaceOpen Sans
--brandOS-font-heading
Display specimen

ShipSigma moves with purpose.

Family
Open Sans
Registry ID
open-sans
Primary use
Display and hierarchy
  • H1 · DisplayThe system in practice
  • H2 · Section89 brands, one system
  • H3 · CardProfile contract
Size
4xl
Leading
Tight
Weight
Bold
Body typefaceOpen Sans
--brandOS-font-body
Reading specimen

Clear systems make complex decisions feel simple, consistent, and unmistakably on brand.

Family
Open Sans
Registry ID
open-sans
Primary use
Reading and interface
  • LedeA clear, generous opening that orients the reader fast.
  • BodyStandard paragraph text. The quick brown fox jumps over the lazy dog.
  • CaptionSmall print, footnotes, and metadata.
Size
Base
Leading
Normal
Weight
Regular

03 · Effective specification

Registry-resolved visual contract

One resolved source for every visual rule

Version 1.0.0, effective . Every rule below is generated from the canonical registry projection.

Resolution fingerprintThree-source effective identity
01Defaults
1.0.0
02Brand
1.0.0
03Content
2c025f2f1dd09e3c927a43a28e2f43dd89af15927e2d2a9f541da090314fa6f5
Authored Direct
2
Inherited Shared
0
Defaulted System
10
01

Colour and accessible pairings

defaulted

Token usage, print values, gradients, accent discipline, and derived WCAG pairings.

20 resolved values
PrimaryBrand Primary
AccentBrand Accent
SurfaceSurface 1
ContentContent Primary
Brand gradient135deg
InfoStatus Informative
SuccessStatus Success
WarningStatus Warning
ErrorStatus Error
Technical details20 canonical values and registry paths
Accent Token Refs 0
--semantic-brand-primarygroups.colors.accentTokenRefs[0]
Accent Token Refs 1
--semantic-brand-accentgroups.colors.accentTokenRefs[1]
Body Surface Token Ref
--semantic-surface-1groups.colors.bodySurfaceTokenRef
Body Text Token Ref
--semantic-content-primarygroups.colors.bodyTextTokenRef
Direction
135deggroups.colors.gradients[0].direction
From Token Ref
--semantic-brand-primarygroups.colors.gradients[0].fromTokenRef
Id
brand-accentgroups.colors.gradients[0].id
To Token Ref
--semantic-brand-accentgroups.colors.gradients[0].toTokenRef
Enforceable
Nogroups.colors.guidance[0].enforceable
Id
accessible-color-usegroups.colors.guidance[0].id
Text
Use canonical content pairs for text on semantic surfaces and status fills.groups.colors.guidance[0].text
Groups Colors Print Values
No additional entriesgroups.colors.printValues
Content Token Ref
--semantic-status-error-contentgroups.colors.status.error.contentTokenRef
Token Ref
--semantic-status-errorgroups.colors.status.error.tokenRef
Content Token Ref
--semantic-status-informative-contentgroups.colors.status.informative.contentTokenRef
Token Ref
--semantic-status-informativegroups.colors.status.informative.tokenRef
Content Token Ref
--semantic-status-success-contentgroups.colors.status.success.contentTokenRef
Token Ref
--semantic-status-successgroups.colors.status.success.tokenRef
Content Token Ref
--semantic-status-warning-contentgroups.colors.status.warning.contentTokenRef
Token Ref
--semantic-status-warninggroups.colors.status.warning.tokenRef
02

Typography

authored

Font roles, the base type ladder, and sparse responsive overrides.

12 resolved values
Canonical hierarchy

A distinct voice, built to scale.

The quick brown fox jumps over the lazy dog. Clear typography gives every branded surface a recognisable rhythm.

Caption and supporting metadata remain readable at compact sizes.
Aa
HeadingOpen Sans
Text 4xl2.5–4rem
Aa
BodyOpen Sans
Text Base0.875–1rem

The base hierarchy scales without brand-specific overrides.

Technical details12 canonical values and registry paths
Font Id
open-sansgroups.typography.baseLadder[0].fontId
Id
headinggroups.typography.baseLadder[0].id
Line Height Token Ref
--brandOS-leading-tightgroups.typography.baseLadder[0].lineHeightTokenRef
Size Token Ref
--brandOS-text-4xlgroups.typography.baseLadder[0].sizeTokenRef
Weight Token Ref
--brandOS-font-weight-boldgroups.typography.baseLadder[0].weightTokenRef
Font Id
open-sansgroups.typography.baseLadder[1].fontId
Id
bodygroups.typography.baseLadder[1].id
Line Height Token Ref
--brandOS-leading-normalgroups.typography.baseLadder[1].lineHeightTokenRef
Size Token Ref
--brandOS-text-basegroups.typography.baseLadder[1].sizeTokenRef
Weight Token Ref
--brandOS-font-weight-regulargroups.typography.baseLadder[1].weightTokenRef
Groups Typography Guidance
No additional entriesgroups.typography.guidance
Groups Typography Responsive Overrides
No additional entriesgroups.typography.responsiveOverrides
03

Logo usage

defaulted

Clear space, minimum sizes, prohibited uses, and approved lockups.

8 resolved values
Technical details8 canonical values and registry paths
Clear Space Token Ref
--brandOS-space-4groups.logos.clearSpaceTokenRef
Groups Logos Co Branding Rules
No additional entriesgroups.logos.coBrandingRules
Context
Primary digital lockupgroups.logos.minimumSizes[0].context
Id
digital-primarygroups.logos.minimumSizes[0].id
Width Px
120groups.logos.minimumSizes[0].widthPx
Enforceable
Nogroups.logos.prohibitedUses[0].enforceable
Id
do-not-distortgroups.logos.prohibitedUses[0].id
Text
Do not stretch, skew, recolour, or otherwise distort a registered mark.groups.logos.prohibitedUses[0].text
04

Registered assets

defaulted

Canonical marks, imagery, and graphic assets referenced by stable identifiers.

2 resolved values
Primary lockupLight surface
Compact markApp scale
Dark surfaceApproved artwork
Canonical profile artwork registered
Technical details2 canonical values and registry paths
Groups Assets Approved Asset Ids
No additional entriesgroups.assets.approvedAssetIds
Groups Assets Guidance
No additional entriesgroups.assets.guidance
05

Responsive layout

defaulted

Breakpoint ranges, containers, grids, columns, and margins.

34 resolved values
Mobile0px+
4columns
Tablet640px+
8columns
Desktop1024px+
12columns

Margins and containers expand progressively while content order stays stable.

Technical details34 canonical values and registry paths
Columns
4groups.responsiveLayout.breakpoints[0].columns
Grid Id
mobile-gridgroups.responsiveLayout.breakpoints[0].gridId
Id
mobilegroups.responsiveLayout.breakpoints[0].id
Margin Token Ref
--brandOS-space-4groups.responsiveLayout.breakpoints[0].marginTokenRef
Max Viewport Px
639groups.responsiveLayout.breakpoints[0].maxViewportPx
Min Viewport Px
0groups.responsiveLayout.breakpoints[0].minViewportPx
Columns
8groups.responsiveLayout.breakpoints[1].columns
Container Width Px
960groups.responsiveLayout.breakpoints[1].containerWidthPx
Grid Id
tablet-gridgroups.responsiveLayout.breakpoints[1].gridId
Id
tabletgroups.responsiveLayout.breakpoints[1].id
Margin Token Ref
--brandOS-space-6groups.responsiveLayout.breakpoints[1].marginTokenRef
Max Viewport Px
1023groups.responsiveLayout.breakpoints[1].maxViewportPx
Min Viewport Px
640groups.responsiveLayout.breakpoints[1].minViewportPx
Columns
12groups.responsiveLayout.breakpoints[2].columns
Container Width Px
1280groups.responsiveLayout.breakpoints[2].containerWidthPx
Grid Id
desktop-gridgroups.responsiveLayout.breakpoints[2].gridId
Id
desktopgroups.responsiveLayout.breakpoints[2].id
Margin Token Ref
--brandOS-space-8groups.responsiveLayout.breakpoints[2].marginTokenRef
Min Viewport Px
1024groups.responsiveLayout.breakpoints[2].minViewportPx
Columns
4groups.responsiveLayout.grids[0].columns
Gutter Token Ref
--brandOS-space-4groups.responsiveLayout.grids[0].gutterTokenRef
Id
mobile-gridgroups.responsiveLayout.grids[0].id
Margin Token Ref
--brandOS-space-4groups.responsiveLayout.grids[0].marginTokenRef
Columns
8groups.responsiveLayout.grids[1].columns
Gutter Token Ref
--brandOS-space-5groups.responsiveLayout.grids[1].gutterTokenRef
Id
tablet-gridgroups.responsiveLayout.grids[1].id
Margin Token Ref
--brandOS-space-6groups.responsiveLayout.grids[1].marginTokenRef
Columns
12groups.responsiveLayout.grids[2].columns
Gutter Token Ref
--brandOS-space-6groups.responsiveLayout.grids[2].gutterTokenRef
Id
desktop-gridgroups.responsiveLayout.grids[2].id
Margin Token Ref
--brandOS-space-8groups.responsiveLayout.grids[2].marginTokenRef
Enforceable
Nogroups.responsiveLayout.guidance[0].enforceable
Id
content-first-responsivegroups.responsiveLayout.guidance[0].id
Text
Choose responsive changes from content pressure and the declared non-overlapping ranges.groups.responsiveLayout.guidance[0].text
06

Iconography

defaulted

Approved library, family, style, weight, licence, and custom exceptions.

12 resolved values
Family
Material Symbols
Style
Rounded
Weight
400
Licence
Apache License 2.0

No custom icon exceptions. One visual language stays consistent.

Technical details12 canonical values and registry paths
Groups Iconography Custom Icon Asset Ids
No additional entriesgroups.iconography.customIconAssetIds
Enforceable
Nogroups.iconography.guidance[0].enforceable
Id
icons-are-symbolsgroups.iconography.guidance[0].id
Text
Use the approved library for interface symbols; register custom brand marks as assets.groups.iconography.guidance[0].text
Family
Material Symbolsgroups.iconography.library.family
Id
material-symbols-roundedgroups.iconography.library.id
Name
Apache License 2.0groups.iconography.library.license.name
Reference
https://github.com/google/material-design-icons/blob/master/LICENSEgroups.iconography.library.license.reference
Spdx Id
Apache-2.0groups.iconography.library.license.spdxId
Source
https://fonts.google.com/iconsgroups.iconography.library.source
Style
Roundedgroups.iconography.library.style
Weight
400groups.iconography.library.weight
07

Graphic systems

defaulted

Named visual systems and their registered asset and taxonomy references.

2 resolved values
01
Core SystemBrand
0 assets
Technical details2 canonical values and registry paths
Groups Graphics Systems
No additional entriesgroups.graphics.systems
Groups Graphics Taxonomies
No additional entriesgroups.graphics.taxonomies
08

Imagery direction

authored

Photography, product imagery, composition, subject, and treatment guidance.

11 resolved values
02 · Subject

Orange (--semantic-brand-accent) appears as the signature accent, use for badges, highlights, and energy-forward CTAs.

03 · Treatment

Apply one repeatable crop, contrast, and surface treatment.

Direction is governed without unapproved stock imagery
Technical details11 canonical values and registry paths
Groups Imagery Approved Asset Ids
No additional entriesgroups.imagery.approvedAssetIds
Enforceable
Nogroups.imagery.photography[0].enforceable
Id
imagery-01groups.imagery.photography[0].id
Text
Use ShipSigma blue (--semantic-brand-primary) as the primary identity anchor for backgrounds, CTAs, and navigation.groups.imagery.photography[0].text
Enforceable
Nogroups.imagery.photography[1].enforceable
Id
imagery-02groups.imagery.photography[1].id
Text
Orange (--semantic-brand-accent) appears as the signature accent, use for badges, highlights, and energy-forward CTAs.groups.imagery.photography[1].text
Enforceable
Nogroups.imagery.photography[2].enforceable
Id
imagery-03groups.imagery.photography[2].id
Text
Imagery should convey data intelligence, logistics precision, and freight efficiency, dashboards, route maps, and modern supply chain operations.groups.imagery.photography[2].text
Groups Imagery Product Imagery
No additional entriesgroups.imagery.productImagery
09

Shared components

defaulted

Shared component participation and bounded state-token overrides.

8 resolved values
ShipSigma interfaceShared system
FoundationActions and fields
04 states
Primary actionSecondary
Helper text follows the field.Valid
FeedbackStatus and content
Live
ApprovedIn reviewDraft
Brand-ready componentSemantic tokens control every state.
Next reviewIdentity system check
Aug 28
Registry coverageGoverned participation1
Button2 state overrides
Shared primitives inherit this brand without component-specific colour values.
Technical details8 canonical values and registry paths
Component Id
buttongroups.components.participation[0].componentId
Groups Components Participation 0 Guidance
No additional entriesgroups.components.participation[0].guidance
State
defaultgroups.components.participation[0].stateOverrides[0].state
Token Ref
--semantic-brand-primarygroups.components.participation[0].stateOverrides[0].tokenRef
Token Slot
backgroundgroups.components.participation[0].stateOverrides[0].tokenSlot
State
defaultgroups.components.participation[0].stateOverrides[1].state
Token Ref
--semantic-brand-primary-contentgroups.components.participation[0].stateOverrides[1].tokenRef
Token Slot
contentgroups.components.participation[0].stateOverrides[1].tokenSlot
10

Data visualisation

defaulted

Categorical, sequential, and diverging palette intent derived from brand tokens.

10 resolved values
Categorical3 roles
Sequential2 steps
Diverging2 steps

Brand-derived colour intent supports comparison without changing the underlying data meaning.

Technical details10 canonical values and registry paths
Categorical Token Refs 0
--semantic-brand-primarygroups.dataVisualization.categoricalTokenRefs[0]
Categorical Token Refs 1
--semantic-brand-accentgroups.dataVisualization.categoricalTokenRefs[1]
Categorical Token Refs 2
--semantic-status-informativegroups.dataVisualization.categoricalTokenRefs[2]
Diverging Token Refs 0
--semantic-status-errorgroups.dataVisualization.divergingTokenRefs[0]
Diverging Token Refs 1
--semantic-status-successgroups.dataVisualization.divergingTokenRefs[1]
Enforceable
Nogroups.dataVisualization.guidance[0].enforceable
Id
data-viz-contrastgroups.dataVisualization.guidance[0].id
Text
Use semantic token references whose labels, strokes, and fills remain distinguishable without colour alone.groups.dataVisualization.guidance[0].text
Sequential Token Refs 0
--semantic-surface-3groups.dataVisualization.sequentialTokenRefs[0]
Sequential Token Refs 1
--semantic-brand-primarygroups.dataVisualization.sequentialTokenRefs[1]
11

Motion

defaulted

Governed motion variance, timing, easing, and reduced-motion expectations.

5 resolved values
EasingEase Smooth
Duration scale
Duration FastDuration Normal

Reduced-motion behavior is required.

Technical details5 canonical values and registry paths
Duration Token Refs 0
--brandOS-duration-fastgroups.motion.durationTokenRefs[0]
Duration Token Refs 1
--brandOS-duration-normalgroups.motion.durationTokenRefs[1]
Easing Token Refs 0
--brandOS-ease-smoothgroups.motion.easingTokenRefs[0]
Groups Motion Guidance
No additional entriesgroups.motion.guidance
Reduced Motion Required
Yesgroups.motion.reducedMotionRequired
12

Prose guidance

defaulted

Human-readable direction distributed with the effective visual specification.

3 resolved values
Working principlesClear direction for consistent decisions
01
Author visual guidance in the registry and regenerate every hosted and agent-readable projection.
Human-readable guidance
Technical details3 canonical values and registry paths
Enforceable
Nogroups.proseGuidance[0].enforceable
Id
registry-firstgroups.proseGuidance[0].id
Text
Author visual guidance in the registry and regenerate every hosted and agent-readable projection.groups.proseGuidance[0].text

04 · Accessibility

Verified accessible pairings

Live specimens rendered from canonical foreground and background tokens.

14 verified
Verified pairing

Readable by design.

Contrast8.10:1
AAA text
Foreground--semantic-brand-accent-contentSurface--semantic-brand-accent
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast5.77:1
AA text
Foreground--semantic-brand-primary-contentSurface--semantic-brand-primary
Standard text
AA passAAA fail
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast8.07:1
AAA text
Foreground--semantic-brand-secondary-contentSurface--semantic-brand-secondary
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast16.96:1
AAA text
Foreground--semantic-neutral-contentSurface--semantic-neutral-base
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast7.19:1
AAA text
Foreground--semantic-status-error-contentSurface--semantic-status-error
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast7.34:1
AAA text
Foreground--semantic-status-informative-contentSurface--semantic-status-informative
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast7.60:1
AAA text
Foreground--semantic-status-success-contentSurface--semantic-status-success
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast7.24:1
AAA text
Foreground--semantic-status-warning-contentSurface--semantic-status-warning
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast8.10:1
AAA text
Foreground--semantic-content-mutedSurface--semantic-surface-1
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast16.96:1
AAA text
Foreground--semantic-content-primarySurface--semantic-surface-1
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast7.69:1
AAA text
Foreground--semantic-content-mutedSurface--semantic-surface-2
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast13.97:1
AAA text
Foreground--semantic-content-primarySurface--semantic-surface-2
Standard text
AA passAAA pass
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast5.98:1
AA text
Foreground--semantic-content-mutedSurface--semantic-surface-3
Standard text
AA passAAA fail
Large text
AA passAAA pass
Verified pairing

Readable by design.

Contrast9.99:1
AAA text
Foreground--semantic-content-primarySurface--semantic-surface-3
Standard text
AA passAAA pass
Large text
AA passAAA pass

05 · Example uses

Where ShipSigma shows up

Real interface patterns shaped by the same identity, semantic tokens and typography defined in this profile.

03Application
surfaces
02
Light mode surface

Carrier benchmarking dashboard

Brand ready
03
Dark mode surface

Shipper analytics login screen

Brand ready

06 · Delivery

Drop in anywhere

Three lines and an attribute, the whole ShipSigma brand renders from CDN.

  1. 01
    LoadGlobal tokens
  2. 02
    ThemeShipSigma
  3. 03
    RenderEvery component
index.htmlComplete CDN setupHTMLVersion pinned
<link rel="stylesheet" href="https://brand.snyder.tech/cdn/0.43.3/themes/global-tokens.css" />
<link rel="stylesheet" href="https://brand.snyder.tech/cdn/0.43.3/themes/shipsigma-brand.css" />
<script type="module" src="https://brand.snyder.tech/cdn/0.43.3/index.js"></script>
<html data-brand="shipsigma" data-theme="light">
Registered assets

5 immutable assets

Pinned artwork for stable delivery. Themeable -ink follows the active theme, while -light and -dark variants preserve exported colour.

Release
v0.43.3
Integrity
5/5
Payload
6.4 KB
  • 01 · Faviconshipsigma-dark.svgdark artwork310 BVerified
  • 02 · Faviconshipsigma.svgsingle artwork313 BVerified
  • 03 · Logoshipsigma-logo-dark.svgdark artwork2.2 KBVerified
  • 04 · Logoshipsigma-logo-light.svglight artwork2.2 KBVerified
  • 05 · Login Bgshipsigma-login-bg.svgsingle artwork1.4 KBVerified
Implementation libraryAlternative asset recipesImage, background and favicon patterns3 recipes
logo.htmlFixed artwork imageHTMLVersion pinned
<img
  src="https://brand.snyder.tech/cdn/0.43.3/assets/brand-logos/shipsigma-logo-dark.svg"
  alt="ShipSigma"
  loading="lazy"
  decoding="async"
/>
mark.cssCSS background recipeCSSVersion pinned
.shipsigma-mark {
  background-image: url("https://brand.snyder.tech/cdn/0.43.3/assets/brand-logos/shipsigma-logo-dark.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
favicon.htmlBrowser favicon setupHTMLVersion pinned
<link rel="icon" type="image/svg+xml" href="https://brand.snyder.tech/cdn/0.43.3/assets/brand-favicons/shipsigma.svg" />
Registry evidenceVersioned asset manifestPaths, sizes and integrity hashesSHA-256
shipsigma-cdn-manifest.txtVersioned asset inventoryManifestVersion pinned
# favicon · 310 B
# sha256:cc66f684ae781f1bab4ef98b4e4895aacbb73ee1eac0dbe120e6bc78e432f8f9
https://brand.snyder.tech/cdn/0.43.3/assets/brand-favicons/shipsigma-dark.svg

# favicon · 313 B
# sha256:94804f59d56894e466c981173c5cb746d2d5463bad08ffa5713a407097251b63
https://brand.snyder.tech/cdn/0.43.3/assets/brand-favicons/shipsigma.svg

# logo · 2.2 KB
# sha256:90193f80a4bbf07225fc21daba0dc2a802df9a79077d1eb16b5ecada848377bb
https://brand.snyder.tech/cdn/0.43.3/assets/brand-logos/shipsigma-logo-dark.svg

# logo · 2.2 KB
# sha256:6c35e05125fe46a1ed0b2e40685048e2efb31a58a7d5cdb8f4aa406c7346c1a4
https://brand.snyder.tech/cdn/0.43.3/assets/brand-logos/shipsigma-logo-light.svg

# login-bg · 1.4 KB
# sha256:2ee0e3ef694e5b4cb463170219ec171ffa2cfbbee6fafc14de04ea8155e517dc
https://brand.snyder.tech/cdn/0.43.3/assets/login-bg/shipsigma-login-bg.svg
Machine-readable manifest.json, all brands in this version