AI Workflows and BrandingBlack ForestThe library

Black Forest

From supplement skepticism to product stories confident enough to be funny.

The Black Forest system

Your cup. Your call.

The center

The customer is an adult who reads labels and makes his own call. Every piece gives him the information and the last word, then gets out of the way.

What the system protects

One color leads and the rest have jobs. Condensed capitals for the statement, Space Grotesk for the explanation, one packaging color per product.

What it refuses

Wellness euphemism, motivational speeches, and any claim about launch, media spend, testing or results.

App experience · The routine builder

What moved: From selling another product to helping a customer own a useful routine.

Black package authority, warm label paper, readable evidence and deliberate choices. The seal stays open; the customer makes the call.

Desktop · Label Paper

Phone · Label Paper

The app entry from the marketing site: the composition that hands a visitor into the experience. Authored; not a redesign of the public homepage.

An authored interface concept. No health, ingredient, pricing or performance claim is made or implied.

The compositions are artwork with explicit baselines, a desktop and a phone in each mode; they are not a responsive build. Each file keeps its text live with the fonts embedded; the outlined copy freezes the type as paths.

Desktop, Label Paper Desktop, Obsidian Phone, Label Paper Phone, Obsidian Desktop, outlined Phone, outlined App entry

Components · fifty, in both modes and six states

Actions, Navigation, Forms, Feedback, Content and Overlays. Each drawing carries its six presentation states and a construction grid; pick a state, turn the grid on, narrow by category or find a control by name or job. Every control downloads as its own editable SVG in either mode, outlined, or as an import-ready default-state snapshot.

Each specimen is one layered SVG: named groups for the six presentation states, a construction grid and an accessible title, with the brand’s fonts embedded at their real weights so it opens the same in a browser or a design tool. The drawings specify appearance; a real control is a semantic HTML element built to this specification.

Try the controls

The same rules as working HTML in the brand’s tokens: a required field with native validation, a select, a switch, a range, a stepper, a date, a save that asks first, tabs that move with the arrow keys, a filter and a sort. The drawings above specify the look; this is the behaviour. No account or service is connected and nothing is stored.

One view at a time.

One useful step is enough to begin.

Can I change this later?

Yes. Return to the form, make your change, and save the revised next step.

Your context.

Filter items

	Status	Updated
Morning coffee	Your choice	Today
Read the label	Your choice	Today
Your next order	Your choice	Today

Routine saved

Two of three. Progress is named, never left to color alone.

Brand system · a shape has a reason, a color has a job

The brand-system board, Label Paper: shape grammar, material and control, the Color–Tone Continuum, typesetting and the icon family on one sheet. Download · Obsidian · outlined

01 · Shape grammar

The open seal. The circular counter becomes a seal, while label rules and a clipped corner make choices easy to inspect. Five primitives, drawn from the brand’s own geometry, carry that structure into the controls.

Action fieldthe primary action and its edge
Selection tilea chosen option
Context carda panel that holds context
Progress stopa step, kept or open
Status markera small named state

02 · Material and control

The action material runs from to : one gradient, a lit edge and a shadow, on the primary action and the selected state. Progress is named, never left to color alone.

03 · The Color–Tone Continuum

Three tiers, one job each. Unity reassures before it asks; controlled variety separates context from choice; necessary activation is one clear action at the right time. The tiers are shown in Label Paper.

01 · UnityA useful place to begin.Reassure before asking.
02 · Controlled varietySee what belongs together.Separate context and choice.
03 · Necessary activationBuild my routineOne clear action, at the right time.

01 · UnityA useful place to begin.Reassure before asking.
02 · Controlled varietySee what belongs together.Separate context and choice.
03 · Necessary activationBuild my routineOne clear action, at the right time.

The two modes

Two paired modes, one hierarchy: the same information order in Label Paper and Obsidian. Where a token names something the production case already fixes, the production value stands and is listed under Established.

Label Paper

Ground
Panel
Second panel
Ink
Muted
Line
Accent
Signal
Button
On button
Success
Error

Obsidian

Ground
Panel
Second panel
Ink
Muted
Line
Accent
Signal
Button
On button
Success
Error

Established

Forest blackthe campaign ground
Bonethe campaign ink
CocoaHigh Flavanol Cocoa
CoffeeLongevity Coffee
NMNNMN 1000MG
MagnesiumMagnesium Sleep Aid
TongkatCistanche + Tongkat Ali

Corner radius 9px · Minimum hit target 44px · Display 32 to 48 · Body 16 to 18 · Controls 14 to 16

04 · Typesetting

Space Grotesk 700

