OBxOPs Design System

OBxOPs Design System

OuterBox Technical Operations · Internal Applications

Suite Brand Marks

Each OBxOps application has a unique mark built from the shared block-sprite vocabulary. Marks use 3–6 rounded squares arranged in a distinctive silhouette. All marks are authored as inline SVG for perfect scaling at any size.

ON DARK SURFACE
Command Center Compass · 24×24
TED Toolbox Staggered Cross · 24×24
Workspace Operator Cascade · 32×32
OBxChat Sparkle · 24×24
OBxHeartbeat Heart · 40×40
OBxLoop Infinity · 28×22
GROBx Growth Chart · 24×24
Design System Mosaic · 32×32
ON LIGHT SURFACE
Command Center Compass · 24×24
TED Toolbox Staggered Cross · 24×24
Workspace Operator Cascade · 32×32
OBxChat Sparkle · 24×24
OBxHeartbeat Heart · 40×40
OBxLoop Infinity · 28×22
GROBx Growth Chart · 24×24
Design System Mosaic · 32×32
SIZE SCALE — COMMAND CENTER
16px
24px
36px
48px
72px
128px
16px
24px
36px
48px
72px
128px
SIDEBAR LOCKUP
OBxOps
Command Center
OBxOps
TED Toolbox
OBxOps
Workspace Operator
OBxOps
OBxChat
OBxOps
OBxHeartbeat
OBxOps
OBxLoop
OBxOps
GROBx
OBxOps
Design System
SUB-BRANDS

Module-level marks for Command Center subsystems. These appear in navigation and module headers alongside the primary suite marks.

OBxNorthStar Diamond · 24×24
Ops Docs Book Stack · 24×24
TED Token Coin Knockout · 24×24
OBxNorthStar Diamond · 24×24
Ops Docs Book Stack · 24×24
TED Token Coin Knockout · 24×24
SVG MARKUP

Click to expand each mark and copy the SVG. Set width and height attributes to control rendered size.

