UseORG.com

Brand & style guide

The marks, glyphs and colours that make up UseORG.com — and the components that ship them, so every surface stays consistent.

← Back to useorg.com

The mark

Logo

A 2×2 of rounded tiles — “a suite of apps, one platform.” Use the colour mark on light surfaces and the mono mark on dark or accent backgrounds. Clear space ≈ one tile on every side.

UseORG.com
Colour · on light · 16–48px
UseORG.com
Mono · on dark · tone="mono"

Apps & add-ons

App glyphs

Each app and platform add-on has a glyph on its accent colour, via <x-app-icon slug>. Drop it inside any coloured tile; it inherits white from the tile.

CRM
crm · #2563eb
Tasks
tasks · #7c3aed
Docs
docs · #06b6d4
HRM
hrm · #0d9488
Help Desk
helpdesk · #e11d48
Assets
assets · #475569
Invoicing
invoicing · #db2777
Forms
forms · #16a34a
Goals
goals · #4f46e5
Booking
booking · #ea580c
Automation
automation · #f59e0b
AI Assistant
ai · #8b5cf6
Analytics
bi · #0ea5e9

Colour

Palette

Blue is the spine. The mark is built from accent deep / mid / light; the app glyphs carry their own accents (above).

Accent
#2563eb
Accent deep
#1d4ed8
Accent mid
#3b82f6
Accent light
#93c5fd
Ink
#111827
Dim
#6b7280

Assets

Favicon & share image

Shipped in /public and wired via <x-favicon> / <x-social>.

faviconfavicon.svg
apple touch iconapple-touch-icon.png
white logologo-white.svg
OpenGraph share cardog-image.png · 1200×630

For builders

Components

Reuse these Blade components — don’t hand-roll brand markup.

<x-logo :size tone>Brand mark. tone="mono" for dark/accent surfaces.
<x-app-icon slug :size>Per-app glyph (white, via currentColor) for inside a coloured tile.
<x-favicon>favicon / touch-icon <link> tags — one line in any <head>.
<x-social :title :description :image>OpenGraph + Twitter card meta for shareable pages.