Indexing Co Brandbook
Brand guidelines for colors, typography, voice, and UI components. v2.0 — March 2026
Brandbook
Indexing Co brand guidelines. Colors, typography, voice, and components.
Wordmark (New)
Primary horizontal mark. Use on solid backgrounds. Maintain clear space equal to the height of the "x" in the wordmark on all sides. Minimum size: 76px (digital), 27mm (print).
Wordmark Vertical
Stacked variant for square or tall layouts. Same clear space rules apply.
Square Logo
Compact mark for square contexts (favicons, app icons, social avatars).
Dex Mascot
Geometric pixel rabbit. Full 3D version, pixel 2-bit variants, retro hand-drawn, and emoji (128x128 PNG for Slack/Discord).
Usage Rules
- Use on solid backgrounds (white or black)
- Maintain clear space around the mark
- Use provided SVG files at correct aspect ratio
- Scale proportionally
- Distort, stretch, or skew the mark
- Place on busy or patterned backgrounds
- Modify letterforms or spacing
- Add effects (shadows, glows, outlines)
- Recreate in a different typeface
Primary Colors
Green: accent on dark backgrounds only. Pink: secondary accent for visualizations. Black and white dominate primary content.
Gray Scale
Card borders: Gray-5. Dividers: Gray-4. Lightest (Gray-6) to darkest (Gray-2) in light mode, reverses in dark.
Accessibility
| Foreground | Background | Ratio | WCAG AA |
|---|---|---|---|
#000000 | #FFFFFF | 21:1 | Pass |
#FFFFFF | #000000 | 21:1 | Pass |
#4AF120 | #000000 | ~13.9:1 | Pass |
#4AF120 | #FFFFFF | ~1.5:1 | Fail |
Type Stack
Primary: Inter. Code: Fira Code 500.
Type Scale
| Style | Size | Weight | Line-height | Notes |
|---|---|---|---|---|
| Jumbo | 60/36px | 300 | 110% | Hero statements |
| Display | 48/30px | 400 | 110% | Section titles |
| Headline | 28/22px | 500 | 120% | Page titles, cards |
| Subhead | 24/20px | 400 | 130% | Section subtitles |
| Body Large | 18px | 400 | 140% | |
| Body Base | 16px | 400 | 150% | |
| Caption | 14px | 400 | 140% | |
| Label | 16px | 500 | 100% | |
| Link | 16px | 400 | 100% | Always underlined |
| Code | 16px | 500 | 110% | Fira Code |
Weight Mapping
| Weight | Name | Usage |
|---|---|---|
| 300 | Light | Jumbo headings only |
| 400 | Regular | Default: display, subhead, body, caption, link |
| 500 | Medium | Headline, bold variants, labels, code |
| 600 | Semi Bold | Label Bold only |
Indexing Co writing operates at the intersection of technical explanation and commercial persuasion. Every sentence earns its place by explaining how something works or pushing the reader toward action. The voice carries authority without formality: direct, technically precise, momentum-focused, no hype.
Core Principles
Lead with capability, not feature.
Open with what the reader can now do, not what the product contains.
Follow every claim with mechanism or evidence.
Assertion, then proof. Never let a claim float unsupported.
Compress time as the value metric.
"Collapses the time between 'we need this data' and 'data is flowing'" beats "makes it faster."
Name friction points directly.
Don't euphemize problems. Technical audiences respect honest diagnosis.
Position against incomplete solutions.
Acknowledge existing approaches, then highlight their blind spots.
Embed authority in observation.
Report patterns. Authority comes from clarity of analysis, not self-description.
Vocabulary
- writes, deploys, tracks, reshapes, compresses, ships
- production-grade, raw block data, structured output
- technical terms in operational context
"collapses the time between X and Y"
"No config files. No deployment platforms."
- enables, empowers, facilitates
- revolutionary, next-generation, cutting-edge
- game-changer, innovative solution
- jargon without workflow role
- vague intensifiers: really, very, quite, fairly
Sentence Style
Default to short: one idea per sentence. Subject, verb, object. Extend only for enumeration using colons or parallel structure. Fragments are deliberate. Front-load subject and verb so the actor stays visible.
Platform Guide
- Open with
- Contrarian hook or counterintuitive claim
- Body
- Compressed argument, short paragraphs
- Close with
- Planning question that prompts discussion
- Reader
- Scanning for insight they don't already have
Website
- Open with
- Capability statement
- Body
- Procedural walkthrough, step-by-step detail
- Close with
- Numbered steps and concrete next action
- Reader
- Arrived with intent, seeking implementation detail
Anti-Patterns
- Hedging: "can help you write" vs "writes"
- Buried leads: context before the point
- Rhetorical questions that are statements
- Passive voice that hides agency
- Explaining basics to a technical audience
- Ending on hype: "Don't miss out"
Buttons
| Variant | Padding | Font-size | Notes |
|---|---|---|---|
| Large | 16px 32px | 16px | Primary CTA |
| Medium | 12px 20px | 16px | |
| Small | 8px 16px | 14px | |
| Outlined | 12px 20px | 16px | Border matches text |
All buttons: pill shape (border-radius: 100px), opacity 0.8 on hover, 0.2s ease transition.
Cards
Starter
For teams getting started with onchain data.
$0 /month
- ✓ 10,000 free credits
- ✓ Shared infrastructure
- ✓ Community support
Add-on: Custom Transforms
Write custom JavaScript transformation functions for your pipelines.
| Type | Padding | Border | Radius | Background |
|---|---|---|---|---|
| Pricing | 24px | 1px solid Gray-5 | 8px | Primary |
| Add-on | 24px | none | 8px | Secondary |
| Case study | 24px | 1px solid Gray-5 | 8px | Primary |
Spacing
| Token | Value | Usage |
|---|---|---|
| Section gap | 64px | Between section title and content |
| Card padding | 24px | Pricing, add-on cards |
| Card gap | 16px | Grid gap between cards |
| Card radius | 8px / 4px | Default 8px, use-case 4px |
Responsive Breakpoints
| Breakpoint | Rule | Behavior |
|---|---|---|
| Mobile | ≤768px | Single-column, reduced font sizes |
| Tablet | ≥769px | 2-column pricing grid |
| Desktop | ≥1200px | 4-column add-ons, full carousel |
Left-bordered cards with a green hover accent. Used for feature lists, voice principles, value propositions, or any content pairing a title with a short description.
Lead with capability
State exactly what the system does. Omit marketing wrappers.
Follow claims with evidence
If we claim speed, we provide the benchmark. Never orphaned assertions.
Compress time as value
Time is the ultimate metric. Frame benefits around time saved.
Name friction directly
Identify pain points. Don't use euphemisms for broken systems.
Position against incomplete solutions
Acknowledge existing approaches, highlight blind spots.
Embed authority in observation
Report patterns. Show the work.
Spec
| Property | Value |
|---|---|
| Border left | 2px solid rgba(255,255,255,0.1) |
| Hover border | #4AF120 |
| Padding left | 16px |
| Transition | border-color 0.3s ease |
Panel cards with icon header and monospace list items. Do variant highlights in green. Avoid uses gray with strikethrough. Info for neutral informational lists.
- writes
- deploys
- tracks
- ships
"collapses the time between X and Y"
- enables
- empowers
- revolutionary
- game-changer
- really / very / quite
- Supported: Ethereum, Polygon, Base, Arbitrum
- Output: Postgres, webhooks, Kafka
- Backfill: full from genesis block
Spec
| Property | Value |
|---|---|
| Background | rgba(255,255,255,0.03) |
| Border | 1px solid rgba(255,255,255,0.1) |
| Radius | 12px |
| List font | Fira Code, 14px |
| Avoid variant | line-through, muted color |
Split-layout card with a top accent bar and a code/content preview panel with window chrome dots.
Stop maintaining custom RPC nodes just to read state.
RPCs are for broadcasting transactions, not querying historical data at scale.
Deploy a dedicated indexer in 45 seconds. Query with GraphQL immediately.
Real-time state synchronization
Indexing Co writes directly to your Postgres. We process raw block data and decode ABI events automatically.
Spec
| Property | Value |
|---|---|
| Top accent bar | 2px, changes color on hover |
| Layout | 1/3 meta + 2/3 preview |
| Preview font | Fira Code (mono), 14px |
| Window dots | 3x circles, top-right |
| Highlight colors | white + #4AF120 |
Pill-shaped segmented control. Active indicator slides between options. Green variant for primary actions, white for neutral selection.
GREEN ACTIVE (MONTHLY)
FOREGROUND ACTIVE (ANNUALLY)
Spec
| Property | Value |
|---|---|
| Container | bg: muted, radius: 100px, padding: 6px |
| Green variant | bg: #4AF120, text: black, weight: 600 |
| Neutral variant | bg: white, text: black |
| Transition | transform 0.3s ease |
VS cards for compare pages. Dark panel background, monospace pill tags, two-column legacy/direct split. Direct column border transitions to green on hover.
Requires proprietary languages, complex DevOps for self-hosting, and tolerates significant network sync delays.
TypeScript pipelines written directly to your database. Zero middleware, instant sync, native developer experience.
Spec
| Property | Value |
|---|---|
| Background | #0A0A0A |
| Border | 1px solid #1A1A1A → #8E8E93 hover |
| Tags | Fira Code 12px, pill, #000 bg |
| Direct border-left | → #4AF120 on hover (0.5s) |
| Card padding | 40px |
Stat cards for social proof. Black background, left accent bar (dark → white on hover), monospace headline number, bold label, gray description, code tag.
Average block-to-storage latency across 100+ chains. No polling intervals, no middleware hops.
measured across ETH / BSC / PolygonData lands in your own database, your own schema. Query with SQL, your ORM, or any standard tooling.
direct database deliverySingle integration. No separate subgraph per chain, no chain-specific SDKs.
no per-chain contractsSpec
| Property | Value |
|---|---|
| Left accent | 2px, #1A1A1A → #FFF on hover |
| Number | Fira Code 28px / 400 |
| Label | 16px / 600 |
| Code tag | Fira Code 12px, #0A0A0A bg |
| Grid | 3-col desktop, 1-col mobile, gap 40px |
Redesigned front page of indexing.co using the brandbook's design system.
Stop reinventing the wheel.
We build enterprise-grade infrastructure so you don't have to.
Read, transform, and use onchain data. Sub-second latency, tailored configurations, delivered direct to you.
WORKING WITH THE INDUSTRY'S BEST
Source Anywhere
Access data from any chain in real-time.
Transform Everywhere
Add your business logic. Infrastructure handles the rest.
Deliver Just-In-Time
Pipelines integrate directly to your storage. No middlemen.
Supported Networks
100+Processed Daily
1.6 TBAvg Block-to-Storage
2.54s