---
title: Cellect visual identity
version: 1.0
updated: 2026-09-20
canonical: https://www.cellect.ai/brand
tokens: https://www.cellect.ai/assets/brand/cellect/brand.json
---

# Cellect visual identity

Use this specification when producing Cellect interfaces, presentations, documents, motion, or marketing artwork.

## Logo hierarchy

1. Use the outlined Cellect wordmark as the primary company logo.
2. The three logo expressions are Cellect, Cellect Fi, and Cellect with Fund Build Book beneath it.
3. Keep Fi as the superscript in the master product lockup.
4. Keep Fund Build Book together as the brand line beneath Cellect, without the Fi superscript.
5. Use the approved mark-and-word lockups only when the circular mark is needed.
6. Never retype, redraw, stretch, crop, rotate, or decorate a logo asset.

## Typography

- IBM Plex Sans 400, 500, and 600: headings and body copy.
- IBM Plex Mono 400, 500, and 600: wordmark geometry, product and brand lines, labels, and data.

### Logotype specification

The logotype is IBM Plex Mono 600, lower case, set on the face's own monospace advance. Every
letter stands on its 0.600em cell with the font's sidebearings untouched.

- Face and weight: IBM Plex Mono 600 SemiBold, lower case.
- Advance: 0.600em per character; 4.200em set width over seven characters.
- Tracking: 0 at every size.
- Kerning: none. Do not kern the logotype; a monospaced face carries no pairs to apply.
- Ink: 0.067em to 4.129em, 4.062em wide.
- Vertical: ascender 0.740em, x-height 0.516em with 0.012em overshoot on c and e, stem 0.128em.
- Resulting ink gaps, for reference only: ce 0.120em, el 0.127em, ll 0.143em, le 0.126em, ec 0.122em, ct 0.106em.
- Brand line: FUND BUILD BOOK in Plex Mono 600 caps, tracking +0.097em.
- Product lockups: spacing in whole or half 0.600em cells; hairlines 0.052em, half the ring stroke.
- Delivery: outlines. Never retype the logotype.

## Mark

- Use one ink across the entire mark.
- Approved grounds are Paper or Ink. Reverse the whole mark; never recolor individual parts.
- Preserve the mark's aspect ratio and complete outer ring.
- Use the supplied small-size cut at 20px and below.

## Motion

- The outer ring remains fixed during state animation.
- State changes happen through the visor and the two internal divisions.
- Idle, listening, thinking, and speaking must differ by what moves, not by speed alone.
- Use calm timing without bounce or overshoot.
- Motion must honor prefers-reduced-motion.
- Do not turn the mark into a progress bar, loading indicator, or accumulating sequence.

## Illustrations

Set-out is the lead conceptual motion for coordination: use its canonical component beside relevant copy, as on /proto/p57#p57-on-one-set-of-numbers. Copy leads on mobile. Keep the complete drawing visible. Its four-second loop assembles for 1.5s, holds for 1s, and returns for 1.5s. Structural strokes are 2 units; detail 1; active connection 2.5. Accent belongs to the shared datum and aligned junctions. Joint and Reveal remain studies.

Approved: Set-out (m1), Intake (g3a), Cost curve (g3c), Three parties (g3e), and Set-back (k1).

All five use a four-second rhythm: assemble 1.5s, hold 1s, return 1.5s. In Intake, keep the offset source stack visible and let pages peel into the books; avoid transfer lanes. Match Cost curve’s legend to its strokes and dash, label forecast explicitly, and avoid unexplained cursor-like marks. In Three parties, draw one BOOKS register with three reading positions and one continuous accent datum. Set-back starts with the site already drawn; stakes and strings carry the motion without a callout. Do not animate every detail or lose the idea in the settled frame. Keep necessary labels in clear paper space, away from curves and footprint edges.

- Explain a process, relationship, or change. Keep Set-back for meaningful development context.
- Use Paper, Ink, and one purposeful Accent; Plex Mono labels and Plex Sans headings.
- Draw, hold, and loop calmly. Provide pause, replay, and a meaningful reduced-motion still.
- Fit the complete drawing on mobile and keep labels legible.
- Avoid tangled wireframes, literal buildings as filler, decorative motion, and invented financial claims.
- Site plan (g3b), Building section (g3d), and other exploratory studies are not approved.
- [Illustration source](/assets/brand/cellect/illustrations.tar.gz) · [Usage manifest](/assets/brand/cellect/illustrations.json).

## Interactions

- Transition from the mark to idle by thinning the outer ring, visor, and divisions.
- Keep the geometry centered and continuously visible. Do not wipe, fade, or move it.
- The bot settles into an approved idle, listening, thinking, or speaking state.

