Visual identity

ChamberGrid

ChamberGrid, by Articled, partners with chambers of commerce worldwide, from the USA to India, with white-label software that runs beside their current platform and adds revenue, regional media and trusted member identity.

chambergrid.com

Light surfacePrimary wordmark

Dark surfaceApproved dark treatment

Compact identity

Favicon scale

compactLogo

16px

32px

48px

Dark

Semantic system

Brand colour

data-brand

PrimaryIdentitySecondarySupportAccentHighlightNeutralContent

Brand ID: chambergrid
Token package: @brandos/tokens/css/chambergrid
Heading: Manrope
Body: Public Sans

01.01 · Cgharbour ramp

19 shades of Cgharbour

Cgharbour identity ramp generated from canonical chambergrid token data.

01.02 · Cgbrass ramp

19 shades of Cgbrass

Cgbrass identity ramp generated from canonical chambergrid token data.

01.03 · Cglinen ramp

19 shades of Cglinen

Cglinen identity ramp generated from canonical chambergrid token data.

01.04 · Cgslate ramp

19 shades of Cgslate

Cgslate identity ramp generated from canonical chambergrid token data.

01.05 · 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

Manrope on display · Public Sans for everything else

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

Heading typefaceManrope

--brandOS-font-heading

Display specimen

ChamberGrid moves with purpose.

Family: Manrope
Registry ID: manrope
Primary use: Display and hierarchy

H1 · DisplayThe system in practice
H2 · Section106 brands, one system
H3 · CardProfile contract

Size: 4xl
Leading: Tight
Weight: Bold

Body typefacePublic Sans

--brandOS-font-body

Reading specimen

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

Family: Public Sans
Registry ID: public-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 2026-09-28. Every rule below is generated from the canonical registry projection.

Resolution fingerprintThree-source effective identity

01Defaults: 1.0.0
02Brand: 1.0.0
03Content: rev ed24d968

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.

Authored Direct: 6
Inherited Shared: 0
Defaulted System: 6

Colour and accessible pairings

authored

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

26 resolved values

PrimaryBrand Primary

AccentBrand Accent

SurfaceSurface 1

ContentContent Primary

Brand gradientPrimary to accent

InfoStatus Informative

SuccessStatus Success

WarningStatus Warning

ErrorStatus Error

Usage guidance

Harbour navy (--semantic-brand-primary) carries every interactive job: links, buttons, focus rings, selection and the pin in the logo. Do not introduce a second interactive hue.

Brass (--semantic-brand-accent; the registered artwork uses the brass 500 stop on light surfaces and the brass 350 stop on dark) marks the place: the node in the pin head, the one node an illustration is about, and at most one highlight per view. Artwork brass on linen is under 4.5:1, so it is for large display text, icons and nodes only; never body text, links, buttons, backgrounds or error states.

Harbour slate (--semantic-brand-secondary) is the street grid and the hardware: the grid in the mark, illustration linework, rule lines, dividers and quiet badges. Never use slate for primary actions.

Surfaces are linen (--semantic-surface-1) with ink text (--semantic-content-primary), never pure white. Dark mode is built on midnight (the harbour 850 stop) and steps up through the harbour ramp; never pure black.

Technical details26 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
Groups Colors Gradients: No additional entriesColors · Gradients
Enforceable: NoColors · Guidance · #1 · Enforceable
Id: harbour-carries-interactionColors · Guidance · #1 · Id
Text: Harbour navy (--semantic-brand-primary) carries every interactive job: links, buttons, focus rings, selection and the pin in the logo. Do not introduce a second interactive hue.Colors · Guidance · #1 · Text
Enforceable: NoColors · Guidance · #2 · Enforceable
Id: brass-marks-the-placeColors · Guidance · #2 · Id
Text: Brass (--semantic-brand-accent; the registered artwork uses the brass 500 stop on light surfaces and the brass 350 stop on dark) marks the place: the node in the pin head, the one node an illustration is about, and at most one highlight per view. Artwork brass on linen is under 4.5:1, so it is for large display text, icons and nodes only; never body text, links, buttons, backgrounds or error states.Colors · Guidance · #2 · Text
Enforceable: NoColors · Guidance · #3 · Enforceable
Id: slate-is-the-gridColors · Guidance · #3 · Id
Text: Harbour slate (--semantic-brand-secondary) is the street grid and the hardware: the grid in the mark, illustration linework, rule lines, dividers and quiet badges. Never use slate for primary actions.Colors · Guidance · #3 · Text
Enforceable: NoColors · Guidance · #4 · Enforceable
Id: linen-not-whiteColors · Guidance · #4 · Id
Text: Surfaces are linen (--semantic-surface-1) with ink text (--semantic-content-primary), never pure white. Dark mode is built on midnight (the harbour 850 stop) and steps up through the harbour ramp; never pure black.Colors · Guidance · #4 · 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

