Somm Brand System

The visual identity of Somm — one dot, endlessly arranged.

This repository is the canonical home for the Somm brand system: logo, color, typography, motif, and the UI components built from them. It renders to a single self-contained page (index.html) and ships reusable SVG logo assets in assets/.

Built from the source social-graphics kit and systemised for consistent use across every surface.

Preview

Open index.html in any browser, or serve the folder:

python3 -m http.server 8000
# then visit http://localhost:8000/index.html

index.html is fully static and dependency-free. The two brand fonts (Sora and Space Mono) load from Google Fonts.

The system at a glance

Color

Role	Name	Hex
Primary	Coral	#F26057
Primary	Ink	#1F1F2D
Accent	Purple	#60509B
Accent	Rose	#D3426F
Accent	Orange	#F4AF5A
Accent	Yellow	#F7DF58
Accent	Teal	#2186A5
Accent	Lime	#D4EC8D
Accent	Mint	#DDFFDE
Neutral	White	#FFFFFF

Coral and ink carry the brand. The saturated hues are accents for illustration, tags and expressive graphics — never large fields against each other.

Typography

• Sora — geometric sans for display and UI (weights 300–800).
• Space Mono — labels, metadata and code (400 / 700).

Logo

A geometric wordmark paired with a mark built from a 3×3 grid of the brand dot, clipped to a square so the outer dots read as halves and quarters.

• Use the full lockup wherever space allows.
• Fall back to the mark for avatars and tight placements.
• Clear space: one dot (½ the mark) on every side.
• Minimum size: 120px for the lockup, 24px for the mark.

Logo assets

Ready-to-use SVGs live in assets/:

File	What
somm-mark.svg	Dot mark, currentColor (recolor via CSS color)
somm-mark-coral.svg / -white.svg / -ink.svg	Fixed-color marks
somm-wordmark.svg	Wordmark, currentColor
somm-wordmark-white.svg / -ink.svg	Fixed-color wordmarks
somm-lockup-coral-white.svg	Full lockup for dark surfaces
somm-lockup-coral-ink.svg	Full lockup for light surfaces

The currentColor variants inherit the surrounding text color, so <img>-embedding aside, inlining them lets you theme the logo with a single color declaration.

Repository layout

index.html            Rendered, standalone brand system page (build output)
assets/               Exported SVG logo assets (build output)
build.mjs             Renders source/ Design Composer files -> index.html
gen-assets.mjs        Emits the SVGs in assets/
lib/logo.mjs          Shared logo geometry (mark + wordmark paths)
source/               Original Claude Design (Design Composer) project files
  Somm Brand System.dc.html
  SommLogo.dc.html
  support.js          Design Composer runtime (for opening the .dc.html files)
  brand/              Figma-exported React/SVG logo components

Building

The page and assets are generated from the source/ Design Composer files. Requires Node.js (any recent version); no dependencies to install.

node build.mjs        # source/Somm Brand System.dc.html -> index.html
node gen-assets.mjs   # -> assets/*.svg

build.mjs resolves the Design Composer constructs (<dc-import> logo components, <sc-if> conditionals, <helmet>) into plain, static HTML and converts style-hover attributes into real :hover CSS.

Source

The source/ directory preserves the original Claude Design project the system was authored in. The .dc.html files are editable in Design Composer; index.html is the compiled, portable result.

License

The contents of this repository are licensed under Creative Commons Attribution 4.0 International (CC BY 4.0).

The Somm name and logo are brand assets of the Somm project. You may reproduce and adapt them under CC BY 4.0 with attribution, but please do not use them to imply endorsement by or affiliation with Somm.