Your standards. Nobody else’s.

Read the label. Make the call.

Breakfast does not need a software update. Beef protein, coffee, and a grandfather with questions.

Space Grotesk 300, 400, 500, 600, 700 · Real font weights · Fixed icon columns · Deliberate line measure

Display: Space Grotesk
Text: Space Grotesk
Files, one per weight: Space Grotesk: 300, 400, 500, 600, 700
WOFF and TTF, under the SIL Open Font License; licences sit beside the files.

Space Grotesk throughout, as in the campaign’s reading and label type. The storefront itself sets Roboto Slab on black and white packaging; warm paper and Space Grotesk are the campaign’s authored extension.

05 · Cut from the same cloth

Thirty-two icons drawn from shared counter, terminal, angle and aperture rules, on a 24-unit field, with a hit area, a construction grid and a hidden type-reference layer that holds an O from the brand’s own face. They take the current text color, so one file serves both modes; the page draws them at 44px or larger wherever they can be pressed.

Across the brand · the same rules in email, social and the site

The interface rules leave the app: an email specimen, one headline test, the app entry on the marketing site. Then the campaign work the production case already carries.

Email specimen. A design specimen: the production version needs live text, responsive tables and a real preference footer. SVG

Headline test · one variable

A · Your cup. Your call.

B · Read clearly. Choose freely.

A frames the strategic benefit; B makes the immediate experience clearer. This is a proposed test, not an observed result. Primary measure: qualified continuation to the next intended step. The plan

Email, from the case

The Longevity Coffee sequence, live. Each of the five products carries its own three emails on its product page.

01 / Longevity CoffeeThe feed can wait View email

02 / Longevity CoffeeWhat is in the cup View email

03 / Longevity CoffeeYour call View email

Social, from the case

Four ads per product in four schemes, composed for feed, square and story. The working library also proposes three controlled pairs; those stay hypotheses until a test is run.

Homepage

The product page concept for Longevity Coffee. The other four products have their own.

Open the product page concept

Films · complete, with captions

Grandpa Has Questions0:31

Breakfast does not need a software update.

Film file Captions (VTT)

One Trip0:25

One trip. Obviously.

Film file Captions (VTT)

The Label Takes the Stand0:15

Turn it around. Ask hard questions.

Film file Captions (VTT)

Methods and downloads

The workflow

Direction. The strategic center in one sentence, the current brand read from its public site, the production case’s own colors and films as the standard that outranks any proposal.
Generation. Controls, compositions, icons, shapes and channel specimens drawn to the rules, in both modes, with the brand’s real font weights embedded.
Judgment. What did not argue for the center was cut. Established colors kept their production values; proposed extensions are labelled as such.
Construction. Layered SVG masters with named state groups, scoped references, construction grids and accessible titles; outlined and import-ready siblings for tools that substitute fonts.
Validation. Text-fit checks on every component, outlined renders compared with the editable sources, the compositions inspected, then the integrated pages checked here at four widths, both modes, keyboard and reduced motion.

Evidence

The package’s own checks (29 September 2026): every editable component file passed a text-fit check against its containing rectangle; the twenty outlined app screens differ from their editable renders by at most 0.863 on a 0 to 255 channel scale; 110 rendered compositions passed the canvas check; the five native previews ran their flows without errors at 320, 390, 768 and 1440px. What this page verified on its own: every file it references exists, the libraries open in place and on their own pages, the controls change state and mode, the lab validates, and the pages hold at the same four widths in both modes, from the keyboard and with motion reduced. What is not claimed: a usability study, an accessibility certification, a client review or any measured business outcome.

Editable sources

The whole library

Tokens (JSON) ·
Component manifest (JSON)
Source notes (README)
The site manifest (JSON): every library file with its size and hash, the path to each under assets/brand-systems/dcl/black-forest/.
Every control, screen, board, campaign specimen, icon, shape and font above downloads on its own.

What each folder holds

components/light, components/dark: fifty editable masters per mode, text live, six state groups, a construction grid.
outlined/: the same components, screens, boards and campaigns with the type frozen as paths, for tools that substitute fonts.
import-ready/: default-state, outlined snapshots for importers that ignore SVG state CSS.
screens/, boards/, campaigns/: the compositions, the category sheets and the brand-system board, the email, the headline pair and the app entry.
icons/, shapes/: thirty-two currentColor icons with construction layers; five shape primitives.
fonts/: one WOFF and TTF per weight, with the licences.

Fonts

Space Grotesk: 300 WOFF TTF · 400 WOFF TTF · 500 WOFF TTF · 600 WOFF TTF · 700 WOFF TTF · licence