Typography

authored

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

20 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.

HeadingManrope

Text 4xl2.5–4rem

BodyPublic Sans

Text Base0.875–1rem

The base hierarchy scales without brand-specific overrides.

Usage guidance

Manrope is the display voice (headlines, section titles, pull quotes, large numerals), set ExtraBold or Bold with slightly tight tracking (-0.02em to -0.025em) at large sizes. Public Sans, the civic typeface of US government design, carries all body copy, labels, tables and forms. Never set body copy or controls in Manrope ExtraBold.

Write ChamberGrid as one word with a capital G in every context; never Chamber Grid, Chambergrid or CHAMBERGRID. In endorsements write ChamberGrid, by Articled. The only all-capitals setting is the outlined legend of the registered seal.

The wordmark is Manrope ExtraBold (800) at -0.025em, outlined in the registered artwork; the seal legend is Manrope ExtraBold capitals, tracked open. Headlines may use live Manrope, but the logo is never retypeset.

Technical details20 canonical values and registry paths

Font Id: manropeTypography · 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: public-sansTypography · 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
Enforceable: NoTypography · Guidance · #1 · Enforceable
Id: manrope-display-public-sans-bodyTypography · Guidance · #1 · Id
Text: Manrope is the display voice (headlines, section titles, pull quotes, large numerals), set ExtraBold or Bold with slightly tight tracking (-0.02em to -0.025em) at large sizes. Public Sans, the civic typeface of US government design, carries all body copy, labels, tables and forms. Never set body copy or controls in Manrope ExtraBold.Typography · Guidance · #1 · Text
Enforceable: NoTypography · Guidance · #2 · Enforceable
Id: name-casingTypography · Guidance · #2 · Id
Text: Write ChamberGrid as one word with a capital G in every context; never Chamber Grid, Chambergrid or CHAMBERGRID. In endorsements write ChamberGrid, by Articled. The only all-capitals setting is the outlined legend of the registered seal.Typography · Guidance · #2 · Text
Enforceable: NoTypography · Guidance · #3 · Enforceable
Id: wordmark-manropeTypography · Guidance · #3 · Id
Text: The wordmark is Manrope ExtraBold (800) at -0.025em, outlined in the registered artwork; the seal legend is Manrope ExtraBold capitals, tracked open. Headlines may use live Manrope, but the logo is never retypeset.Typography · Guidance · #3 · Text
Groups Typography Responsive Overrides: No additional entriesTypography · Responsive overrides

Logo usage

authored

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

59 resolved values

Clear space: Space 4

Full horizontal lockup (chambergrid-logo): the Placemark beside the Manrope ExtraBold ChamberGrid wordmark, caps centred on the mark160px minimum

Stacked lockup (chambergrid-logo-compact): the Placemark centred above the wordmark, for widths from 96 to 159px96px minimum

Placemark alone (chambergrid-mark): a harbour navy pin with a brass node standing on an intersection of a 3x3 slate street grid, at 40px and larger; app icons, avatars and social profiles40px minimum

Round seal (chambergrid-seal): harbour navy double rule, outlined Manrope legend CHAMBERGRID over LOCAL IMPACT, WORLDWIDE with brass separators, and the Placemark on a round street field at the centre. For partnership certificates, signed agreements, member charters, event backdrops and footers; never below 128px128px minimum