<svg viewBox="0 0 24 24" fill="none"> <circle cx="12" cy="12" r="3.5" fill="#FFB703"/> <rect x="9.5" y="0.5" width="5" height="5" rx="1.2" transform="rotate(45 12 3)" fill="#0066DC"/> <rect x="18.5" y="9.5" width="5" height="5" rx="1.2" transform="rotate(45 21 12)" fill="#43A047"/> <rect x="9.5" y="18.5" width="5" height="5" rx="1.2" transform="rotate(45 12 21)" fill="#1D4E89"/> <rect x="0.5" y="9.5" width="5" height="5" rx="1.2" transform="rotate(45 3 12)" fill="#F29112"/> </svg>
<svg viewBox="0 0 24 24" fill="none"> <rect x="8.25" y="2.4" width="7.5" height="7.5" rx="1.5" transform="rotate(45 12 6.15)" fill="#FFB703"/> <rect x="2.4" y="8.25" width="7.5" height="7.5" rx="1.5" transform="rotate(45 6.15 12)" fill="#0066DC"/> <rect x="14.1" y="8.25" width="7.5" height="7.5" rx="1.5" transform="rotate(45 17.85 12)" fill="#1D4E89"/> <rect x="8.25" y="14.1" width="7.5" height="7.5" rx="1.5" transform="rotate(45 12 17.85)" fill="#2E7D32"/> </svg>
<svg viewBox="0 0 24 24" fill="none"> <rect x="1.5" y="1" width="5" height="4.5" rx="1" fill="#F29112"/> <rect x="1.5" y="7" width="5" height="4.5" rx="1" fill="#F29112"/> <rect x="1.5" y="13" width="5" height="4.5" rx="1" fill="#F29112"/> <rect x="1.5" y="19" width="5" height="4.5" rx="1" fill="#F29112"/> <rect x="8" y="5" width="6" height="5" rx="1.2" fill="#FFB703"/> <rect x="8" y="11.5" width="6" height="5" rx="1.2" fill="#FFB703"/> <rect x="8" y="18" width="6" height="5.5" rx="1.2" fill="#FFB703"/> <rect x="15.5" y="10" width="7" height="6" rx="1.2" fill="#1D4E89"/> <rect x="15.5" y="17.5" width="7" height="6" rx="1.2" fill="#1D4E89"/> </svg>
<svg viewBox="0 0 24 24" fill="none"> <defs><mask id="ted-token"> <rect width="24" height="24" fill="white"/> <g transform="translate(4.5, 4.5) scale(0.625)"> <rect x="9" y="0" width="6" height="6" rx="1.5" fill="black"/> <rect x="0" y="13.5" width="6" height="6" rx="1.5" fill="black"/> <rect x="9" y="9" width="6" height="6" rx="1.5" fill="black"/> <rect x="18" y="4.5" width="6" height="6" rx="1.5" fill="black"/> <rect x="9" y="18" width="6" height="6" rx="1.5" fill="black"/> </g> </mask></defs> <g mask="url(#ted-token)"> <circle cx="12" cy="12" r="11" fill="#FFB703"/> <circle cx="12" cy="12" r="9.5" fill="#FFB703" stroke="#E09E00" stroke-width="0.5"/> <circle cx="12" cy="12" r="8.5" fill="none" stroke="#FFC940" stroke-width="0.5" opacity="0.6"/> </g> </svg>
<svg viewBox="0 0 24 24" fill="none"> <rect x="9" y="0" width="6" height="6" rx="1.5" fill="#43A047"/> <rect x="0" y="13.5" width="6" height="6" rx="1.5" fill="#0066DC"/> <rect x="9" y="9" width="6" height="6" rx="1.5" fill="#FFB703"/> <rect x="18" y="4.5" width="6" height="6" rx="1.5" fill="#1D4E89"/> <rect x="9" y="18" width="6" height="6" rx="1.5" fill="#F29112"/> </svg>
<svg viewBox="0 0 32 32" fill="none"> <rect x="2" y="2" width="15" height="15" rx="3" fill="#FFB703"/> <rect x="18" y="11" width="10" height="10" rx="2" fill="#F29112"/> <rect x="11" y="21" width="8" height="8" rx="2" fill="#C75300"/> </svg>
<svg viewBox="0 0 24 24" fill="none"> <rect x="2" y="2" width="6" height="6" rx="1.8" fill="#1D4E89" transform="rotate(45 5 5)"/> <rect x="1.5" y="15.5" width="7" height="7" rx="2" fill="#F29112" transform="rotate(45 5 19)"/> <rect x="9.5" y="9.5" width="5" height="5" rx="1.5" fill="#FFB703" transform="rotate(45 12 12)"/> <rect x="15.5" y="1.5" width="7" height="7" rx="2" fill="#4AA17B" transform="rotate(45 19 5)"/> <rect x="16" y="16" width="6" height="6" rx="1.8" fill="#0066DC" transform="rotate(45 19 19)"/> </svg>
<svg viewBox="0 0 40 40" fill="none"> <rect x="4.5" y="6.5" width="15" height="15" rx="3" transform="rotate(45 12 14)" fill="#0066DC"/> <rect x="20.5" y="6.5" width="15" height="15" rx="3" transform="rotate(45 28 14)" fill="#D95F55"/> <rect x="12.5" y="18.5" width="15" height="15" rx="3" transform="rotate(45 20 26)" fill="#4AA17B"/> <rect x="25.5" y="11.5" width="5" height="5" rx="1.5" transform="rotate(45 28 14)" fill="#FFB703"/> </svg>
<svg viewBox="0 0 28 22" fill="none"> <rect x="3.25" y="2.25" width="7.5" height="7.5" rx="1.5" transform="rotate(30 7 6)" fill="#43A047"/> <rect x="3.25" y="12.25" width="7.5" height="7.5" rx="1.5" transform="rotate(-30 7 16)" fill="#F29112"/> <rect x="17.25" y="2.25" width="7.5" height="7.5" rx="1.5" transform="rotate(-30 21 6)" fill="#1D4E89"/> <rect x="17.25" y="12.25" width="7.5" height="7.5" rx="1.5" transform="rotate(30 21 16)" fill="#0066DC"/> <rect x="12" y="9" width="4" height="4" rx="1" transform="rotate(45 14 11)" fill="#FFB703"/> </svg>
<svg viewBox="0 0 32 32" fill="none"> <rect x="0" y="4" width="14" height="14" rx="2" fill="#FFB703"/> <rect x="16" y="8" width="10" height="10" rx="1.5" fill="#F29112"/> <rect x="0" y="21" width="8" height="8" rx="1" fill="#C75300"/> <rect x="10" y="20" width="10" height="10" rx="1.5" fill="#0066DC"/> <rect x="22" y="24" width="7" height="7" rx="1" fill="#1D4E89"/> </svg>

Color Palette

Core, accent, and neutral tokens. Accents should be ≤10% of any layout.

Dark Blue
OBx Blue
Deep Blue
Frost
Glacier
Orange
Gold
Sunset
Bright Blue
Slate
Success
Error

Typography

Roboto at every weight. Black (900) for headlines above 16pt.

Display XL
Display LG
Display MD
OVERLINE / LABEL — 0.65rem, bold, spaced
OVERLINE POLARIZED — 0.65rem, bold, spaced

Title Heading — 22px Black

Heading 1 — 18px Black

Heading 1 Polarized — 18px Black

Heading 2 — 14px Black

Heading 3 — 12px Black

Subtitle — 12px Regular, Orange

Body copy at 10pt with 1.15 line spacing. This is the standard paragraph style for all OuterBox branded content. Bold weight can be used for emphasis.

