Brand book, version 2.0.0
Cobalt Index
The complete Bobby Directory identity: cobalt as the structural colour, Signal Orange as the action and routing colour, and the Coordinate Lattice as the graphic language.
Every record, indexed and accountable.
Strategy and positioning
A directory is an instrument, not a brochure
- Category
- A directory platform. An existing export becomes a governed, searchable, publishable directory.
- Audience
- The person accountable for a body of records: association secretaries, marketplace operators, registrars and platform teams.
- Promise
- You see exactly what your data would become, and nothing is created until you confirm it.
- Proof
- Structure is described before import, authority is resolved server side, and every change is written to an audit chain.
- Character
- Engineered, exact and unhurried. An instrument rather than a marketing surface.
Logo and mark
Bracket Index A2, unchanged
A bracket enclosing two record blocks, set with a mixed case Bobby and an uppercase DIRECTORY. The mark construction is approved and is not redrawn by the Cobalt Index system. Use these files as supplied.
Full
48 px and above
The complete drawing with the true corner radii.
Simplified
20 to 48 px
Heavier stroke, tighter radii, larger counters.
Micro
16 px
Pixel snapped so every edge lands on a whole pixel.
Clear space
Minimum on every sideClear space equals the full height of the bracket on all four sides. Nothing enters that zone: no text, no rule, no lattice tick, no image edge.
Minimum size
Below these sizes, change the drawing- Horizontal lockup: 120 px wide on screen, 24 mm in print.
- Stacked lockup: 88 px wide on screen, 20 mm in print.
- Full symbol: 48 px. Below that use the simplified drawing.
- Simplified symbol: 20 px. At 16 px use the micro drawing.
Colour system
Cobalt builds the structure, Signal Orange points at the action
Every value below is a token in the runtime stylesheet. CMYK is guidance for coated stock and must be proofed before a print run. Ratios are measured against Paper and against the cobalt Field 800 surface.
| Colour | HEX | RGB | HSL | CMYK | Token | On paper | On field |
|---|---|---|---|---|---|---|---|
| Cobalt 900Pressed primary, deepest structural tone | #07269A | rgb(7, 38, 154) | hsl(227 91% 32%) | 95 / 75 / 0 / 40 | --primary-strong | 11.98 | 1.46 |
| Cobalt 700Primary structural colour, links, primary buttons | #1039C4 | rgb(16, 57, 196) | hsl(226 85% 42%) | 92 / 71 / 0 / 23 | --primary | 8.73 | 2.01 |
| Cobalt 500Focus ring, selected state | #2C5BF0 | rgb(44, 91, 240) | hsl(226 87% 56%) | 82 / 62 / 0 / 6 | --ring | 5.44 | 3.22 |
| Cobalt 300Primary on dark field | #6E93FF | rgb(110, 147, 255) | hsl(225 100% 72%) | 57 / 42 / 0 / 0 | --primary (dark) | 2.88 | 6.08 |
| Cobalt 100Soft brand surface, active nav | #E3EAFE | rgb(227, 234, 254) | hsl(224 93% 94%) | 11 / 8 / 0 / 0 | --primary-soft | 1.2 | 14.58 |
| Signal Orange 700Pressed action | #B72000 | rgb(183, 32, 0) | hsl(10 100% 36%) | 0 / 83 / 100 / 28 | --action-strong | 6.52 | 2.69 |
| Signal Orange 600Action and routing colour, primary CTA | #D34000 | rgb(211, 64, 0) | hsl(18 100% 41%) | 0 / 70 / 100 / 17 | --action | 4.66 | 3.76 |
| Signal Orange 500Lattice registration ticks, graphic accents, dark-field action | #F0561B | rgb(240, 86, 27) | hsl(17 88% 52%) | 0 / 64 / 89 / 6 | motif | 3.47 | 5.05 |
| Signal Orange 300Action on dark field | #FF7A45 | rgb(255, 122, 69) | hsl(17 100% 64%) | 0 / 52 / 73 / 0 | --action (dark) | 2.59 | 6.78 |
| Signal 100Action surface, badges | #FDE7DE | rgb(253, 231, 222) | hsl(17 89% 93%) | 0 / 9 / 12 / 1 | --action-soft | 1.19 | 14.74 |
| Ink 900Primary text on light field | #0A0F24 | rgb(10, 15, 36) | hsl(228 57% 9%) | 72 / 58 / 0 / 86 | --foreground | 18.98 | 1.08 |
| Ink 500Secondary text | #4B5573 | rgb(75, 85, 115) | hsl(225 21% 37%) | 35 / 26 / 0 / 55 | --muted-foreground | 7.38 | 2.38 |
| Field 800Cobalt field: hero, footer, admin rail | #0E1738 | rgb(14, 23, 56) | hsl(227 60% 14%) | 75 / 59 / 0 / 78 | --field | 17.52 | 1 |
| Field 900Dark page background | #060B1C | rgb(6, 11, 28) | hsl(226 65% 7%) | 79 / 61 / 0 / 89 | --background (dark) | 19.58 | 1.12 |
| Field InkText on the cobalt field | #EEF2FF | rgb(238, 242, 255) | hsl(226 100% 97%) | 7 / 5 / 0 / 0 | --field-foreground | 1.12 | 15.67 |
| Field MutedSecondary text on the cobalt field | #9AA8D6 | rgb(154, 168, 214) | hsl(226 42% 72%) | 28 / 21 / 0 / 16 | --field-muted | 2.35 | 7.47 |
| PaperPage and card background | #FFFFFF | rgb(255, 255, 255) | hsl(0 0% 100%) | 0 / 0 / 0 / 0 | --background | 1 | 17.52 |
| Paper AltAlternating section background | #F4F6FC | rgb(244, 246, 252) | hsl(225 57% 97%) | 3 / 2 / 0 / 1 | --muted | 1.08 | 16.22 |
| LineHairlines and dividers | #D5DBEE | rgb(213, 219, 238) | hsl(226 42% 88%) | 11 / 8 / 0 / 7 | --border | 1.38 | 12.68 |
| Verified GreenPositive and confirmed state | #0E7C55 | rgb(14, 124, 85) | hsl(159 80% 27%) | 89 / 0 / 31 / 51 | --success | 5.21 | 3.37 |
| Hold AmberWarning and held state | #B4600A | rgb(180, 96, 10) | hsl(30 89% 37%) | 0 / 47 / 94 / 29 | --warning | 4.55 | 3.85 |
| Refusal RedRefusal, danger and destructive state | #C21F32 | rgb(194, 31, 50) | hsl(353 72% 44%) | 0 / 84 / 74 / 24 | --destructive | 5.94 | 2.95 |
Accessibility
Approved pairs and their measured ratios
Body text pairs meet WCAG 2.1 AA at 4.5 to 1 or better. Pairs marked AA Large are for text at 24 px, or 19 px bold, and above, and for non text interface boundaries.
| Sample | Foreground | Background | Ratio | Grade | Use |
|---|---|---|---|---|---|
| Index | Ink 900 #0A0F24 | Paper #FFFFFF | 18.98 | AAA | Body text, light field |
| Index | Ink 500 #4B5573 | Paper #FFFFFF | 7.38 | AAA | Secondary text, light field |
| Index | Cobalt 700 #1039C4 | Paper #FFFFFF | 8.73 | AAA | Links and primary buttons |
| Index | Cobalt 700 #1039C4 | Cobalt 100 #E3EAFE | 7.26 | AAA | Active navigation item |
| Index | Paper #FFFFFF | Signal Orange 600 #D34000 | 4.66 | AA | Primary action button label |
| Index | Signal Orange 700 #B72000 | Signal 100 #FDE7DE | 5.48 | AA | Action badge text |
| Index | Field Ink #EEF2FF | Field 800 #0E1738 | 15.67 | AAA | Hero and footer text |
| Index | Field Muted #9AA8D6 | Field 800 #0E1738 | 7.47 | AAA | Hero secondary text |
| Index | Signal Orange 300 #FF7A45 | Field 800 #0E1738 | 6.78 | AA | Action on the cobalt field |
| Index | Cobalt 300 #6E93FF | Field 800 #0E1738 | 6.08 | AA | Links on the cobalt field |
| Index | Verified Green #0E7C55 | Paper #FFFFFF | 5.21 | AA | Positive state text |
| Index | Hold Amber #B4600A | Paper #FFFFFF | 4.55 | AA | Warning state text |
| Index | Refusal Red #C21F32 | Paper #FFFFFF | 5.94 | AA | Refusal state text |
| Index | Field Ink #EEF2FF | Field 900 #060B1C | 17.51 | AAA | Body text, dark field |
| Index | Field Muted #9AA8D6 | Field 900 #060B1C | 8.34 | AAA | Secondary text, dark field |
- Focus is always visible: a 2 px Cobalt 500 outline at 2 px offset, never removed.
- Colour never carries meaning alone. Every state also has a word.
- Interactive targets are at least 44 by 44 px on touch.
- Layouts hold at 200 percent text zoom without horizontal scrolling.
Typography
Archivo for everything read, JetBrains Mono for everything referenced
Display
60/62 px, weight 800, tracking -0.035em
Every record, indexed
Homepage hero only
H1
40/44 px, weight 800, tracking -0.03em
Directory operations
Page title
H2
30/36 px, weight 800, tracking -0.028em
Search the index
Section heading
H3
20/28 px, weight 700, tracking -0.015em
Result card
Card and panel heading
Body
16/26 px, weight 400, tracking 0
Structured data, governed and auditable.
Running text
Small
14/22 px, weight 400, tracking 0
Field roles are proposals until confirmed.
Supporting text, table cells
Micro
11/16 px, weight 600, tracking 0.2em
INDEX / 04821
Eyebrows, state chips, keys
Families
- Archivo
- Display and interface. Weights 400, 600, 700, 800 and 900. Grotesque proportions hold at heavy weights, which is what the hero needs.
- JetBrains Mono
- Keys, identifiers, hashes, states and every technical value.
- Wordmark
- Never rebuilt in a live typeface. Use the supplied vector files, which keep the Space Grotesk drawing of the approved mark.
Spacing, radius and elevation
- --radius
- 6 px. Base radius. Cards 12 px, pills full.
- Grid
- 4 px. Every spacing value is a multiple of four.
- Gutter
- 20 px mobile, 24 px desktop. Page padding.
- Measure
- 1152 px. Maximum content width.
- Rhythm
- 56 px mobile, 80 px tablet, 96 px desktop. Vertical section rhythm.
- Border
- 1 px hairline. 2 px only on focus and the active tab.
- --shadow-lift
- 0 12px 24px -16px cobalt 45%. Hover elevation on cards.
- --shadow-field
- 0 24px 60px -30px cobalt 55%. Panels lifted off the cobalt field.
Coordinate Lattice
A graticule that means something
The lattice reads as a map graticule and as a database index at the same time. It is construction, not decoration, and it only appears where the surface refers to records.
44 px module
22 px dense
Field with ticks
- The lattice is a 44 px square graticule drawn in the cobalt line colour at 12 percent on light fields and white at 8 percent on the cobalt field.
- The dense variant halves the module to 22 px and is reserved for compact panels.
- Registration ticks are 3 px Signal Orange dots on the module centre. They mark indexed points and are only used where the surface refers to records.
- The lattice always fades out toward the bottom of its container so it never competes with text.
- Never rotate, skew or perspective the lattice. Never place body text directly over ticks.
- The lattice is decorative and is always marked aria-hidden.
Iconography
- Line icons only, 1.5 px stroke on a 24 px grid, square terminals, 2 px corner radius.
- Icons inherit the text colour. Signal Orange is reserved for the single action icon in a view.
- Every icon in an interactive control is paired with a text label or an accessible name.
- Directory concepts use the geometric family: bracket, node, pin, index tick, lattice cell.
Illustration and data visuals
- Cobalt carries volume, Signal Orange carries the item under attention, and neutral grey carries context.
- Series order follows --chart-1 to --chart-5. Never introduce a colour outside the token set.
- Every chart states its source and its period. A chart without a governed source is not published.
- Empty is drawn as an empty lattice cell with a written explanation, never as a zero value.
Photography
- Photography is optional and secondary. The lattice, not imagery, carries the identity.
- When used, images sit inside a hairline frame with a 12 px radius and never behind text.
- No stock imagery of fictional customers, offices or handshakes.
- Any image standing in for a record must be labelled as a design demonstration.
Components
Controls, states and messages
Buttons
Only one Signal Orange action appears in a view. Everything else that acts is cobalt or a hairline secondary.
Inputs
Badges and state chips
Messages
Empty, unavailable and refused
Empty
No directory has been created yet. Import a file to describe your first structure.
Unavailable
This surface is not operational in the current phase. Nothing is hidden behind it.
Refused
The server did not resolve the capability required to read this. Ask the Platform Owner.
Interaction states
- Default
- Hairline border, flat surface, no shadow.
- Hover
- Border warms toward Signal Orange, surface lifts with --shadow-lift.
- Focus visible
- 2 px Cobalt 500 outline at 2 px offset. Never removed.
- Active
- Surface presses down one pixel. Action colour deepens to Signal Orange 700.
- Selected
- Cobalt 100 surface with Cobalt 700 text and a 2 px cobalt marker.
- Disabled
- 50 percent opacity, no shadow, pointer events removed.
- Loading
- Surface keeps its size, content replaced by a muted lattice shimmer. Never a layout jump.
- Error
- Refusal Red border and text with a written reason. Colour never carries the meaning alone.
- Success
- Verified Green border and text with a written confirmation.
Surfaces
The system on real screens
These are specimens. Any record shown is fictional and labelled as a design demonstration. Nothing here is published, counted, indexed or served through an API.
Homepage
JSON in, directory out
Every record, indexed and accountable.
Bring the export you already have. See the structure before anything is created.
Directory search and results
Design demonstration, illustrative data
Harlow, GB
Willow Lane Garden Centre
Leeds, GB
Northgate Studio Works
Cork, IE
Rivermouth Field Clinic
Platform Admin
Platform
Roles
Readiness
Activity
Platform overview
Platform role
owner
Effective capabilities
resolved server side
Feature flags enabled
none
Profile Studio
Profile Studio, scoped to one profile
Design demonstration, illustrative data
Willow Lane Garden Centre
A collaborator proposes a change. Publication stays with the workspace.
Mobile
Every record, indexed.
Inspect a fileResult card
Stacked, full width, 44 px targets.
Admin, mobile
Platform role
Resolved server side
Capabilities
Resolved server side
Feature flags
Resolved server side
Language
Approved descriptions and tone
- One line
- Turn your JSON data into a manageable directory.
- Short
- Bobby Directory turns an existing JSON export into a directory you can map, moderate, delegate and publish.
- Standard
- Bobby Directory turns an existing JSON export into a managed directory. It reads the structure of your file, proposes readable field names, and shows what a profile would look like before anything is created. Once a directory is running, the people who maintain a profile work in a separate studio with access limited to what they were granted.
Social biographies
- X, 160 characters
- Turn your JSON data into a manageable directory. Import, map, moderate, delegate and publish. Built for people, businesses, places and objects.
- LinkedIn, short
- Bobby Directory turns an existing JSON export into a managed directory with mapping, moderation, scoped access and controlled publication.
- Turn your JSON data into a manageable directory. Import. Map. Moderate. Publish.
- GitHub
- Directory platform. JSON in, managed directory out.
Do
- Write in plain language. Prefer the readable name over the technical key.
- Say what the product will not do as clearly as what it will.
- Describe state in words a profile owner understands.
- State a count only when it is measured. Otherwise describe the state in words.
Avoid
- Hype, superlatives and unverifiable claims.
- Invented record counts, category counts or audit percentages.
- Verification language. Bobby Directory has no governed verification model, so no surface may claim a record is verified.
- The em dash character. Use a comma, a full stop or a colon.
Assets
Downloads and inventory
Every asset is served from a stable first party address under bobbydirectory.com/images. No provider storage hostname is ever published. Pick the file that matches your field and size rather than resizing another one.
Beeldmerk, horizontal, stacked and wordmark.
Primary horizontal lockup
Default lockup for headers, documents and partner listings on a light field.
SVG
bobbydirectory.com/images/bobby-directory-logo-horizontal.svg
DownloadHorizontal lockup, dark field
Header lockup on dark surfaces.
SVG
bobbydirectory.com/images/bobby-directory-horizontal-mixed-color-dark.svg
Download
Horizontal lockup, one colour black
Single colour reproduction, stamping and fax quality output.
SVG
bobbydirectory.com/images/bobby-directory-logo-monochrome.svg
Download
Horizontal lockup, one colour white
Single colour reproduction on a dark or photographic field.
SVG
bobbydirectory.com/images/bobby-directory-horizontal-mixed-white.svg
Download
Horizontal lockup, grayscale
Grayscale documents and non colour printing.
SVG
bobbydirectory.com/images/bobby-directory-horizontal-mixed-grayscale.svg
Download
Stacked lockup
Narrow columns, covers and square placements.
SVG
bobbydirectory.com/images/bobby-directory-logo-stacked.svg
Download
Stacked lockup, dark field
Stacked lockup on dark surfaces.
SVG
bobbydirectory.com/images/bobby-directory-stacked-mixed-color-dark.svg
DownloadBeeldmerk, full
Standalone symbol at 48 px and larger.
SVG
bobbydirectory.com/images/bobby-directory-beeldmerk-color-light.svg
Download
Beeldmerk, full, dark field
Standalone symbol on dark surfaces.
SVG
bobbydirectory.com/images/bobby-directory-beeldmerk-color-dark.svg
DownloadBeeldmerk, simplified
Constrained sizes from 20 to 48 px.
SVG
bobbydirectory.com/images/bobby-directory-beeldmerk-simplified-color-light.svg
DownloadBeeldmerk, micro
Pixel snapped geometry for 16 px placements.
SVG
bobbydirectory.com/images/bobby-directory-beeldmerk-micro-color-light.svg
Download
Beeldmerk, one colour black
Single colour symbol.
SVG
bobbydirectory.com/images/bobby-directory-beeldmerk-black.svg
Download
Beeldmerk, one colour white
Single colour symbol on a dark field.
SVG
bobbydirectory.com/images/bobby-directory-beeldmerk-white.svg
Download
Wordmark, stacked
Wordmark without the symbol where the symbol already appears nearby.
SVG
bobbydirectory.com/images/bobby-directory-wordmark-mixed-color-light.svg
Download
Wordmark, inline
Single line wordmark for very wide, short placements.
SVG
bobbydirectory.com/images/bobby-directory-wordmark-inline-mixed-color-light.svg
Download
Uppercase alternate lockup
Documented alternate only. Never the primary logo.
SVG
bobbydirectory.com/images/bobby-directory-horizontal-upper-color-light.svg
DownloadDocuments and packages
The brand book, the asset index and the complete asset package, all served from the same stable first party addresses.
Managed brand publishing is not active
Misuse
What breaks the identity
- Do not recolour the mark outside the approved palette.
- Do not place the light field accent on a dark field. That pairing fails contrast.
- Do not stretch, rotate, outline or add effects to the logo.
- Do not rebuild the wordmark in another typeface.
- Do not use the uppercase alternate as the primary logo.
- Do not crowd the mark. Keep clear space of at least the height of the bracket.
- Do not tile the Coordinate Lattice behind body text or rotate it.
- Do not use Signal Orange as a background for long text or for more than one action per view.
- Do not introduce yellow. Yellow belongs to another product in the family.
Released versions
- 2.0.0, 2026-08-26. Cobalt Index adopted as the visual system. The mark is unchanged.
- 1.0.0, 2026-08-23. Bracket Index A2 mark approved, with the asset suite and asset index served as static downloads.
This list names the releases whose files are downloadable today. It is not an operational version history. There is no immutable history, no stored superseded version, no recovery of a withdrawn file, no approval or publication workflow and no rollback behind these addresses.