Favicon cut of the Placemark (chambergrid, chambergrid-dark): two avenues and two cross streets on the pixel grid, a larger pin and a solid node, at 39px and smaller16px minimum

Do not stretch, skew, rotate, outline or add effects (shadows, gradients, bevels) to a registered mark, and never tilt the pin.

The pin stands on a street intersection and the grid is always cut clear around it; never let the streets touch the pin, never move the pin off the crossing, and never add more pins or streets.

The brass node sits inside the pin head, one per mark; never recolour it to vermilion, red or a status colour, and never repeat it elsewhere in a lockup.

Technical details59 canonical values and registry paths

Clear Space Token Ref: --brandOS-space-4Logos · Clear space token ref
Alignment: horizontalLogos · Co branding rules · #1 · Alignment
Enforceable: NoLogos · Co branding rules · #1 · Guidance · #1 · Enforceable
Id: endorsed-by-articled-noteLogos · Co branding rules · #1 · Guidance · #1 · Id
Text: ChamberGrid leads and Articled follows smaller on a shared baseline (ChamberGrid, by Articled): the endorsement line is Public Sans at no more than half the wordmark cap height, set after the full lockup and separated by the clear space. Chamber white-label surfaces lead with the chamber brand and carry a small Powered by ChamberGrid line in the footer.Logos · Co branding rules · #1 · Guidance · #1 · Text
Id: endorsed-by-articledLogos · Co branding rules · #1 · Id
Spacing Token Ref: --brandOS-space-4Logos · Co branding rules · #1 · Spacing token ref
Alignment: horizontalLogos · Co branding rules · #2 · Alignment
Enforceable: NoLogos · Co branding rules · #2 · Guidance · #1 · Enforceable
Id: powered-by-federated-trust-noteLogos · Co branding rules · #2 · Guidance · #1 · Id
Text: Where member identity or verification runs on Federated Trust, ChamberGrid keeps the lead and a single Powered by Federated Trust line follows in the footer or beside the verification control, in Public Sans at body-small size with the registered Federated Trust mark no taller than the line. Never lock the Federated Trust mark into the ChamberGrid logo or seal, and never let it lead a ChamberGrid surface.Logos · Co branding rules · #2 · Guidance · #1 · Text
Id: powered-by-federated-trustLogos · Co branding rules · #2 · Id
Spacing Token Ref: --brandOS-space-4Logos · Co branding rules · #2 · Spacing token ref
Context: Full horizontal lockup (chambergrid-logo): the Placemark beside the Manrope ExtraBold ChamberGrid wordmark, caps centred on the markLogos · Minimum sizes · #1 · Context
Id: logoLogos · Minimum sizes · #1 · Id
Width Px: 160Logos · Minimum sizes · #1 · Width px
Context: Stacked lockup (chambergrid-logo-compact): the Placemark centred above the wordmark, for widths from 96 to 159pxLogos · Minimum sizes · #2 · Context
Id: compact-logoLogos · Minimum sizes · #2 · Id
Width Px: 96Logos · Minimum sizes · #2 · Width px
Context: Placemark alone (chambergrid-mark): a harbour navy pin with a brass node standing on an intersection of a 3x3 slate street grid, at 40px and larger; app icons, avatars and social profilesLogos · Minimum sizes · #3 · Context
Id: markLogos · Minimum sizes · #3 · Id
Width Px: 40Logos · Minimum sizes · #3 · Width px
Context: Round seal (chambergrid-seal): harbour navy double rule, outlined Manrope legend CHAMBERGRID over LOCAL IMPACT, WORLDWIDE with brass separators, and the Placemark on a round street field at the centre. For partnership certificates, signed agreements, member charters, event backdrops and footers; never below 128pxLogos · Minimum sizes · #4 · Context
Id: sealLogos · Minimum sizes · #4 · Id
Width Px: 128Logos · Minimum sizes · #4 · Width px
Context: Favicon cut of the Placemark (chambergrid, chambergrid-dark): two avenues and two cross streets on the pixel grid, a larger pin and a solid node, at 39px and smallerLogos · Minimum sizes · #5 · Context
Id: faviconLogos · Minimum sizes · #5 · Id
Width Px: 16Logos · Minimum sizes · #5 · Width px
Primary Asset Id: chambergrid-logo-inkLogos · Primary asset id
Enforceable: NoLogos · Prohibited uses · #1 · Enforceable
Id: do-not-distortLogos · Prohibited uses · #1 · Id
Text: Do not stretch, skew, rotate, outline or add effects (shadows, gradients, bevels) to a registered mark, and never tilt the pin.Logos · Prohibited uses · #1 · Text
Enforceable: NoLogos · Prohibited uses · #2 · Enforceable
Id: pin-on-the-crossingLogos · Prohibited uses · #2 · Id
Text: The pin stands on a street intersection and the grid is always cut clear around it; never let the streets touch the pin, never move the pin off the crossing, and never add more pins or streets.Logos · Prohibited uses · #2 · Text
Enforceable: NoLogos · Prohibited uses · #3 · Enforceable
Id: one-brass-nodeLogos · Prohibited uses · #3 · Id
Text: The brass node sits inside the pin head, one per mark; never recolour it to vermilion, red or a status colour, and never repeat it elsewhere in a lockup.Logos · Prohibited uses · #3 · Text
Enforceable: NoLogos · Prohibited uses · #4 · Enforceable
Id: no-retypesetLogos · Prohibited uses · #4 · Id
Text: Do not retypeset the wordmark in a live font; always use the outlined registered artwork.Logos · Prohibited uses · #4 · Text
Enforceable: NoLogos · Prohibited uses · #5 · Enforceable
Id: small-sizes-use-favicon-cutLogos · Prohibited uses · #5 · Id
Text: Where the mark stands alone below 40px (favicons, tabs, small avatars) use the favicon cut (chambergrid, chambergrid-dark), never the full 3x3 mark; at 40px and above, and inside the registered lockups, use the full mark.Logos · Prohibited uses · #5 · Text
Enforceable: NoLogos · Prohibited uses · #6 · Enforceable
Id: seal-is-oursLogos · Prohibited uses · #6 · Id
Text: The seal is the ChamberGrid seal only. Never present it as a chamber seal, a government seal or a mark of accreditation, and never replace the legend with a chamber name; a chamber partnership shows the chamber mark beside the seal, never inside it.Logos · Prohibited uses · #6 · Text
Enforceable: NoLogos · Prohibited uses · #7 · Enforceable
Id: no-national-symbolsLogos · Prohibited uses · #7 · Id
Text: Keep the seal and the mark free of national flags, colours and emblems: no tricolour, no stars and stripes, no Ashoka Chakra or Lion Capital, no eagles or government seals. The grid is abstract streets, never a real map: no city plans, coastlines, country or state outlines.Logos · Prohibited uses · #7 · Text
Enforceable: NoLogos · Prohibited uses · #8 · Enforceable
Id: seal-no-ornamentLogos · Prohibited uses · #8 · Id
Text: Do not add laurels, ribbons, stars, dates, crests or metallic and embossed effects to the seal, do not rotate it, and do not use it as a favicon or below 128px; use the mark instead.Logos · Prohibited uses · #8 · Text
Enforceable: NoLogos · Prohibited uses · #9 · Enforceable
Id: never-hexagonsLogos · Prohibited uses · #9 · Id
Text: Never place the mark or the seal in a hexagon, honeycomb or hive frame.Logos · Prohibited uses · #9 · Text
Enforceable: NoLogos · Prohibited uses · #10 · Enforceable
Id: tone-matches-surfaceLogos · Prohibited uses · #10 · Id
Text: Use the dark artwork on linen and light surfaces and the light artwork on midnight, harbour navy or other dark surfaces; use the ink variant when one colour is required (its knockouts keep the pin, node and grid distinct).Logos · Prohibited uses · #10 · Text

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