## Color

| Token | Hex | Use |
| --- | --- | --- |
| Paper | #ECEAE3 | Primary light ground and reversed mark |
| Ink | #14161A | Primary text and mark |
| Accent | #BB4D36 | Sparing emphasis; never split the mark into accent colors |

## Page conventions

- **Rail:** Connect a long narrative with one thin rail. Align section starts and content. Avoid competing rails, decorative branches or sticky behavior that obstructs reading.
- **Headers:** Left-align short section names; a tick is optional. Avoid numbering ordinary web sections, repeating labels or showing progress markers that do not track the visible section.
- **Scale:** Give the main idea scale and keep supporting text readable. Avoid oversizing every statement or shrinking the body to fit more copy.
- **Pacing:** Keep one main thought and its evidence together. Align comparable blocks; let content determine section height. Avoid repeated explanations, decorative staggering, stranded metrics or empty bands beneath short content.
- **Scrolling:** Use sticky section orientation and gentle section snapping. Land at the section boundary without a cropped fragment of the previous section. Show a down arrow on the opening screen. Avoid hidden scroll affordances, trapped scrolling or fixed-height sections that cut off content.
- **Keyboard:** Keep Arrow keys, Space, Page Up/Down and Home/End native. Offer Alt + ↑/↓ to move and focus between sections; preserve control keys and reduced motion. Avoid hijacking reading keys, skipping long-section content, moving without focus or trapping Tab.
- **First screen:** Fit the complete hero—navigation, headline, supporting copy, action and scroll cue—inside the opening viewport. Size by height as well as width; test short laptops and phone landscape. Avoid width-only hero type, clipped final lines or a call to action below the fold. Allow natural scrolling for enlarged text and unusually constrained windows rather than hiding content.
- **Hierarchy:** Keep the title larger than section headings. Let specimens lead and keep specifications nearby. Avoid chapter titles competing with the cover or tiny samples in oversized panels.
- **Mobile:** Put the heading and context before long figures in both mobile layout and source order. Recompose diagrams, keep text legible and touch targets at least 44px. Avoid scaled-down desktop diagrams, delayed explanations, oversized hero gaps or sticky headers covering content.
- **Chips:** Use chips for filters, selections or meaningful status. Avoid decorative pills around capabilities, slogans or sentences.
- **Blocks:** Group distinct features, choices or outputs in simple blocks. Avoid a card around every paragraph or the same card grid throughout.
- **Lines:** Use thin borders to clarify relationships and boundaries. Avoid dividing every paragraph or adding lines for texture.
- **Figures:** Give each figure a distinct purpose. Pair verified outcomes with supporting product evidence. Avoid repeated prose in diagram form, unsupported outcomes or internal counts that do not help the reader.
- **Screenshots:** Crop to the task with readable content and sensible margins. Avoid clipped text, tiny dashboards or copy that repeats the screenshot.
- **Motion:** Animate a meaningful process: assemble, check, approve, return. Use stable framing and hold the completed state long enough to read. Avoid busy ambient effects, arbitrary morphs or motion that restarts before the outcome can be understood.
- **Copy:** Use short, self-sufficient headings. Every section adds a new fact or advances the story. Avoid repeated captions, filler taglines or agents in every sentence.
- **Presence:** Use the wordmark confidently. Give the mark a purpose. Avoid automatically adding the mark to every logo, hero or screen.

## Motion by context

- Brand specimens loop calmly and honor reduced motion.
- Explainers provide play, pause and restart controls; hide presentation chrome in fullscreen.
- Page reveals follow reading order without hiding essential content. Use gentle section snapping with sticky orientation for narrative pages. Keep long sections freely scrollable and disable smooth motion for reduced-motion users.
- Keep mobile content in a clear single reading order; simplify the rail and let sections grow to fit.

## Working specimens

- Data tables: IBM Plex Mono for figures, right-aligned amounts, clear totals and units; no decorative status chips.
- Expanded menus: readable choices, a visible selection and keyboard-operable controls.
- Use verified product captures as evidence; label invented demonstration data as illustrative.

## Motion references — approval scope

- /proto/p37: animation explicitly liked on September 8, 2026; replace the invoice subject with a draw package. Preserve causal progression and the readable completed state.
- /proto/p41 and /proto/p45: called the most promising on September 8; requested follow-ups with selective animation. p45 carries the package-out / lender-query / return sequence.
- /proto/p46–p50: requested follow-up explorations, not individually approved motion standards.
- These references establish motion ideas only. Keep the current Plex typography, Paper/Ink/Accent palette, accessible controls and reduced-motion behavior.

## References — borrow selectively

