Brand guidelines — 2026

social.plus
brand system

A complete design system for building consistent, premium, and accessible social.plus experiences — across every surface and every team.

02
Colours

Colour palette

Dark-first. Brand Black is the primary background. Ultramarine is the primary accent. The full palette brings energy, diversity, and creative possibility.

Brand Black
#111111
Ultramarine
#3B41EC
Blue
#3769EC
Sky Blue
#45A5ED
Electric Pink
#F568F0
Orange
#F66005
Yellow
#F7C506
Dark Navy
#27265E
Surfaces
Surface 0
#111111
Surface 1
#1e1e1e
Surface 2
#272727
Surface 3
#2e2e2e
Gradients
Brand Blue
#3769EC → #3B41EC → #45A5ED
Brand Pink
#F568F0 → #F66005 → #F7C506
03
Typography

Figtree

One typeface. Figtree is geometric, confident, and highly legible — from 12px captions to 72px hero headlines. Available free on Google Fonts.

Aa Bb Cc
Figtree — Google Fonts — Free
Light 300
Regular 400
Medium 500
SemiBold 600
Bold 700
ExtraBold 800
Black 900
H1
48px / 800
−0.03em
Limitless connection
H2
36px / 800
−0.025em
Build community into your product
H3
24px / 700
−0.02em
Real-time messaging at scale
H4
20px / 700
−0.01em
APIs built for speed and reliability
Body lg
18px / 400
1.75 lh
social.plus is the infrastructure layer for in-product community. We handle the hard parts so your team can focus on building great products.
Body
16px / 400
1.6 lh
Clean REST and realtime SDKs for iOS, Android, React, and more. Comprehensive docs, webhooks for every event, and a sandbox to test in before you go live.
Body sm
14px / 400
1.65 lh
Moderation tools, analytics, member roles, and workflows. Keep your community healthy without building it all from scratch.
Label
12px / 700
0.14em ls
The platform
Caption
12px / 500
© 2026 social.plus. All rights reserved.
04
Spacing

Spacing scale

8pt grid with 4pt increments below 16px. 12 tokens covering everything from tight icon gaps to major section separation.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
40px
--space-8
48px
--space-9
64px
--space-10
80px
--space-11
96px
--space-12
128px
05
Radius

Radius scale

Geometric, not bubbly. Structured at small sizes, softness introduced at larger components. Consistent within every repeated component set.

radius-1
4px — tags, badges
radius-2
8px — buttons, inputs
radius-3
12px — cards, dropdowns
radius-4
16px — large cards, modals
radius-5
24px — hero containers
radius-6
32px — large decorative
radius-full
9999px — pills, avatars
06 — Shadows & elevation

Depth system

Elevation uses two signals together: drop shadow and surface colour shift. Higher surfaces are both darker-shadowed and slightly lighter in background.

Elevation 1 — Raised
0 1px 4px rgba(0,0,0,0.5)
Cards, inputs · surface-1 (#1e1e1e)
Elevation 2 — Floating
0 4px 16px rgba(0,0,0,0.6)
Dropdowns, tooltips · surface-2
Elevation 3 — Overlay
0 8px 32px rgba(0,0,0,0.7)
Modals, drawers · surface-3
Elevation 4 — Sticky
0 16px 48px rgba(0,0,0,0.8)
Sticky nav, floating bars
Brand glows
Ultramarine
Blue
Sky
Pink
Orange
Yellow
Navy
07 — Layout & grid

Layout system

12-column desktop grid, 4-column mobile. Three container widths. Mobile-first breakpoints. Consistent horizontal padding at every viewport.

680px
Narrow
Articles, blog posts, reading content
1080px
Default
Standard sections — most layouts
1280px
Wide
Dashboards, data-heavy layouts
12-column desktop grid · 24px gutters · 48px page padding
sm
480px
md
768px
lg ★
1080px
xl
1280px
08
Buttons

Button system

Four variants, three sizes, five states. Primary uses the Brand Blue Gradient. Secondary is neutral greyscale. One primary button per section maximum.

Variants
Primary Large Medium Small
Secondary Large Medium Small
Ghost Large Medium Small
Destructive Large Medium Small
With icons
rocket_launch Start building menu_book Read the docs arrow_forward Learn more
States
Default Hover Focus Disabled
09
Form inputs

Input components

Surface-2 background, Ultramarine focus ring, consistent 44px height across all single-line inputs. Every state documented and accessible.

search
error Enter a valid email
Must include a number and symbol
10
Iconography

Material Symbols

Google Material Symbols Outlined. Default weight 400, outlined style. Filled variant for active/selected states only. Size matches context: 16–48px.

chatchat
dynamic_feeddynamic_feed
groupsgroups
rocket_launchrocket_launch
apiapi
codecode
notificationsnotifications
securitysecurity
analyticsanalytics
settingssettings
personperson
shieldshield
boltbolt
globeglobe
mailmail
searchsearch
addadd
closeclose
checkcheck
arrow_forwardarrow_forward
menu_bookmenu_book
favoritefavorite
shareshare
more_horizmore_horiz
chat
16px / XS
chat
20px / SM
chat
24px / MD
chat
32px / LG
chat
40px / XL
chat
48px / 2XL
chat
Filled / active
11
Imagery

Imagery style

Two modes: product illustrations for in-product contexts, photography for marketing. Never mixed in the same layout.

chat
Product illustration
3D object-based. Dark background. Ultramarine accent only. Greyscale supporting elements.
Photography
Dark · cool grade · authentic people
Photography
Dark, high-contrast. Cool colour grade. Real people in authentic collaboration. No stock clichés.
Decorative backgrounds
Brand gradient abstracts or dark texture. Atmosphere only — never competes with content.
12
Accessibility

WCAG 2.1 AA

Accessibility is built into every component decision. All text meets minimum contrast, every interactive element is keyboard accessible, focus states are always visible.

Contrast ratios
#FFFFFF on #11111119.5:1 AAA
#C0C0C2 on #1111117.1:1 AAA
#808080 on #1111113.95:1 AA
#FFFFFF on #3B41EC4.8:1 AA
#FFFFFF on #1e1e1e15.3:1 AAA
Focus ring
Focused button Focused secondary
outline: 2px solid #3B41EC;
outline-offset: 3px;
:focus-visible only
13
Copy

Voice & microcopy

Direct, confident, human. Say what something does. Skip the preamble. Never blame the user.

Context❌ Avoid✅ Use instead
Error messageInvalid inputEnter a valid email address
Error messageError 403You don't have permission to do this
Button CTASubmitCreate account
Button CTAClick hereStart building free
Empty stateNo resultsNo members yet — invite your team to get started
LoadingPlease wait…Loading members…
Sentence case
Start building free
Buttons, labels, headings (h2+)
Title case
Community Settings
Page titles, nav items
All caps
ENTERPRISE
Badges, tags at ≤12px only