Technical details2 canonical values and registry paths

Groups Assets Approved Asset Ids: No additional entriesAssets · Approved asset ids
Groups Assets Guidance: No additional entriesAssets · Guidance

Responsive layout

defaulted

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

34 resolved values

Mobile0px+

Tablet640px+

Desktop1024px+

Margins 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

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 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

Graphic systems

defaulted

Named visual systems and their registered asset and taxonomy references.

2 resolved values

Core SystemBrand

0 assets

Technical details2 canonical values and registry paths

Groups Graphics Systems: No additional entriesGraphics · Systems
Groups Graphics Taxonomies: No additional entriesGraphics · Taxonomies

Imagery direction

authored

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

16 resolved values

01 · Composition

Show real regional places and people at work: main streets, member storefronts, chamber events, print issues; never stock handshakes, skylines or glowing AI brains.

02 · Subject

Illustrations are line drawings on a 24px street grid: harbour slate streets, harbour navy structures and pins on linen, and one brass node per drawing marking the place the drawing is about.

03 · Treatment

Every product view or capability shows its status (Live, Pilot, In build, Designed); label illustrative data as illustrative.

Technical details16 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 real regional places and people at work: main streets, member storefronts, chamber events, print issues; never stock handshakes, skylines or glowing AI brains.Imagery · Photography · #1 · Text
Enforceable: NoImagery · Photography · #2 · Enforceable
Id: imagery-02Imagery · Photography · #2 · Id
Text: Illustrations are line drawings on a 24px street grid: harbour slate streets, harbour navy structures and pins on linen, and one brass node per drawing marking the place the drawing is about.Imagery · Photography · #2 · Text
Enforceable: NoImagery · Photography · #3 · Enforceable
Id: imagery-03Imagery · Photography · #3 · Id
Text: Never use hexagons, honeycombs, bees or hive imagery.Imagery · Photography · #3 · Text
Enforceable: NoImagery · Product imagery · #1 · Enforceable
Id: product-statusImagery · Product imagery · #1 · Id
Text: Every product view or capability shows its status (Live, Pilot, In build, Designed); label illustrative data as illustrative.Imagery · Product imagery · #1 · Text
Enforceable: NoImagery · Product imagery · #2 · Enforceable
Id: product-chamber-firstImagery · Product imagery · #2 · Id
Text: Product screenshots show the chamber brand in front and ChamberGrid behind it, as a white-label chamber would see it.Imagery · Product imagery · #2 · Text