- p57: current identity, hero scale and continuous rail. Not its tiny labels, long gaps, repeated copy or older product naming.
- p6: spacing, thin borders and section composition.
- p7: boxes flowing down a rail; not the coupon treatment.
- p9: figure presentation.
- p10: a continuous line organizing substantial information.
- p1, p41 and p45: boldness and changes in scale, without oversized supporting statements.
- These are visual references, not approved copy, product taxonomy or alternate font palettes. Use the current brand assets and current product architecture.

## Before publishing

- Judge rendered scroll sequences separately from token and behavior compliance. Check: Capture desktop and phone viewport slices; inspect gaps, paired columns, case-study evidence and the close before scoring.
- Put context before long figures in visual and source order. Check: At phone width the section heading appears before the diagram; text remains legible without sideways scrolling.
- Align comparable blocks, compose metrics with their story and size the close to its content. Check: Review complete viewports; no stranded evidence, unexplained progress boxes or persistent prototype controls.
- Budget the complete first screen against the available viewport height. Check: At 1366×768, 1440×900, 1920×1080 and phone portrait/landscape, the whole headline, CTA and down arrow are visible; enlarged text remains reachable without clipping.
- Preserve native reading keys and provide optional focused section shortcuts. Check: Alt + Up/Down moves between sections; Tab reaches content; controls retain their keys; long sections stay readable and reduced motion is instant.
- Preserve essential metadata at every breakpoint and separate labels from their evidence. Check: Download format is visible on mobile; labels and linked amounts have distinct lines.
- Demonstrate the rule with real product captures and explicitly labeled sample records. Check: Linked amounts match source references; cropped captures remain inspectable at full size.
- Provide pause, replay and a static reduced-motion specimen. Check: Pause freezes the specimen, replay restarts it and reduced motion never animates.
- Name downloads by composition: wordmark, mark + wordmark, product and size. Check: A reader can select the correct asset without opening several files.
- Title > section > specimen label; the actual specimen may be large. Check: Compare computed sizes and a screenshot with adjacent heading levels.
- Specimen scale must survive the CSS cascade; spacing follows the content. Check: Inspect rendered Sans and Mono samples, not only stylesheet values.
- Use a quiet desktop index with current location; a full-screen mobile contents panel. Check: Open, select, close and keyboard-navigate on desktop and narrow screens.
- Frame the object only where meaningful; pair comparisons with a shared row rule. Check: Remove borders that do not express a relationship.
- Provide an opening down arrow, sticky orientation and gentle section snapping. Check: Arrow works; long sections remain reachable; sticky headers never cover anchored content.
- One main thought plus useful evidence at a time; concise copy without dead space. Check: Review whole viewports, not isolated components.
- Verify 375, 390 and 430px widths, landscape and reduced motion. Check: No page overflow, clipped text, inaccessible links or touch targets below 44px.
## Complete page specimen

- [Responsive page composition](https://www.cellect.ai/brand/example): a complete page with a rail, sticky orientation, opening scroll cue, evidence and linked source. Demonstration data is explicitly labeled.
- [Design review checklist](https://www.cellect.ai/assets/brand/cellect/review-checklist.json): recurring issues, rules and verification steps.

## Approved assets

- [Mark](https://www.cellect.ai/assets/brand/cellect/cellect-mark.svg)
- [Mark reversed](https://www.cellect.ai/assets/brand/cellect/cellect-mark-paper.svg)
- [Wordmark](https://www.cellect.ai/assets/brand/cellect/cellect-wordmark.svg)
- [Cellect Fi wordmark](https://www.cellect.ai/assets/brand/cellect/cellect-fi-wordmark.svg)
- [Cellect Fund Build Book wordmark](https://www.cellect.ai/assets/brand/cellect/cellect-fund-build-book-wordmark.svg)
- [Mark + wordmark](https://www.cellect.ai/assets/brand/cellect/cellect-lockup.svg)
- [Mark + wordmark · Fi](https://www.cellect.ai/assets/brand/cellect/cellect-fi.svg)
- [Mark + wordmark · Fi · small](https://www.cellect.ai/assets/brand/cellect/cellect-fi-small.svg)
- [Mark + wordmark · Fund Build Book](https://www.cellect.ai/assets/brand/cellect/cellect-fund-build-book.svg)
- [App icon set](https://www.cellect.ai/assets/brand/cellect/cellect-app-icons.tar.gz)
- [Product explainer](https://www.cellect.ai/products/fi/explainer)
- [Structured tokens and asset manifest](https://www.cellect.ai/assets/brand/cellect/brand.json)
- [Complete asset archive](https://www.cellect.ai/assets/brand/cellect/cellect-brand-assets.tar.gz)