Small text — 9px regular

Caption text — 9px italic

Icons

Material Symbols Outlined — the approved icon set for all OBxOPs applications. Loaded via Google Fonts alongside Roboto.

Usage: <span class="material-symbols-outlined">icon_name</span>

DASHBOARD & ANALYTICS
dashboarddashboard
analyticsanalytics
bar_chartbar_chart
pie_chartpie_chart
trending_uptrending_up
trending_downtrending_down
insightsinsights
speedspeed
ACTIONS
searchsearch
addadd
editedit
deletedelete
savesave
downloaddownload
uploadupload
refreshrefresh
content_copycontent_copy
shareshare
printprint
open_in_newopen_in_new
STATUS & FEEDBACK
check_circlecheck_circle
cancelcancel
errorerror
warningwarning
infoinfo
pendingpending
scheduleschedule
task_alttask_alt
PEOPLE & TEAMS
personperson
groupgroup
engineeringengineering
support_agentsupport_agent
manage_accountsmanage_accounts
badgebadge
CONTENT & FILES
folderfolder
descriptiondescription
attach_fileattach_file
linklink
cloud_uploadcloud_upload
cloud_downloadcloud_download
inventory_2inventory_2
databasedatabase
COMMUNICATION
mailmail
chatchat
forumforum
campaigncampaign
sendsend
notificationsnotifications
NAVIGATION & UI
menumenu
homehome
settingssettings
helphelp
account_circleaccount_circle
logoutlogout
arrow_backarrow_back
arrow_forwardarrow_forward
expand_moreexpand_more
closeclose
filter_listfilter_list
sortsort

OBx Brand Icons

Custom OBx illustration set — 73 icons in three variants (2-color / dark / light) and 9 service-line tiles in five brand-token colors. Source: /api/icons manifest.

Click any tile to copy its URL to the clipboard. Drop a URL into Slack, Notion, OBxDocs, or hand it to Claude as image content (<img src="…">) — works for any consumer that can fetch a public URL.

Loading manifest…
ICONS
SERVICE-LINE TILES

One tile per service line. Five color variants (navy / slate / frost / sunset / gold) plus a gradient. Use these for service-line callouts, MRR breakdowns, or status pills tied to a specific delivery service.

FOR CLAUDE / OBxCHAT

Hand the full catalog to any AI assistant in one shot: 

Fetch https://ops.obxos.com/api/icons — that's the OBx brand icon manifest. Each entry has a slug + variant URLs. Pick the icon best matching what I'm asking for and embed the URL with <img src="...">.

Navigation

Primary nav bar with brand lockup. Optional utility nav sits above for secondary links. Both dark and light variants shown.

DARK NAVIGATION + UTILITY BAR
Help Center System Status n.ende@outerbox.com
LIGHT NAVIGATION + UTILITY BAR
Help Center System Status n.ende@outerbox.com

Buttons

Outline default, fill on hover. Ghost for tertiary actions. Toggle theme to see light variants.

Tabs

Gold underline on dark, blue on light. Content panels animate in on switch. Toggle theme to preview both.

Overview panel content. Each tab panel can contain any markup — cards, tables, charts, or forms.

Metrics panel content. Use tabs to organize related sections without page navigation.

Activity feed panel. Tabs support horizontal scrolling when there are many items.

Cards & Callouts

8px border, rounded corners. Cards auto-adapt to dark and light contexts — toggle theme to see both.

Standard Card

Frost border, white fill on light. White border, frost fill on dark. Headings auto-adapt.

Callout Box

Glacier background, no border. For supplementary information and side notes.

Elevated Card

Standard card with brand drop shadow (20% opacity, 30°, 5px dist, 10px blur).

Collapsible Content

Click to expand/collapse. Chevron rotates on open. Animates with max-height transition.

This section is open by default. Collapse panels can hold any content — forms, lists, nested cards, or plain text. Add the .open class to expand on load.

Collapsed by default. Click the trigger to reveal content with a smooth height animation.

Multiple collapsible sections can operate independently or be grouped to allow only one open at a time via JS.

Form Inputs

Gold focus ring on dark. Blue focus ring on light. Toggle theme to see both.

Badges & Progress

Category Tag Status
Step 3 of 5

Tooltip

Hover to reveal. Dark blue background with gold border accent.

Context

This tooltip appears on hover and provides additional context without cluttering the interface.

Accent Bar Panel

Featured Section

Panels with the gold gradient accent bar communicate importance and create visual hierarchy between sections of an interface.

Sprite Groupings

2-3 per group. No matching colors/sizes. Use sparingly near images and corners.

GROUP OF 3
GROUP OF 2
WARM SET
COOL SET

Animations

CSS utility classes. Click to replay.

fade-in
slide-up
scale-in