repo.box

Logo

repo.boxPrimary — dark background

repo.boxInverted — light background

Rules

The dot is always in accent color — it's the brand mark
Always lowercase: repo.box, never "Repo.Box" or "REPO.BOX"
Monospace font only (JetBrains Mono preferred)
Minimum clear space: 1× the height of the "r" on all sides
Do not add taglines, icons, or symbols to the logo

Colors

Core Palette

Text

Borders & Overlays

Gold Accent (Interactive / Emphasis)

Card Levels

Semantic

Typography

JetBrains Mono

Primary typeface for all UI and content. Monospace everywhere — reflecting the developer-first, code-native identity of repo.box.

H1 — 24px / 700repo.box — Git permissions for AI agents

H2 — 16px / 600repo.box — Git permissions for AI agents

Body — 13px / 500Every commit EVM-signed. Every push permission-checked.

Small — 12px / 4000xDbbAfc2a00175D0cDDFDF130EFc9FA0fb61d2048

Label — 10px / 600 / uppercaseRECENT ACTIVITY

Components

Cards

Card Title

Card content with subtle frosted background that separates from the page surface.

background: rgba(20, 40, 65, 0.6)
border: 1px solid rgba(60, 120, 180, 0.2)
border-radius: 8px
padding: 16px

Buttons & Pills

badge⬡ 401

Navigation Tab

Files 46Commits 401Users 4Config

Spacing & Layout

Page max-width1280px

Page padding24px 32px

Card padding16px

Card gap16px

Grid gap24px

Sidebar width280px

Border radius (cards)8px

Border radius (buttons)4–6px

Border radius (pills)10–20px

Iconography

SVG icons via lucide-react — clean, consistent 24×24 stroke icons. Tree-shakeable, 300+ icons available. Used at 16px / 1.5 stroke width throughout.

File Type Icons

Each file type maps to a specific lucide icon + language color. See components/explore/FileIcon.tsx for the full mapping.

●Directory

●Rust (.rs)

●TypeScript (.ts)

●JavaScript (.js)

●Solidity (.sol)

●Config (yml/toml)

●Shell (.sh)

●Lock file

●Markdown (.md)

●JSON

●HTML

●CSS

●Image

●Cargo.toml

Navigation Icons

Used in the mobile hamburger tray and UI elements.

◆home

◆explorer

◆docs

◆playground

◆brand

◆menu

◆close

◆git

Voice & Tone

✅ Do

Be technical and precise
Use developer language naturally
Keep copy short — let the product speak
"Every commit EVM-signed"
"Git permissions for AI agents"

❌ Don't

Use marketing buzzwords
"Revolutionary blockchain-powered solution"
Over-explain — our users are developers
Use title case in UI labels
Add unnecessary decorative elements

CSS Variables

/* Core theme — use these, not raw values */
--bp-bg:      #0a1628;
--bp-surface: #0d1f35;
--bp-border:  rgba(50, 100, 160, 0.25);
--bp-text:    #b8d4e3;
--bp-heading: #e8f4fd;
--bp-dim:     #7a9ab4;
--bp-accent:  #4fc3f7;
--bp-accent2: #81d4fa;
--bp-gold:    #f0b860;
--bp-gold-dim: rgba(240, 184, 96, 0.15);

/* Card levels */
--bp-card:               rgba(20, 40, 65, 0.6);
--bp-card-border:        rgba(60, 120, 180, 0.2);
--bp-card-elevated:      rgba(25, 50, 80, 0.7);
--bp-card-elevated-border: rgba(70, 140, 200, 0.25);

/* Font */
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

Brand Guidelines