Shared components

defaulted

Shared component participation and bounded state-token overrides.

8 resolved values

ChamberGrid interfaceShared system

FoundationActions and fields

04 states

Primary actionSecondary

Email addressname@company.com

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

Technical 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

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-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

Motion

authored

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

10 resolved values

Easing

Ease SmoothProgress over time, arrive gently, never snap

Duration scale

Duration FastDuration Normal

Reduced-motion behavior is required.

Technical details10 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
Enforceable: NoMotion · Guidance · #1 · Enforceable
Id: draw-onceMotion · Guidance · #1 · Id
Text: Motion draws connections once: stroke draw-on, opacity and transform only, finishing within 1.2 seconds and never looping. prefers-reduced-motion and no-JavaScript visitors see the finished drawing.Motion · Guidance · #1 · Text
Enforceable: NoMotion · Guidance · #2 · Enforceable
Id: draw-the-placemarkMotion · Guidance · #2 · Id
Text: Registered artwork carries stable ids prefixed by its file name: -mark, -grid, -pin, -node and -wordmark in the lockups and marks (for example chambergrid-logo-dark-grid, chambergrid-logo-dark-pin), and -ring, -legend, -grid, -pin, -node in the seal. The site may fade the grid in, drop the pin onto its crossing with a short settle, and set the brass node last; the resting frame is always the registered artwork.Motion · Guidance · #2 · Text
Reduced Motion Required: YesMotion · Reduced motion required

Prose guidance

authored

Human-readable direction distributed with the effective visual specification.

6 resolved values

Working principlesClear direction for consistent decisions

Every capability carries a status label (Live, Pilot, In build, Designed); no customer logos, counts or testimonials without consent.

Human-readable guidance

Write as a regional partner who sits on the chamber board: plain, specific, about the chamber revenue and its members businesses, never hype.

Human-readable guidance

Technical details6 canonical values and registry paths

