Introduction
One system.
An expanding family of brands.
A brand system built to unify and elevate an expanding family of Formedics brands using encoded graphic marks (called ciphograms) to symbolize distinct micro-communities, specialized networks and shared experiences. The brand system encodes text into unique graphic symbols, creating a visual fingerprint of language. Ciphograms are representations of connections that enable understanding, of data points converging to create meaning and of people coming together to amplify knowledge.
How a family member is built
Encode the brand name into its ciphogram on the shared grid.
Set the wordmark in Config, the family typeface.
Assign one palette from the shared library.
Combine mark and wordmark on a shared vertical center.
Coherence comes from the shared grid, typeface and color foundation; distinction comes from each brand’s own mark and its one assigned palette. The default mark shown throughout is the ciphogram of ciphograph in the Formedics colors; the worked lockup example is Lung Cancers Today (Aquamarine).
The system
A ciphogram is derived from a 5×6 grid containing all 26 letters of the alphabet. Read the text, plot each letter at its fixed cell, and connect the letters in sequence — a reproducible method that turns any name into a unique visual fingerprint.
CIPHOGRAPH plotted and connected. P and H repeat, so their nodes grow; the lead node is accented.
- 1Plot each letter. Each letter is mapped to its fixed position on the grid.
- 2Draw connecting lines. Lines connect each letter to the next in sequence, in the default color.
- 3Mark repeated letters. When a letter repeats at the same position, its shape grows for each occurrence.
- 4Highlight word starts. The first letter of each word takes the accent color; all others use the shape color.
Official marks
The Ciphograph accepts longer names and multiple words. A Formedics official mark encodes the
first six letters of the name as a single token — one word, one lead accent — keeping the
constellation clean at small sizes. Lung Cancers Today → LUNGCA.
Ciphograms
The mark is built from nodes, connectors and a single lead accent. Circles are the official node shape.
- Lead accentThe first node, in the accent color.
- NodesEvery other letter, in the default color.
- ConnectorsLines following reading order.
- Repeats growA node’s shape grows each time its letter repeats at the same cell.
Beyond the default — generator shapes
Circles are the node shape for all official brand designations. The Ciphograph also offers square, triangle, plus and asterisk nodes for creating non-official ciphograms.
Wordmark & type
The wordmark is set in Config, a variable typeface used across the family. Lead words are extra bold; the temporal word (“today,” “now,” “times”) drops to light.
- Lead
- Extra Bold · all caps · 134 / 115
- Temporal
- Light · all caps · 134 / 115
- Tagline
- Regular · sentence case · 36 / 42
- Ratio
- The tagline is 36pt against the 134pt lead cap — about 0.27× — set by the lockup spec, not arbitrary.
Config on family brand titles
Variable weight axis — 100 to 900
100200300400500600700800900Color & palette library
A strong, high-hue primary anchor creates a foundation that repeats across the full family of Formedics brands. Primary hues run high in saturation and chroma, holding contrast against both white and black, with a low-value complement that can reasonably stand in for black.
Brand light · brand dark · brand black · white · neutral.
Tints of brand light and brand dark.
Reserved mostly for web and ui/ux: a high-chroma temperature match and contrast with brand light.
A shared gray neutral and true white repeat across every palette — the family thread.
Palette library — 24 unassigned palettes — one is assigned per brand
A library, not a brand’s set. As a new Formedics brand is created it is assigned one palette from this library. Lung Cancers Today uses Aquamarine (10). Each button is tinted with its brand light — the row reads as the family’s range. Select any palette to expand its exact values.
Lockups
This is the build section: how to take an exported ciphograph and assemble a lockup with the wordmark. Two rules govern every lockup — the ciphograph and type are aligned by vertical center, and the cap height of the brand font is the unit of measure for spacing and safety margins. Toggle Construction on any example to see the instruction layer; Reversed shows it on a Brand Light panel.
With tagline
Without tagline
Badge · with tagline
Badge · without tagline
Percentages are of the generator’s default export size. Marks export with a 2pt stroke at 100%; the stroke scales with the export size.
Formats
The Ciphograph exports the mark in three frames. What changes is the shape of the background and how the mark is centered against it — the mark itself never changes.
The truest form — a portrait rectangle where the grid is the canvas and the negative space is elemental. The mark sits in its native grid position.
A square ground. The grid shifts so the mark sits centered.
A circular ground with the mark centered — for social platforms and profile pictures.
Motion
The mark is built to animate. The brand bumper resolves into the lockup; for in-product use the Ciphograph offers entrance styles. Use motion for intros and loaders, not as a permanent state.
Entrance styles · from the generator
Export as an animated SVG, or as a transparent PNG sequence for After Effects. Make and export any of these in the Generator.
Usage
Usage guidance for keeping marks on-system.
Assets & export
Everything is generated by the Ciphograph. Pull what you need rather than redrawing by hand.
Vector mark for print and web.
Raster at export size, transparent or on a ground.
Self-contained motion for web and email.
Transparent frames for After Effects.
Markup straight to the clipboard.
A link that reopens the exact mark in the tool.
Ciphograph (Generator)
The Ciphograph runs the same engine these guidelines describe — type a name, set color, choose a frame and motion, and export. Here's what each control does; make a mark in the tool itself.
Open the Ciphograph ↗01 · Name
Type a name. Get a mark.
The Ciphograph encodes a brand name or abbreviation into a fixed graph of nodes and lines — its ciphogram. What you type is the seed; the engine resolves it into one specific mark.
Deterministic — the same input always produces the same ciphogram, so an identity stays stable every time it's generated.
02 · Color
Four roles, set independently.
Color is assigned by role, not by swatch. Shapes, Accent, Lines, and Background each take their own value — and Lines or Background can go transparent so the mark drops onto any surface.
Accent is the single highlighted node — pull it from a palette's Match or Contrast ramp to tie the mark to its brand.
03 · Format
One mark, three frames.
Export the mark as Logo (480×560 portrait, native grid position), Square (600, centered), or Avatar (circular, centered). What changes is the ground and how the mark is centered against it.
The mark itself never changes between frames — see §06 Formats for the full construction.
04 · Motion
Bring the mark in.
Pick how the mark animates and how it plays. Styles draw, assemble, or react to the viewer; playback decides whether a sequence runs once, loops, or bounces.
Motion is built into the mark — it animates the same nodes and lines, so structure is never sacrificed for the effect.
05 · Export
Take it anywhere.
Download the mark as static SVG, animated SVG, or PNG; export a numbered PNG sequence for video and motion tools; or copy the SVG code and share a link to the exact result.
A PNG sequence takes a frame size and width in pixels — set them before export to match your target canvas.