From the case study

Provenance

Concept campaign, 2026. The three commercials are the approved cuts; the campaign is the revised study of 27 September.

An authored interface concept. No health, ingredient, pricing or performance claim is made or implied.

The public storefront was read for its black and white packaging and its product colour bands.

The interface library is the R4 brand-native package of 29 September 2026, which replaces the R3 package of the day before: real font weights instead of a static file declared as a range, the current brand read from each public site, outlined and import-ready siblings, shapes and channel specimens. Where a token names something the production case already fixes, the production value stands and is listed under Established.

Sources: Black Forest Supplements.

{
 "brand": {
  "id": "black-forest",
  "name": "Black Forest",
  "display": "Space Grotesk",
  "body": "Space Grotesk",
  "df": "space-grotesk",
  "bf": "space-grotesk",
  "r": 9,
  "modeNames": [
   "Label Paper",
   "Obsidian"
  ],
  "accent": "#292621",
  "darkAccent": "#D8CDB8",
  "ink": "#171614",
  "paper": "#F4F0E7",
  "soft": "#E9E2D5",
  "dark": "#121210",
  "panel": "#20201C",
  "line": "#D1C9B9",
  "darkLine": "#49483F",
  "muted": "#686354",
  "darkMuted": "#C0BBAD",
  "move": "Your cup. Your call.",
  "meaning": "The circular counter becomes a seal, while label rules and a clipped corner make choices easy to inspect.",
  "cta": "Build my routine",
  "secondary": "Read the label",
  "nav": [
   "Your routine",
   "Products",
   "Orders",
   "Account"
  ],
  "label": "Routine name",
  "value": "The morning ritual",
  "helper": "Make it useful. Make it yours.",
  "item": "Morning coffee ritual",
  "person": "Sam Taylor",
  "initials": "ST",
  "title": "Own your morning.",
  "lead": "A routine that answers to you.",
  "row": [
   "Morning coffee",
   "Read the label",
   "Your next order"
  ],
  "action": "See the routine",
  "tag": "Your choice",
  "unit": "steps",
  "metric": "03",
  "progress": "Routine saved",
  "option": [
   "One-time order",
   "Set a reminder",
   "Decide later"
  ],
  "signature": "routine-builder",
  "fontNote": "Live storefront: Roboto Slab, black/white packaging and product-specific color bands. Space Grotesk and warm label paper are Jason’s authored campaign extension, not existing corporate standards.",
  "top": "#494239",
  "bottom": "#171614",
  "motif": "The open seal"
 },
 "modes": {
  "light": {
   "bg": "#F4F0E7",
   "panel": "#FFFFFF",
   "panel2": "#E9E2D5",
   "ink": "#171614",
   "muted": "#686354",
   "line": "#D1C9B9",
   "accent": "#292621",
   "signal": "#292621",
   "button": "#292621",
   "on": "#FFFFFF",
   "success": "#236746",
   "error": "#B12424",
   "r": 9,
   "dark": false
  },
  "dark": {
   "bg": "#121210",
   "panel": "#20201C",
   "panel2": "#121210",
   "ink": "#F4F5F4",
   "muted": "#C0BBAD",
   "line": "#49483F",
   "accent": "#D8CDB8",
   "signal": "#292621",
   "button": "#292621",
   "on": "#FFFFFF",
   "success": "#84D5B4",
   "error": "#FFB6AD",
   "r": 9,
   "dark": true
  }
 },
 "minimumHitTarget": 44,
 "states": [
  "default",
  "hover",
  "focus",
  "active",
  "disabled",
  "loading"
 ],
 "material": {
  "top": "#494239",
  "bottom": "#171614",
  "meaning": "The open seal"
 },
 "status": "Authored concept; current site evidence distinguished from proposed extensions."
}

The Black Forest system

The center

What the system protects

What it refuses

App experience · The routine builder

Components · fifty, in both modes and six states

Actions 10

Navigation 10

Forms 13

Feedback 8

Content 6

Overlays 3

Try the controls

Own your morning.

One view at a time.

Your context.

Routine saved

Brand system · a shape has a reason, a color has a job

01 · Shape grammar

02 · Material and control

03 · The Color–Tone Continuum

The two modes

Label Paper

Obsidian

Established

04 · Typesetting

05 · Cut from the same cloth

Across the brand · the same rules in email, social and the site

Email, from the case

Social, from the case

Homepage

Films · complete, with captions

Methods and downloads

The workflow

Evidence

Editable sources

The whole library

What each folder holds

Fonts

From the case study

Provenance

Work that makes the customer the hero of the story.