Enforceable: NoProse guidance · #1 · Enforceable
Id: status-labelledProse guidance · #1 · Id
Text: Every capability carries a status label (Live, Pilot, In build, Designed); no customer logos, counts or testimonials without consent.Prose guidance · #1 · Text
Enforceable: NoProse guidance · #2 · Enforceable
Id: regional-partner-voiceProse guidance · #2 · Id
Text: Write as a regional partner who sits on the chamber board: plain, specific, about the chamber revenue and its members businesses, never hype.Prose guidance · #2 · Text

04 · Accessibility

Verified accessible pairings

Live specimens rendered from canonical foreground and background tokens.

14 verified

Contrast4.76:1

AA text

Foreground--semantic-brand-accent-contentSurface--semantic-brand-accent

Standard text: AA passAAA fail
Large text: AA passAAA pass

Contrast10.43:1

AAA text

Foreground--semantic-brand-primary-contentSurface--semantic-brand-primary

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast4.69:1

AA text

Foreground--semantic-brand-secondary-contentSurface--semantic-brand-secondary

Standard text: AA passAAA fail
Large text: AA passAAA pass

Contrast15.02:1

AAA text

Foreground--semantic-neutral-contentSurface--semantic-neutral-base

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast7.19:1

AAA text

Foreground--semantic-status-error-contentSurface--semantic-status-error

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast7.34:1

AAA text

Foreground--semantic-status-informative-contentSurface--semantic-status-informative

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast7.60:1

AAA text

Foreground--semantic-status-success-contentSurface--semantic-status-success

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast7.24:1

AAA text

Foreground--semantic-status-warning-contentSurface--semantic-status-warning

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast5.57:1

AA text

Foreground--semantic-content-mutedSurface--semantic-surface-1

Standard text: AA passAAA fail
Large text: AA passAAA pass

Contrast15.02:1

AAA text

Foreground--semantic-content-primarySurface--semantic-surface-1

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast5.22:1

AA text

Foreground--semantic-content-mutedSurface--semantic-surface-2

Standard text: AA passAAA fail
Large text: AA passAAA pass

Contrast13.07:1

AAA text

Foreground--semantic-content-primarySurface--semantic-surface-2

Standard text: AA passAAA pass
Large text: AA passAAA pass

Contrast4.84:1

AA text

Foreground--semantic-content-mutedSurface--semantic-surface-3

Standard text: AA passAAA fail
Large text: AA passAAA pass

Contrast10.91:1

AAA text

Foreground--semantic-content-primarySurface--semantic-surface-3

Standard text: AA passAAA pass
Large text: AA passAAA pass

05 · Example uses

Where ChamberGrid shows up

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

03Application
surfaces

06 · Delivery

Drop in anywhere

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

01
LoadGlobal tokens
02
ThemeChamberGrid
03
RenderEvery component

index.htmlComplete CDN setupHTMLVersion pinned

<link rel="stylesheet" href="https://brand.snyder.tech/cdn/0.44.6/themes/global-tokens.css" />
<link rel="stylesheet" href="https://brand.snyder.tech/cdn/0.44.6/themes/chambergrid-brand.css" />
<script type="module" src="https://brand.snyder.tech/cdn/0.44.6/index.js"></script>
<html data-brand="chambergrid" data-theme="light">

Registered assets

14 immutable assets

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

Release: v0.44.6
Integrity: 14/14
Payload: 56 KB

01 · Faviconchambergrid-dark.svgdark artwork616 BVerified
02 · Faviconchambergrid.svgsingle artwork601 BVerified
03 · Logochambergrid-logo-compact-dark.svgdark artwork4.3 KBVerified
04 · Logochambergrid-logo-compact-ink.svgink artwork4.3 KBVerified
05 · Logochambergrid-logo-compact-light.svglight artwork4.4 KBVerified
06 · Logochambergrid-logo-dark.svgdark artwork4.4 KBVerified
07 · Logochambergrid-logo-ink.svgink artwork4.4 KBVerified
08 · Logochambergrid-logo-light.svglight artwork4.4 KBVerified
09 · Logochambergrid-mark-dark.svgdark artwork1.0 KBVerified
10 · Logochambergrid-mark-ink.svgink artwork1000 BVerified
11 · Logochambergrid-mark-light.svglight artwork1.0 KBVerified
12 · Logochambergrid-seal-dark.svgdark artwork8.5 KBVerified
13 · Logochambergrid-seal-ink.svgink artwork8.5 KBVerified
14 · Logochambergrid-seal-light.svglight artwork8.5 KBVerified

