Visual identity

Rum & Co

A specialty rum retailer and tasting brand offering curated rums, spirits, and accessories for enthusiasts.

rumundco.de

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: rum
Token package: @brandos/tokens/css/rum
Heading: Source Serif 4
Body: Source Sans 3

01.01 · Rum Red ramp

19 shades of Rum Red

Rum Red identity ramp generated from canonical rum token data.

01.02 · Rum Gray ramp

19 shades of Rum Gray

Rum Gray identity ramp generated from canonical rum token data.

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

Source Serif 4 on display · Source Sans 3 for everything else

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

Heading typefaceSource Serif 4

--brandOS-font-heading

Display specimen

Rum & Co moves with purpose.

Family: Source Serif 4
Registry ID: source-serif-4
Primary use: Display and hierarchy

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

Size: 4xl
Leading: Tight
Weight: Bold

Body typefaceSource Sans 3

--brandOS-font-body

Reading specimen

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

Family: Source Sans 3
Registry ID: source-sans-3
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

Surface split

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.

Marketing surface

Campaign pages, hero moments, the public site.

data-surface="marketing"

Rum & Co, 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: Source Serif 4
Body: Source Sans 3
Origin: Inherits the base pair

Enterprise application surface

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: Source Serif 4
Body: Source Sans 3
Origin: Inherits the base pair

03 · Effective specification

Registry-resolved visual contract

One resolved source for every visual rule

Version 1.0.0, effective 2026-07-29. 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 6979b81b

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: 2
Inherited Shared: 0
Defaulted System: 10

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

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.

HeadingSource Serif 4

Text 4xl2.5–4rem

BodySource Sans 3

Text Base0.875–1rem

The base hierarchy scales without brand-specific overrides.

Technical details12 canonical values and registry paths

Font Id: source-serif-4Typography · 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: source-sans-3Typography · 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

Logo usage

defaulted

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

8 resolved values

Clear space: Space 4

Primary digital lockup120px minimum

Do not stretch, skew, recolour, or otherwise distort a registered mark.

Do not rotate

Do not recolour

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

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.

11 resolved values

01 · Composition

Show real bottles, tastings, and craft-spirit moments over generic stock beverage imagery.

02 · Subject

Pair the deep wine red with warm neutrals and elegant Source Serif headings to convey a premium, craft identity.

03 · Treatment

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 real bottles, tastings, and craft-spirit moments over generic stock beverage imagery.Imagery · Photography · #1 · Text
Enforceable: NoImagery · Photography · #2 · Enforceable
Id: imagery-02Imagery · Photography · #2 · Id
Text: Pair the deep wine red with warm neutrals and elegant Source Serif headings to convey a premium, craft identity.Imagery · Photography · #2 · Text
Enforceable: NoImagery · Photography · #3 · Enforceable
Id: imagery-03Imagery · Photography · #3 · Id
Text: Keep layouts refined and editorial so the red-forward identity reads as bold, warm, and premium.Imagery · Photography · #3 · Text
Groups Imagery Product Imagery: No additional entriesImagery · Product imagery

Shared components

defaulted

Shared component participation and bounded state-token overrides.

8 resolved values

Rum & Co 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

defaulted

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

5 resolved values

Easing

Ease SmoothProgress over time, arrive gently, never snap

Duration scale

Duration FastDuration Normal

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

Prose guidance

defaulted

Human-readable direction distributed with the effective visual specification.

3 resolved values

Working principlesClear direction for consistent decisions

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

14 verified

Contrast6.93:1

AA text

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

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

Contrast5.51:1

AA text

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

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

Contrast5.51:1

AA text

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

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

Contrast19.42: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

Contrast8.71:1

AAA text

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

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

Contrast19.42:1

AAA text

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

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

Contrast8.45:1

AAA text

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

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

Contrast17.99:1

AAA text

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

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

Contrast7.48:1

AAA text

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

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

Contrast16.02:1

AAA text

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

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

05 · Example uses

Where Rum & Co 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 Rum & Co brand renders from CDN.

01
LoadGlobal tokens
02
ThemeRum & Co
03
RenderEvery component

index.htmlComplete CDN setupHTMLVersion pinned

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

Registered assets

7 immutable assets

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

Release: v0.44.11
Integrity: 7/7
Payload: 483 KB

01 · Faviconrum-dark.svgdark artwork29 KBVerified
02 · Faviconrum.svgsingle artwork29 KBVerified
03 · Logorum-logo-dark.svgdark artwork36 KBVerified
04 · Logorum-logo-ink.svgink artwork36 KBVerified
05 · Logorum-logo-light.svglight artwork36 KBVerified
06 · Logorum-logo.svgsingle artwork36 KBVerified
07 · Login Bgrum-login-bg.svgsingle artwork281 KBVerified

brand-mark.inkRecommended themeable markTypeScriptVersion pinned

// Recommended, themeable: currentColor follows the theme when inlined
import RumCoMark from '@brandos/ui/assets/brand-logos/rum-logo-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.11/assets/brand-logos/rum-logo-dark.svg"
  alt="Rum & Co"
  loading="lazy"
  decoding="async"
/>

mark.cssCSS background recipeCSSVersion pinned

.rum-mark {
  background-image: url("https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/rum-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.44.11/assets/brand-favicons/rum.svg" />

Registry evidenceVersioned asset manifestPaths, sizes and integrity hashesSHA-256

rum-cdn-manifest.txtVersioned asset inventoryManifestVersion pinned

# favicon · 29 KB
# sha256:68c336b911cb2da448bf8b45b0e9013f09ca26c5d7914506b4a58f7c0154119e
https://brand.snyder.tech/cdn/0.44.11/assets/brand-favicons/rum-dark.svg

# favicon · 29 KB
# sha256:e48662617280f3b4ca80b4237b8931d5e8bdb89e77ab94ff244034bf4446933c
https://brand.snyder.tech/cdn/0.44.11/assets/brand-favicons/rum.svg

# logo · 36 KB
# sha256:d6bc63658dae05ffc53786c29f08422326b108c487482905692d64c749f281a2
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/rum-logo-dark.svg

# logo · 36 KB
# sha256:5285438be6ed9047010c30ceb39813d12e9b3450a8f48396645c281a261b495c
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/rum-logo-ink.svg

# logo · 36 KB
# sha256:7ab2edcef4adcc14a637222bc4839658f1b3640ea0838ba3882f4e637c1517aa
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/rum-logo-light.svg

# logo · 36 KB
# sha256:5285438be6ed9047010c30ceb39813d12e9b3450a8f48396645c281a261b495c
https://brand.snyder.tech/cdn/0.44.11/assets/brand-logos/rum-logo.svg

# login-bg · 281 KB
# sha256:ae4d7d289e1b3e2d4201b30ba29d4386b8d5e5c1fbd379b358f97d45006cc52f
https://brand.snyder.tech/cdn/0.44.11/assets/login-bg/rum-login-bg.svg

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