Brand Guidelines
Logos, colors, typography, and the rules for using them.
Logo Variations
Each logo comes as a vector SVG for print and scalable use, and a PNG for tools that need raster.
Logo Usage
How to place the logo, and the mistakes worth checking for before you publish.
Keep the proportions, leave space around it, and put it on a background with enough contrast.
Scaling one axis changes the letterforms. Scale both together.
Use the versions on this page. Don’t change its colors.
Keep it flat. No shadows, glows, blurs, or outlines.
Leave blank space on every side equal to the height of the letter C.
The white version needs a dark background. Check the contrast before you publish.
- •Give the logo space: Leave space around the logo equal to the height of the letter "C"
- •Keep it readable:
- • Maintain clarity at any size
- • Make sure the logo is legible on all backgrounds
- •Use approved colors: Only use the logo variations provided on this page
- •Don't stretch or squash: Keep the logo proportional. Don't distort it.
- •Maintain contrast: Use the white logo on dark backgrounds and cyan logo on light backgrounds
- •Don't modify: No effects, filters, or added elements
- •Logo placement: Keep placement consistent across materials
- •Mind the minimum size: Do not place the one-line logo below 180px wide on screen or 1.25in in print. For the two-line logo the floor is 120px and 0.75in. The limit is the thinnest stroke in the wordmark, not the overall height
- •Approved use only: Use for approved CommerceShip materials and partnerships
Typography
Inter is our primary typeface. Below are the four weights we use, the six-tier type scale every heading on the site is set from, and the rule for choosing between them.
Primary: Inter
| Weight | Usage | Example |
|---|---|---|
| Light (300) | Supporting text, captions, timestamps | Last synced 12 minutes ago |
| Regular (400) | Body copy, standard text | Agents audit every invoice and select the right service for every shipment. |
| Medium (500) | Subheadings, emphasis | Audit every carrier invoice |
| Bold (700) | Headings, important callouts | Agent-led supply chain transformation |
For anything a reader may need to copy or compare character by character: tracking numbers, API examples, and technical UI.
1Z999AA10123456784
POST /v1/shipments
Type scale
Six tiers cover every heading on the site. Sizes are listed mobile / tablet / desktop; a single value means the tier does not change with screen width.
| Tier | Class | Size | Usage |
|---|---|---|---|
| Display | type-display | 48 / 60 / 72px Semibold | Hero page titles. The largest type on the site. |
| Heading 1 | type-h1 | 36 / 48 / 60px Semibold | Page titles. |
| Heading 2 | type-h2 | 30 / 36 / 48px Semibold | Section headings. |
| Heading 3 | type-h3 | 24px Semibold | Subsection headings. |
| Heading 4 | type-h4 | 18px Semibold | Card, feature, and list-item titles. |
| Label | type-label | 14px Semibold | Eyebrows and labels. Not a heading. |
type-display
Agent-led supply chain transformation
type-h1
Choose your plan by the modules you run
type-h2
Audit every carrier invoice
type-h3
Rate management
type-h4
Featured integrations
type-label
Last synced 12 minutes ago
The heading tag and the size are chosen separately. Pick the tag from where the heading sits in the page outline, then pick the tier from how heavy it should look.
- •One
h1per page,h2per section,h3for a subsection of that section. Never skip a level. - •A section heading that needs to look like a hero is an
h2withtype-display, not anh1. - •Small bold text is a label, not a heading. Use
type-labelon aporspan. - •The tier owns size and weight only. Spacing, width, colour, and balance stay separate.
Color Palette
Three colors carry the brand. Use the hex or RGB values below rather than sampling them from an image.
Primary brand color for key actions and highlights
Light backgrounds, and text on dark
Dark backgrounds, and text on light
- •Primary cyan for key actions and highlights
- •Light and dark colors for backgrounds and text
- •Set dark text on Primary Cyan, not white. Dark gives 7.6:1 contrast, white gives 2.5:1 and fails WCAG AA
- •Maintain consistent color application across all brand materials
Writing about CommerceShip
For press releases, partner pages, event listings, and co-marketing.
Copy this verbatim. We keep it current, so it stays accurate as the product changes.
CommerceShip is an AI-native supply chain management platform for the teams that buy, make, move, store, and fulfill goods. AI agents monitor, advise, and act across your supply chain. CommerceShip connects to hundreds of integrations. The company was founded in 2023 and is based in San Francisco.
How we write, if you are producing copy alongside us.
- Plain language over jargon
- Say what the software does. If a sentence would survive being read aloud to an operations manager, it works.
- Specific over vague
- Name the carrier, the module, or the number. "Audits every carrier invoice" beats "optimizes spend".
- Active voice, present tense
- "Agents compare rates", not "rates can be compared". Commit to the claim rather than hedging it.
- Confident without hype
- No revolutionary, game-changing, or cutting-edge. Describe the capability and let it stand.
Questions about brand usage?
Ask before you publish. We can send a format that is not on this page, or check the details in something you are writing.