Visual identity
Cleaveland/Price
A manufacturer of switching solutions and innovations for the medium and high voltage electrical industry — indoor and outdoor switches, transmission and distribution automation, line sensors, data collectors, and remote terminal units for electric utilities.
Compact identity
Favicon scale
compactLogoSemantic system
Brand colour
data-brand- Brand ID
- cleavelandprice
- Token package
- @brandos/tokens/css/cleavelandprice
- Heading
- Helvetica Neue
- Body
- Helvetica Neue
01.01 · Cleavelandprice Navy ramp
19 shades of Cleavelandprice Navy
Cleavelandprice Navy identity ramp generated from canonical cleavelandprice token data.
01.02 · Cleavelandpriceazure ramp
19 shades of Cleavelandpriceazure
Cleavelandpriceazure identity ramp generated from canonical cleavelandprice token data.
01.03 · Cleavelandprice Gray ramp
19 shades of Cleavelandprice Gray
Cleavelandprice Gray identity ramp generated from canonical cleavelandprice token data.
01.04 · Cleavelandprice Red ramp
19 shades of Cleavelandprice Red
Cleavelandprice Red identity ramp generated from canonical cleavelandprice token data.
01.05 · Semantic slots
Meaning over hue
Components consume semantic slots, never raw ramps. The hue can evolve; the meaning shouldn't.
- Token
--semantic-brand-primary- Class
bg-primary
- Token
--semantic-brand-accent- Class
bg-accent
- Token
--semantic-surface-1- Class
bg-base-100
- Token
--semantic-content-primary- Class
text-base-content
- Token
--semantic-status-informative- Class
text-info
- Token
--semantic-status-success- Class
text-success
- Token
--semantic-status-warning- Class
text-warning
- Token
--semantic-status-error- Class
text-error
02 · Typography
Helvetica Neue on display · Helvetica Neue for everything else
Heading and body families resolve from the canonical effective specification and its font registry.
--brandOS-font-headingCleaveland/Price moves with purpose.
- Family
- Helvetica Neue
- Registry ID
- helvetica-neue
- Primary use
- Display and hierarchy
- H1 · DisplayThe system in practice
- H2 · Section127 brands, one system
- H3 · CardProfile contract
- Size
- 4xl
- Leading
- Tight
- Weight
- Bold
--brandOS-font-bodyClear systems make complex decisions feel simple, consistent, and unmistakably on brand.
- Family
- Helvetica Neue
- Registry ID
- helvetica-neue
- 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
One voice across both surfaces
This brand uses the same pair everywhere. A marketing face and an application face can be split at any time by declaring one per surface in the brand registry; until then both panels resolve identically.
Campaign pages, hero moments, the public site.
data-surface="marketing"Cleaveland/Price, in its own voice.
Marketing copy gets room to breathe: generous measures, expressive headlines, and a face chosen to be seen before it is read.
- Heading
- Helvetica Neue
- Body
- Helvetica Neue
- Origin
- Inherits the base pair
Product screens, dense tables, forms, operator tools.
data-surface="application"Open invoices, 128 rows
Application copy is read all day at small sizes: labels, table cells, validation messages, and column headers that must stay legible under density.
- Heading
- Helvetica Neue
- Body
- Helvetica Neue
- Origin
- Inherits the base pair
03 · Effective specification
One resolved source for every visual rule
Version 1.0.0, effective . Every rule below is generated from the canonical registry projection.
- 01Defaults
- 1.0.0
- 02Brand
- 1.0.0
- 03Content
- rev 1e381b18
The content revision is a checksum of the authored specification. It changes whenever any rule changes, so two profiles with the same revision are guaranteed identical.
- Inherited Shared
- 0
- Defaulted System
- 10
01Colour and accessible pairings
defaultedToken usage, print values, gradients, accent discipline, and derived WCAG pairings.
20 resolved values
Colour and accessible pairings
defaultedToken usage, print values, gradients, accent discipline, and derived WCAG pairings.
20 resolved valuesTechnical details20 canonical values and registry paths
- Accent Token Refs 0
- --semantic-brand-primaryColors · Accent token refs · #1
- Accent Token Refs 1
- --semantic-brand-accentColors · Accent token refs · #2
- Body Surface Token Ref
- --semantic-surface-1Colors · Body surface token ref
- Body Text Token Ref
- --semantic-content-primaryColors · Body text token ref
- Direction
- 135degColors · Gradients · #1 · Direction
- From Token Ref
- --semantic-brand-primaryColors · Gradients · #1 · From token ref
- Id
- brand-accentColors · Gradients · #1 · Id
- To Token Ref
- --brandOS-primary-700Colors · Gradients · #1 · To token ref
- Enforceable
- NoColors · Guidance · #1 · Enforceable
- Id
- accessible-color-useColors · Guidance · #1 · Id
- Text
- Use canonical content pairs for text on semantic surfaces and status fills.Colors · Guidance · #1 · Text
- Groups Colors Print Values
- No additional entriesColors · Print values
- Content Token Ref
- --semantic-status-error-contentColors · Status · Error · Content token ref
- Token Ref
- --semantic-status-errorColors · Status · Error · Token ref
- Content Token Ref
- --semantic-status-informative-contentColors · Status · Informative · Content token ref
- Token Ref
- --semantic-status-informativeColors · Status · Informative · Token ref
- Content Token Ref
- --semantic-status-success-contentColors · Status · Success · Content token ref
- Token Ref
- --semantic-status-successColors · Status · Success · Token ref
- Content Token Ref
- --semantic-status-warning-contentColors · Status · Warning · Content token ref
- Token Ref
- --semantic-status-warningColors · Status · Warning · Token ref
02Typography
Font roles, the base type ladder, and sparse responsive overrides.
12 resolved values
Typography
Font roles, the base type ladder, and sparse responsive overrides.
12 resolved valuesA 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.The base hierarchy scales without brand-specific overrides.
Technical details12 canonical values and registry paths
- Font Id
- helvetica-neueTypography · Base ladder · #1 · Font id
- Id
- headingTypography · Base ladder · #1 · Id
- Line Height Token Ref
- --brandOS-leading-tightTypography · Base ladder · #1 · Line height token ref
- Size Token Ref
- --brandOS-text-4xlTypography · Base ladder · #1 · Size token ref
- Weight Token Ref
- --brandOS-font-weight-boldTypography · Base ladder · #1 · Weight token ref
- Font Id
- helvetica-neueTypography · Base ladder · #2 · Font id
- Id
- bodyTypography · Base ladder · #2 · Id
- Line Height Token Ref
- --brandOS-leading-normalTypography · Base ladder · #2 · Line height token ref
- Size Token Ref
- --brandOS-text-baseTypography · Base ladder · #2 · Size token ref
- Weight Token Ref
- --brandOS-font-weight-regularTypography · Base ladder · #2 · Weight token ref
- Groups Typography Guidance
- No additional entriesTypography · Guidance
- Groups Typography Responsive Overrides
- No additional entriesTypography · Responsive overrides
03Logo usage
defaultedClear space, minimum sizes, prohibited uses, and approved lockups.
8 resolved values
Logo usage
defaultedClear space, minimum sizes, prohibited uses, and approved lockups.
8 resolved valuesClear space: Space 4
Technical details8 canonical values and registry paths
- Clear Space Token Ref
- --brandOS-space-4Logos · Clear space token ref
- Groups Logos Co Branding Rules
- No additional entriesLogos · Co branding rules
- Context
- Primary digital lockupLogos · Minimum sizes · #1 · Context
- Id
- digital-primaryLogos · Minimum sizes · #1 · Id
- Width Px
- 120Logos · Minimum sizes · #1 · Width px
- Enforceable
- NoLogos · Prohibited uses · #1 · Enforceable
- Id
- do-not-distortLogos · Prohibited uses · #1 · Id
- Text
- Do not stretch, skew, recolour, or otherwise distort a registered mark.Logos · Prohibited uses · #1 · Text
04Registered assets
defaultedCanonical marks, imagery, and graphic assets referenced by stable identifiers.
2 resolved values
Registered assets
defaultedCanonical marks, imagery, and graphic assets referenced by stable identifiers.
2 resolved valuesTechnical details2 canonical values and registry paths
- Groups Assets Approved Asset Ids
- No additional entriesAssets · Approved asset ids
- Groups Assets Guidance
- No additional entriesAssets · Guidance
05Responsive layout
defaultedBreakpoint ranges, containers, grids, columns, and margins.
34 resolved values
Responsive layout
defaultedBreakpoint ranges, containers, grids, columns, and margins.
34 resolved valuesMargins and containers expand progressively while content order stays stable.
Technical details34 canonical values and registry paths
- Columns
- 4Responsive layout · Breakpoints · #1 · Columns
- Grid Id
- mobile-gridResponsive layout · Breakpoints · #1 · Grid id
- Id
- mobileResponsive layout · Breakpoints · #1 · Id
- Margin Token Ref
- --brandOS-space-4Responsive layout · Breakpoints · #1 · Margin token ref
- Max Viewport Px
- 639Responsive layout · Breakpoints · #1 · Max viewport px
- Min Viewport Px
- 0Responsive layout · Breakpoints · #1 · Min viewport px
- Columns
- 8Responsive layout · Breakpoints · #2 · Columns
- Container Width Px
- 960Responsive layout · Breakpoints · #2 · Container width px
- Grid Id
- tablet-gridResponsive layout · Breakpoints · #2 · Grid id
- Id
- tabletResponsive layout · Breakpoints · #2 · Id
- Margin Token Ref
- --brandOS-space-6Responsive layout · Breakpoints · #2 · Margin token ref
- Max Viewport Px
- 1023Responsive layout · Breakpoints · #2 · Max viewport px
- Min Viewport Px
- 640Responsive layout · Breakpoints · #2 · Min viewport px
- Columns
- 12Responsive layout · Breakpoints · #3 · Columns
- Container Width Px
- 1280Responsive layout · Breakpoints · #3 · Container width px
- Grid Id
- desktop-gridResponsive layout · Breakpoints · #3 · Grid id
- Id
- desktopResponsive layout · Breakpoints · #3 · Id
- Margin Token Ref
- --brandOS-space-8Responsive layout · Breakpoints · #3 · Margin token ref
- Min Viewport Px
- 1024Responsive layout · Breakpoints · #3 · Min viewport px
- Columns
- 4Responsive layout · Grids · #1 · Columns
- Gutter Token Ref
- --brandOS-space-4Responsive layout · Grids · #1 · Gutter token ref
- Id
- mobile-gridResponsive layout · Grids · #1 · Id
- Margin Token Ref
- --brandOS-space-4Responsive layout · Grids · #1 · Margin token ref
- Columns
- 8Responsive layout · Grids · #2 · Columns
- Gutter Token Ref
- --brandOS-space-5Responsive layout · Grids · #2 · Gutter token ref
- Id
- tablet-gridResponsive layout · Grids · #2 · Id
- Margin Token Ref
- --brandOS-space-6Responsive layout · Grids · #2 · Margin token ref
- Columns
- 12Responsive layout · Grids · #3 · Columns
- Gutter Token Ref
- --brandOS-space-6Responsive layout · Grids · #3 · Gutter token ref
- Id
- desktop-gridResponsive layout · Grids · #3 · Id
- Margin Token Ref
- --brandOS-space-8Responsive layout · Grids · #3 · Margin token ref
- Enforceable
- NoResponsive layout · Guidance · #1 · Enforceable
- Id
- content-first-responsiveResponsive layout · Guidance · #1 · Id
- Text
- Choose responsive changes from content pressure and the declared non-overlapping ranges.Responsive layout · Guidance · #1 · Text
06Iconography
defaultedApproved library, family, style, weight, licence, and custom exceptions.
12 resolved values
Iconography
defaultedApproved library, family, style, weight, licence, and custom exceptions.
12 resolved valuesTechnical details12 canonical values and registry paths
- Groups Iconography Custom Icon Asset Ids
- No additional entriesIconography · Custom icon asset ids
- Enforceable
- NoIconography · Guidance · #1 · Enforceable
- Id
- icons-are-symbolsIconography · Guidance · #1 · Id
- Text
- Use the approved library for interface symbols; register custom brand marks as assets.Iconography · Guidance · #1 · Text
- Family
- Material SymbolsIconography · Library · Family
- Id
- material-symbols-roundedIconography · Library · Id
- Name
- Apache License 2.0Iconography · Library · License · Name
- Reference
- https://github.com/google/material-design-icons/blob/master/LICENSEIconography · Library · License · Reference
- Spdx Id
- Apache-2.0Iconography · Library · License · Spdx id
- Source
- https://fonts.google.com/iconsIconography · Library · Source
- Style
- RoundedIconography · Library · Style
- Weight
- 400Iconography · Library · Weight
07Graphic systems
defaultedNamed visual systems and their registered asset and taxonomy references.
2 resolved values
Graphic systems
defaultedNamed visual systems and their registered asset and taxonomy references.
2 resolved valuesTechnical details2 canonical values and registry paths
- Groups Graphics Systems
- No additional entriesGraphics · Systems
- Groups Graphics Taxonomies
- No additional entriesGraphics · Taxonomies
08Imagery direction
Photography, product imagery, composition, subject, and treatment guidance.
11 resolved values
Imagery direction
Photography, product imagery, composition, subject, and treatment guidance.
11 resolved valuesShow the equipment in service — substation switches, transmission structures, and field crews — rather than generic industrial or energy stock.
Keep surfaces light and technical. The deep navy primary carries headings and structure; reserve the brighter azure accent for links and a single call to action per view.
Apply one repeatable crop, contrast, and surface treatment.
Technical details11 canonical values and registry paths
- Groups Imagery Approved Asset Ids
- No additional entriesImagery · Approved asset ids
- Enforceable
- NoImagery · Photography · #1 · Enforceable
- Id
- imagery-01Imagery · Photography · #1 · Id
- Text
- Show the equipment in service — substation switches, transmission structures, and field crews — rather than generic industrial or energy stock.Imagery · Photography · #1 · Text
- Enforceable
- NoImagery · Photography · #2 · Enforceable
- Id
- imagery-02Imagery · Photography · #2 · Id
- Text
- Keep surfaces light and technical. The deep navy primary carries headings and structure; reserve the brighter azure accent for links and a single call to action per view.Imagery · Photography · #2 · Text
- Enforceable
- NoImagery · Photography · #3 · Enforceable
- Id
- imagery-03Imagery · Photography · #3 · Id
- Text
- Product and specification tables are the centre of this estate. Favour clear rules, generous spacing, and legible small type over decorative treatments.Imagery · Photography · #3 · Text
- Groups Imagery Product Imagery
- No additional entriesImagery · Product imagery
09Shared components
defaultedShared component participation and bounded state-token overrides.
8 resolved values
Shared components
defaultedShared component participation and bounded state-token overrides.
8 resolved valuesTechnical details8 canonical values and registry paths
- Component Id
- buttonComponents · Participation · #1 · Component id
- Groups Components Participation 0 Guidance
- No additional entriesComponents · Participation · #1 · Guidance
- State
- defaultComponents · Participation · #1 · State overrides · #1 · State
- Token Ref
- --semantic-brand-primaryComponents · Participation · #1 · State overrides · #1 · Token ref
- Token Slot
- backgroundComponents · Participation · #1 · State overrides · #1 · Token slot
- State
- defaultComponents · Participation · #1 · State overrides · #2 · State
- Token Ref
- --semantic-brand-primary-contentComponents · Participation · #1 · State overrides · #2 · Token ref
- Token Slot
- contentComponents · Participation · #1 · State overrides · #2 · Token slot
10Data visualisation
defaultedCategorical, sequential, and diverging palette intent derived from brand tokens.
10 resolved values
Data visualisation
defaultedCategorical, sequential, and diverging palette intent derived from brand tokens.
10 resolved valuesBrand-derived colour intent supports comparison without changing the underlying data meaning.
Technical details10 canonical values and registry paths
- Categorical Token Refs 0
- --semantic-brand-primaryData visualization · Categorical token refs · #1
- Categorical Token Refs 1
- --semantic-brand-accentData visualization · Categorical token refs · #2
- Categorical Token Refs 2
- --semantic-status-informativeData visualization · Categorical token refs · #3
- Diverging Token Refs 0
- --semantic-status-errorData visualization · Diverging token refs · #1
- Diverging Token Refs 1
- --semantic-status-successData visualization · Diverging token refs · #2
- Enforceable
- NoData visualization · Guidance · #1 · Enforceable
- Id
- data-viz-contrastData visualization · Guidance · #1 · Id
- Text
- Use semantic token references whose labels, strokes, and fills remain distinguishable without colour alone.Data visualization · Guidance · #1 · Text
- Sequential Token Refs 0
- --semantic-surface-3Data visualization · Sequential token refs · #1
- Sequential Token Refs 1
- --semantic-brand-primaryData visualization · Sequential token refs · #2
11Motion
defaultedGoverned motion variance, timing, easing, and reduced-motion expectations.
5 resolved values
Motion
defaultedGoverned motion variance, timing, easing, and reduced-motion expectations.
5 resolved valuesReduced-motion behavior is required.
Technical details5 canonical values and registry paths
- Duration Token Refs 0
- --brandOS-duration-fastMotion · Duration token refs · #1
- Duration Token Refs 1
- --brandOS-duration-normalMotion · Duration token refs · #2
- Easing Token Refs 0
- --brandOS-ease-smoothMotion · Easing token refs · #1
- Groups Motion Guidance
- No additional entriesMotion · Guidance
- Reduced Motion Required
- YesMotion · Reduced motion required
12Prose guidance
defaultedHuman-readable direction distributed with the effective visual specification.
3 resolved values
Prose guidance
defaultedHuman-readable direction distributed with the effective visual specification.
3 resolved valuesAuthor visual guidance in the registry and regenerate every hosted and agent-readable projection.Human-readable guidance
Technical details3 canonical values and registry paths
- Enforceable
- NoProse guidance · #1 · Enforceable
- Id
- registry-firstProse guidance · #1 · Id
- Text
- Author visual guidance in the registry and regenerate every hosted and agent-readable projection.Prose guidance · #1 · Text
04 · Accessibility
Verified accessible pairings
Live specimens rendered from canonical foreground and background tokens.
--semantic-brand-accent-contentSurface--semantic-brand-accent- Standard text
- AA passAAA fail
- Large text
- AA passAAA pass
--semantic-brand-primary-contentSurface--semantic-brand-primary- Standard text
- AA passAAA fail
- Large text
- AA passAAA pass
--semantic-brand-secondary-contentSurface--semantic-brand-secondary- Standard text
- AA passAAA fail
- Large text
- AA passAAA pass
--semantic-neutral-contentSurface--semantic-neutral-base- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
--semantic-status-error-contentSurface--semantic-status-error- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
--semantic-status-informative-contentSurface--semantic-status-informative- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
--semantic-status-success-contentSurface--semantic-status-success- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
--semantic-status-warning-contentSurface--semantic-status-warning- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
--semantic-content-mutedSurface--semantic-surface-1- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
--semantic-content-primarySurface--semantic-surface-1- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
--semantic-content-mutedSurface--semantic-surface-2- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
--semantic-content-primarySurface--semantic-surface-2- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
--semantic-content-mutedSurface--semantic-surface-3- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
--semantic-content-primarySurface--semantic-surface-3- Standard text
- AA passAAA pass
- Large text
- AA passAAA pass
05 · Example uses
Where Cleaveland/Price shows up
Real interface patterns shaped by the same identity, semantic tokens and typography defined in this profile.
surfaces
06 · Delivery
Drop in anywhere
Three lines and an attribute, the whole Cleaveland/Price brand renders from CDN.
- 01LoadGlobal tokens
- 02ThemeCleaveland/Price
- 03RenderEvery component
6 immutable assets
Pinned artwork for stable delivery. Themeable -ink follows the active theme, while -light and -dark variants preserve exported colour.
- Release
- v0.45.0
- Integrity
- 6/6
- Payload
- 738 KB
- 01 · Faviconcleavelandprice-dark.svgdark artwork2.7 KBVerified
- 02 · Faviconcleavelandprice.svgsingle artwork2.7 KBVerified
- 03 · Logocleavelandprice-logo-dark.svgdark artwork14 KBVerified
- 04 · Logocleavelandprice-logo-ink.svgink artwork14 KBVerified
- 05 · Logocleavelandprice-logo-light.svglight artwork14 KBVerified
- 06 · Login Bgcleavelandprice-login-bg.svgsingle artwork689 KBVerified
// Recommended, themeable: currentColor follows the theme when inlined
import CleavelandPriceMark from '@brandos/ui/assets/brand-logos/cleavelandprice-logo-ink.svg?raw';
// Astro: <span set:html={Mark} /> · React (SVGR): import ...?reactImplementation libraryAlternative asset recipesImage, background and favicon patterns3 recipes
<img
src="https://brand.snyder.tech/cdn/0.45.0/assets/brand-logos/cleavelandprice-logo-dark.svg"
alt="Cleaveland/Price"
loading="lazy"
decoding="async"
/>.cleavelandprice-mark {
background-image: url("https://brand.snyder.tech/cdn/0.45.0/assets/brand-logos/cleavelandprice-logo-dark.svg");
background-repeat: no-repeat;
background-size: contain;
}<link rel="icon" type="image/svg+xml" href="https://brand.snyder.tech/cdn/0.45.0/assets/brand-favicons/cleavelandprice.svg" />Registry evidenceVersioned asset manifestPaths, sizes and integrity hashesSHA-256
# favicon · 2.7 KB
# sha256:14b729ffa7e68602428bcee507c492ccb780a825354029dccda8310d7bc74bf8
https://brand.snyder.tech/cdn/0.45.0/assets/brand-favicons/cleavelandprice-dark.svg
# favicon · 2.7 KB
# sha256:408f020f21d4cc3f2f4093d3f85b0f0210c66682748f2fa75ddec6f9664b4be4
https://brand.snyder.tech/cdn/0.45.0/assets/brand-favicons/cleavelandprice.svg
# logo · 14 KB
# sha256:f2df254b07fc8c8a51c624a0fcfeef9e47b06fa735e767dd0e3f985f3e64bd65
https://brand.snyder.tech/cdn/0.45.0/assets/brand-logos/cleavelandprice-logo-dark.svg
# logo · 14 KB
# sha256:32d294cfb63e119b36fedfe11b3e9e3d4c964fe2662cb794471dc1cf649f2a3a
https://brand.snyder.tech/cdn/0.45.0/assets/brand-logos/cleavelandprice-logo-ink.svg
# logo · 14 KB
# sha256:00e6e2a154a3b5141e6fdca493b67786b26e55d9616e1b23056d6b87ad64b971
https://brand.snyder.tech/cdn/0.45.0/assets/brand-logos/cleavelandprice-logo-light.svg
# login-bg · 689 KB
# sha256:115094b0a9ffacb961955b30b0bf1a005e565acb434bad87e5e865476aa4be2e
https://brand.snyder.tech/cdn/0.45.0/assets/login-bg/cleavelandprice-login-bg.svg