Imagery v1.0

brand.3cosystem.net/imagery

Visual language of the 3cosystem

Imagery reinforces brand personality — amplifying the dark, focused energy of 3cosystem without overwhelming the interface. Every visual element is purposeful, on-theme, and earns its place.

Dark-firstAbstract over literalPurposefulCommunity-driven

Art Direction

Visual philosophy

A consistent visual philosophy ensures that all imagery — whether generated, photographed, or illustrated — feels unmistakably 3cosystem.

◐

Dark-first

All imagery is designed for dark backgrounds. Light-mode crops, bright stock photos, and white-field illustrations are never acceptable in the 3cosystem context.

◈

Minimal, purposeful

Every visual element earns its place. Decorative imagery used without purpose adds noise. If a visual doesn't clarify, inspire, or anchor — remove it.

◉

Human-centered

When showing people, capture real community moments — events, collaboration, learning. Never use staged stock photography with artificial expressions.

⬡

Abstract over literal

Prefer geometric and abstract visuals over literal illustrations. Concepts like 'networking' are better shown as node graphs, not handshakes.

◎

Surface-tinted

Imagery can be tinted with the active surface's primary color at 5–12% opacity. This ties visuals to the product context they appear in.

Gradient System

Gradients in the 3cosystem

Gradients are used sparingly and intentionally — always tied to a surface palette or the brand's M3SH sunset signature.

M3SH Sunset Gradient

The signature brand gradient — warm amber–terracotta spectrum

Signature

background: linear-gradient(
  135deg,
  #E8654A 0%,
  #F4904A 40%,
  #F7B85A 80%,
  #FAD080 100%
);

Surface glow radial gradients

R3SETradial, 5–12% opacity

M3ETradial, 5–12% opacity

SP3AKradial, 5–12% opacity

M3SHradial, 5–12% opacity

SUCC3SSradial, 5–12% opacity

N3TWORKradial, 5–12% opacity

Gradient rules

✓

M3SH sunset

Hero sections, brand moments

✓

Surface radial glow

Hero BG, loading states

✓

Mesh hex pattern

Background texture, 3–6% opacity

Rainbow gradients

Never

Neon gradients

Never

5+ color stop gradients

Never

Pattern Backgrounds

Hexagon grid system

The hexagon is 3cosystem's primary structural symbol. As a background pattern, it adds texture without noise — visible at 3–6% opacity.

Live pattern — animated meshPulseSVG hex grid · 5% opacity · 6s pulse cycle

/* Hexagon pattern background usage */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hex-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.05;        /* 3–6% range */
  animation: meshPulse 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes meshPulse {
  0%, 100% { opacity: 0.05; transform: scale(1); }
  50%       { opacity: 0.09; transform: scale(1.03); }
}

Surface-tinted pattern variants

R3SET

M3ET

SP3AK

M3SH

SUCC3SS

N3TWORK

Usage contexts

Hero sectionsLogin / auth pagesEmpty statesModal backgroundsOnboarding flowsSection dividers

Photography

Photography guidelines

Photography is used sparingly. When it appears, it must reflect real community energy — not corporate stock imagery.

✓Authentic community moments

Real events, real collaboration, real people — captured in the moment.

✓Warm, natural lighting

Golden hour, ambient indoor, soft diffused — never harsh studio flash.

✓Diverse representation

Always. Representation in imagery is non-negotiable.

✓Dark overlay for legibility

Apply rgba(10,10,15,0.6) when text is placed over photography.

✕Stock photos

Fake smiles, corporate handshakes, laptop-on-desk clichés — all rejected.

✕Harsh lighting

Studio flash, harsh shadows, clinical white backgrounds.

✕Homogeneous casting

All-same-demographic shoots don't reflect the 3cosystem community.

✕Text without overlay

Never place text directly over photography without a dark scrim.

Required aspect ratios

16:9

Hero / Banner

1:1

Avatar / Profile

4:3

Card image

Empty States

Empty state illustrations

Empty states guide users toward action. Illustrations are minimal line-art, never decorative — always paired with a clear call to action.

Line-art style

Match Lucide's stroke weight (1.5–2px). No fills except accent highlights.

Accent color

Use surface primary for key strokes; #8B8C99 for structural lines.

Max height: 120px

Illustrations in-context never exceed 120px height.

Always paired

Every empty state includes heading, body text, and a CTA button.

Action-oriented

Convey the action the user should take — not the absence of content.

Example empty state layouts

No sessions yet

Your speaking sessions will appear here once you create one.

No tracks found

Curated music and ambient tracks appear here. Upload your first track to get started.

No connections yet

Build your network by connecting with other community members.

Image Treatment

Technical specifications

All images must meet these technical standards for performance, accessibility, and visual consistency.

Property	Specification	Notes
Format	WebP (primary) · AVIF (modern) · PNG (fallback)	Use <picture> with srcset for format negotiation
Max width	1200px	Full-width images only. Cards and components use contextual sizing.
Lazy loading	loading="lazy"	All images below the fold. Above-fold images use loading="eager".
Border radius	16px (--radius-lg) for cards · 9999px for avatars	Match container corner radius, not image intrinsic shape
Responsive srcSet	1x · 2x · 3x	Retina-ready. Use sizes attribute for art direction breakpoints.
Dark mode filter	brightness(0.9)	Applied to all photography in dark context to reduce eye strain.
Alt text	Required on all non-decorative images	Decorative images use alt="" and aria-hidden="true".
Compression	WebP quality 80, AVIF quality 70	Never exceed file size of 200kb for card images, 500kb for heroes.

16px

Card image

∞

Avatar

24px

Hero

Do / Don't

Visual rules

A quick-reference guide to correct and incorrect imagery usage across all 3cosystem surfaces.

✓

Use hexagon patterns for visual texture

SVG hex grid at 3–6% opacity in hero sections and empty states.

Tint backgrounds with surface primary

Radial gradients at low opacity tie imagery to the product context.

Use authentic community photography

Real events, real collaboration, real people.

Apply dark overlay over images for text

rgba(10,10,15,0.6) scrim ensures legibility at all times.

Don't

Use stock photography

Corporate handshakes, laptops on desks, and posed smiles are banned.

Use neon or rainbow gradients

Violates dark-first, minimal philosophy. Never more than 4 gradient stops.

Place text on images without overlay

Text directly over photography is inaccessible and visually inconsistent.

Use illustrations outside the line-art style

Cartoons, flat-color vector art, or 3D renders don't match the system.

Quick reference

✓WebP format

✓Dark-first imagery

✓Hex patterns

✓Surface tinting

✓Authentic photography

✓Line-art illustrations

✕Stock photography

✕Neon gradients

✕Rainbow gradients

✕Text without overlay

✕5+ gradient stops

✕Bright backgrounds