brand-mark.inkRecommended themeable markTypeScriptVersion pinned

// Recommended, themeable: currentColor follows the theme when inlined
import ChamberGridMark from '@brandos/ui/assets/brand-logos/chambergrid-logo-compact-ink.svg?raw';
// Astro: <span set:html={Mark} />   ·   React (SVGR): import ...?react

Implementation libraryAlternative asset recipesImage, background and favicon patterns3 recipes

logo.htmlFixed artwork imageHTMLVersion pinned

<img
  src="https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-logo-compact-dark.svg"
  alt="ChamberGrid"
  loading="lazy"
  decoding="async"
/>

mark.cssCSS background recipeCSSVersion pinned

.chambergrid-mark {
  background-image: url("https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-logo-compact-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.44.6/assets/brand-favicons/chambergrid.svg" />

Registry evidenceVersioned asset manifestPaths, sizes and integrity hashesSHA-256

chambergrid-cdn-manifest.txtVersioned asset inventoryManifestVersion pinned

# favicon · 616 B
# sha256:3211c2adefa4991a3e4e4197102c1f8c647aab18cd0e71069960845851000e17
https://brand.snyder.tech/cdn/0.44.6/assets/brand-favicons/chambergrid-dark.svg

# favicon · 601 B
# sha256:2e77148234fc59169d8207841b15344880035eed46a8e961925077595b9f2c60
https://brand.snyder.tech/cdn/0.44.6/assets/brand-favicons/chambergrid.svg

# logo · 4.3 KB
# sha256:7a8ebbb6a315326fd89a073313c2eebb23bce7bdd10fb40f92f5bcdb7142aa8f
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-logo-compact-dark.svg

# logo · 4.3 KB
# sha256:de5a708a6a9e7a500d2d8aa2c98abb8113fcb4cf932e33e5f2cefb66916115ab
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-logo-compact-ink.svg

# logo · 4.4 KB
# sha256:0439ac8f1c3b44cfe1665eb663b1e788d959991175ee8f9942e22e712082b0e8
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-logo-compact-light.svg

# logo · 4.4 KB
# sha256:c84b8a7a350285edcec02806bb4117190f2ab88c3e43adfc39c220b3a4a8a9a5
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-logo-dark.svg

# logo · 4.4 KB
# sha256:4fafabd03f7cf55f7cb96ac32c28f1138a43cd01e760bf30b2a452564ba7bb01
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-logo-ink.svg

# logo · 4.4 KB
# sha256:9409381799c3bcbb49d68c097fe214a81c2412c69415717a14ac703f20fb416f
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-logo-light.svg

# logo · 1.0 KB
# sha256:4ab3936167e3bd65309be968fce107485db77bad28a920883759c0c0d84e4bd8
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-mark-dark.svg

# logo · 1000 B
# sha256:79b7b149ff0f32eb4b4765f382d8706edfa670a74ff44fa7892a6b2520b0bbd7
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-mark-ink.svg

# logo · 1.0 KB
# sha256:37df83c9aeac8263e01927f41cdec85f054145db3c615dcd246048c3bd079c79
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-mark-light.svg

# logo · 8.5 KB
# sha256:e3df15fb25afa47b694ff07a9cb5d48a61a2648b5f8dd4900c63b5c87237a9cc
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-seal-dark.svg

# logo · 8.5 KB
# sha256:9bfbbf36d7067a1b4e11f7d709350a63f0105939df40203bb93fd955cb322577
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-seal-ink.svg

# logo · 8.5 KB
# sha256:f743274564ef07475b4da36137f761b14dfd7d895b2633204e62c104e446094b
https://brand.snyder.tech/cdn/0.44.6/assets/brand-logos/chambergrid-seal-light.svg

Machine-readable manifest.json, all brands in this version