Brand Guide
This guide defines the visual identity of the CoSpark brand. It covers our logo system, color palette, and typography — everything needed to represent CoSpark consistently across digital and print applications.
Logo
The CoSpark logo system consists of four assets: the primary horizontal lockup, a stacked lockup, the wordmark, and the icon. Use the version best suited to the context and available space.
Primary Logo
Horizontal lockup. Default choice for most applications.
Stacked Logo
Use when vertical space is available or width is constrained.
Wordmark
Text only. Use when the icon has already been established nearby.
Icon
Standalone mark. Use for favicons, app icons, and small-format placements.
Logo Usage
Clear Space
Maintain a minimum clear space around the logo equal to the height of the "o" in "CoSpark." No other visual elements should encroach on this space.
Acceptable Backgrounds
The logo works on light and dark backgrounds. Use the dark (default) version on light backgrounds and a reversed white version on dark backgrounds.
Don'ts
Don't stretch or distort
Don't rotate
Don't reduce opacity
Don't add effects or shadows
Favicon
The CoSpark icon is used as the favicon across web properties. Below are previews at standard favicon sizes.
Apple Touch Icon
Color
The CoSpark palette is drawn from materials, not a color wheel. Every color is something you can touch — oxidized metal, quarried stone, weathered patina, fired clay. This matters because the palette lives beyond screens: on painted murals, environmental signage, and large-scale brand installations where colors must read at distance and hold energy on real surfaces.
Four colors. Each carries a role in the brand's story: Spark (Copper) → Fire (Ember) → Transformation (Patina) → Foundation (Slate). A muralist can paint the entire narrative arc through color alone.
Primary
Copper and Slate carry 80% of everything — they are the brand's signature. Copper is warm, activating, optimistic. Slate is grounding, trustworthy, institutional without being institutional. Together they create the warm-cool tension that gives CoSpark its visual energy.
Secondary
Two material colors drawn from the copper story. Patina is what copper literally becomes over time — verdigris, the Statue of Liberty, old church roofs. It represents growth, trust, and transformation. Ember is the glow after the spark catches — cinnabar pigment, fired clay, the warmth of a room where people gather. It carries energy, urgency, and confidence.
In the brand pattern, Copper ↔ Patina sit as near-complements — their pairing creates electric contrast at mural scale. Ember focal points pop against Slate fields. Warm and cool interlocking, just four named colors producing enormous range.
Copper Scale
Full range from tint to shade. Copper 500 is the primary brand color. Darks shift toward red-orange to stay warm and avoid muddy browns.
Slate Scale
Full range from tint to shade. Slate 800 is the primary brand color. Lights carry a faint blue warmth; darks shift deeper without going muddy.
Patina Scale
The verdigris spectrum. Patina 500 is the brand anchor — what copper becomes. Darks shift greener to stay alive.
Ember Scale
The cinnabar spectrum. Ember 600 is the brand anchor — deep, confident, warm. Darks shift warmer to avoid dead maroon.
Functional Colors
Every functional need maps to an existing brand color — no extra colors required. Success is naturally green (Patina). Error is naturally red (Ember). Warning pulls from the primary Copper scale. Info uses the neutral Slate. The palette was designed so that these mappings fall out naturally, not bolted on after the fact.
Mural System
A modular geometric tile system derived from the CoSpark spark mark. Nine tile shapes combine at three scales on a square grid to create rich environmental patterns — from large-format painted murals and signage to digital textures and branded backgrounds. Every curve in the system traces back to the spark's geometry: quarter-circles, crescents, and concave arcs. No arbitrary shapes.
Tile Library
Nine base shapes. Each tile is decomposed into independently colorable regions — the mechanism that makes tonal depth and color zoning possible. Region counts range from 1 (solid) to 5 (spark, circle, diamond).
Tile Anatomy
The power of the system lives in independently colorable regions within each tile. A single spark tile with 5 regions can carry 5 tonal values from the same color family — or bridge two families at a zone boundary. This is what separates a CoSpark mural from a flat pattern.
5 regions each. The spark has 4 crescent backgrounds + the spark form. The circle has 4 corner quadrants + the central disc. The diamond has 4 corner triangles + the center diamond. These are the richest tiles — use them where you need tonal complexity.
3 regions: two corner crescents + a central leaf or vesica piscis form. A transitional tile — its curves echo both the quarter-circle and the spark.
2 regions each: figure + ground. These are workhorse tiles — they carry the rhythm of a composition without competing with the spark for attention.
1 region. Pure breathing room. Use solids to create rest, define zone boundaries, and prevent visual fatigue in dense compositions.
Scale
Each tile is available at three scales on the same grid. The spark motif diminishes along a hierarchy: the 3× hero anchors a composition, 2× accents support it, and 1× tiles fill the field. Larger tiles occupy multiple grid cells and layer over the base grid.
Color Strategy
Color in the mural system is not decoration — it is structure. Three principles govern how color works in a composition.
Group tiles into color zones that flow through the brand narrative: Slate (Foundation) → Ember (Fire) → Copper (Spark) → Patina (Transformation). A viewer should be able to read the story through color alone, left to right or bottom to top. Zones are not hard-edged — they bleed into each other at transition tiles.
Within each zone, use 3–5 values from a single color scale rather than a flat anchor color. A patina zone might use 400, 500, 600, 700, and 800. This creates spatial depth and visual vibration — the same principle that makes a Rothko field feel alive despite using "one color." Independent tile regions are the mechanism that makes this possible.
The spark motif in Copper appears across every color zone — small sparks on slate fields, the hero spark on patina, accent sparks bridging ember and patina. Copper is the connective tissue that stitches the narrative together. It should be present in every zone but concentrated at the climax.
Composition Principles
One 3× hero per composition, maximum. One or two 2× accents. Everything else is 1× field. Reserve the highest contrast (copper spark on the deepest opposing color) for the hero scale. Accents use moderate contrast. Field tiles stay tonal.
Where color zones meet, tiles should bridge both families. A 2× spark at the boundary between ember and patina zones should carry crescent regions from both — ember on one side, patina on the other. Hard color cuts read as errors; gradual transitions read as intention.
Compositions flow from dense, small-tile texture to open, large-tile simplicity. Dense areas create visual energy; open areas give the eye room to rest. Solids and low-contrast tiles are deliberate — they are the silence that makes the melody possible.
When tiles adjoin, their curved regions create emergent forms. Half-circles on adjacent cells form implied full circles. Quarter-circle arcs flow across boundaries. Plan for these secondary rhythms — they are what give a composition depth beyond the individual tiles.
Example Composition
A 6×6 composition demonstrating the full system. Three color zones flow left to right through the brand narrative — slate foundation, ember fire, patina transformation — with copper spark motifs at all three scales stitching them together.
Deep slates (800–950) with small copper sparks emerging from darkness. Dense, grounding. This is where the story begins.
Ember tones (600–800) with copper half-circles and a 2× spark that bridges the warm and cool zones. Its crescent regions carry both ember and patina — literally a transition tile.
Patina values (400–800) filling the field at five tonal depths. The 3× hero spark in copper commands the upper right — the climactic moment, maximum contrast, maximum scale.
Don'ts
- Don't scatter colors randomly. Every hue should belong to a zone with a clear narrative position.
- Don't use flat color within a zone. A single value reads as clip art; tonal variation reads as craft.
- Don't place two hero-scale elements in one composition. One focal point, one climax.
- Don't rotate tiles to arbitrary angles. All tiles orient at 0° or 90° increments on the grid.
- Don't leave gaps. The grid is edge-to-edge — every cell has a tile, even if it's a solid.
Typography
CoSpark's typography pairs two typefaces: DM Sans for headings, labels, and interface elements, and Source Serif 4 for body text and long-form reading. The geometric clarity of DM Sans conveys trust and precision — essential for a financial network — while Source Serif 4's humanist warmth makes extended reading comfortable and inviting.
DM Sans
Primary typeface. Used for all headings, navigation, labels, buttons, captions, and UI elements. Its wide weight range (300–900) provides clear hierarchy without needing a second sans-serif.
DM Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()?.,:;
Source Serif 4
Body typeface. Used for paragraphs, descriptions, guidelines, and any running text longer than a sentence. Its variable optical sizing adjusts stroke contrast across sizes, keeping small text readable and large text refined.
Source Serif 4
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()?.,:;
Scale
A modular scale used across all CoSpark touchpoints — from marketing pages and signage to member dashboards and printed statements.
Brand Guide
Own Your Future
Ignite Community
Ignite Community
Ignite Community
CoSpark is building a financial network that is owned and governed by its community. We believe finance should serve people, not the other way around. Every member has an equal vote, every dollar is reinvested locally, and every decision is made in the open.
Supporting text, captions, and disclaimers.
FDIC insured through partner bank. Terms and conditions apply.
Text Color Hierarchy
Three levels of text color create visual hierarchy without requiring additional weights or sizes. These map to the Slate scale and swap automatically between light and dark modes.
Primary
- Headings, labels, key content
- Slate 900 / Slate 50 (dark)
--color-black
Secondary
- Body paragraphs, descriptions
- Slate 700 / Slate 200 (dark)
--color-gray-700
Tertiary
- Captions, metadata, supporting text
- Slate 500 / Slate 400 (dark)
--color-gray-500
Disabled
- Placeholders, disabled states
- Slate 300 / Slate 700 (dark)
--color-gray-300
Usage by Context
How the type scale maps to real CoSpark surfaces.
Marketing & Signage
- Display — Hero headlines, billboards, event banners
- H1 — Page titles, campaign headers
- Body — Website copy, brochures, flyers
Member Dashboard
- H2 — Section headers (Accounts, Transfers)
- H3 — Card titles, widget labels
- Body — Transaction descriptions, balances
- Caption — Timestamps, footnotes, legal
Co-Working Spaces
- Display — Room names, wall graphics
- H2 — Wayfinding signs, floor directories
- Small — Room capacity, booking info
- Caption — Safety notices, Wi-Fi credentials
Statements & Compliance
- H3 — Section headers
- Body — Account summaries, terms
- Small — Fine print, routing numbers
- Caption — Regulatory disclosures
Guidelines
- Use DM Sans Black 900 for headlines and display type. Never use thin or light weights for headings.
- Use Source Serif 4 Regular 400 for body text. Semibold 600 may be used for emphasis within running text.
- Never mix typefaces within the same line. DM Sans handles structure; Source Serif handles reading. The boundary is always between elements, never within them.
- Maintain a minimum body size of 16px (1rem) for digital and 10pt for print to ensure accessibility.
- Financial figures (balances, rates, amounts) should use DM Sans Bold 700 with tabular numerals for scannability.
- Legal and compliance text may go as small as Caption (0.75rem) but never smaller.
- Line height for body text should be 1.5–1.6. Headlines can be tighter at 0.9–1.2.
- Maximum line length for body text is 60–70 characters for comfortable reading.
Voice & Tone
CoSpark speaks like a knowledgeable neighbor — warm, clear, and honest. Our voice stays consistent; our tone shifts to match the moment.
Brand Personality
We put agency in members' hands. Language is active, forward-looking, and avoids dependency framing.
No fine-print surprises. We explain fees, governance, and decisions in plain language every time.
We use "we" and "our" over "the company." Every touchpoint reinforces shared ownership.
Confident but not flashy. We earn trust through substance, not hype.
Tone by Context
Marketing & Brand
Warm, aspirational, energetic. Spark curiosity.
"Your money builds the neighborhood you live in."
"Leveraging synergistic community capital solutions."
Banking & Compliance
Clear, precise, reassuring. Build trust.
"Your deposit is FDIC insured up to $250,000 through our partner bank."
"Don't worry, your money's totally safe!"
Co-Working & Spaces
Friendly, practical, concise. Guide without clutter.
"The Rooftop — seats 12 · A/V ready · book via the app"
"Welcome to our amazing Rooftop Conference Experience!"
Member Communications
Personal, direct, respectful. Treat members as owners.
"Your vote on the 2026 budget is open. Here's what's proposed."
"Valued customer, we are pleased to inform you of an upcoming governance event."
Writing Principles
- Lead with the benefit. Front-load the most important information in every sentence.
- Use short sentences. If a sentence has a comma, consider splitting it in two.
- Avoid jargon. Say "savings account," not "high-yield demand deposit instrument."
- Use active voice. "You earned $12.40 in interest" beats "Interest of $12.40 has been credited."
- Be specific. Numbers, dates, and names build more trust than vague qualifiers.
- Respect the reader's time. If it can be said in fewer words, it should be.
Iconography
CoSpark icons are drawn on a 24px grid with 2px strokes, rounded caps, and rounded joins. They share the geometric warmth of DM Sans and the soft curves of the spark motif.
Style Rules
24 × 24px base grid. 2px padding on all sides for optical balance.
2px stroke weight. Rounded line caps and joins. Never filled unless specified.
2px border radius on sharp corners. Echoes the brand's rounded aesthetic.
Default to current text color. Use Copper for interactive states and Patina/Ember for status.
Core Set
Icons used across the member dashboard, co-working app, and signage.
Status Icons
Used for transaction states, system alerts, and booking confirmations.
Photography
Photography at CoSpark captures real people in real spaces. Every image should feel authentic, diverse, and grounded — never staged or stock-like.
Style Direction
Favor daylight and warm interior lighting. Avoid harsh flash or heavily processed color grading. The palette should feel warm and lived-in.
Capture people mid-conversation, mid-work, mid-laugh. Posed portraits are acceptable for headshots but should feel relaxed, not corporate.
Every shoot should represent the full diversity of CoSpark's membership — age, ethnicity, ability, profession. Avoid homogeneous groups.
Show co-working spaces in use — open laptops, coffee cups, whiteboards with notes. Empty spaces feel cold; occupied spaces feel inviting.
Categories
Community
- Member events and gatherings
- Governance meetings and votes
- Workshops and mentorship sessions
- Street-level and neighborhood context
Workspaces
- Desks, lounges, and private offices in use
- Meeting rooms during sessions
- Common areas and kitchens
- Architectural details and signage
Portraits
- Member spotlights — environmental, not studio
- Team photos — casual, grouped naturally
- Headshots — soft background, natural expression
Financial Life
- Small business owners at work
- Families and everyday money moments
- Local businesses CoSpark supports
- Avoid clichés: no piggy banks, no gold coins
Don'ts
- No heavily filtered or over-saturated images. Keep color grading subtle and warm.
- No generic stock photography. If you can't tell it's CoSpark, don't use it.
- No empty, sterile environments. Spaces should show signs of human activity.
- No clip art, illustrations mixed with photos, or collage-style compositions.
- No images that portray financial anxiety or stress. Frame money as empowering.
Layout & Grid
CoSpark's layout system creates consistent rhythm across digital products, marketing materials, and environmental signage. Everything snaps to an 8px base grid.
Spacing Scale
All spacing derives from an 8px base unit. Use these values for padding, margins, and gaps.
Grid System
Digital — Desktop
- 12-column grid
- Max content width: 1200px
- Column gutter: 24px
- Outer margin: 48px minimum
Digital — Mobile
- 4-column grid
- Column gutter: 16px
- Outer margin: 16px
- Breakpoint: 768px
Print — Collateral
- 6-column grid for letter/A4
- Column gutter: 4mm
- Outer margin: 12mm
- Bleed: 3mm on all sides
Environmental
- Modular grid based on tile units
- Minimum text margin: 2 tile units
- Signage clearance: 48" from floor
- Wayfinding height: eye level (57")
Content Hierarchy
- Every layout should have one clear focal point. If everything is emphasized, nothing is.
- Use whitespace generously. Dense layouts erode trust — especially in financial contexts.
- Group related content with proximity. Use spacing, not lines, to separate sections.
- Left-align body text. Center alignment is reserved for short headlines and captions only.
- Financial data (tables, statements) should use monospaced numerals and generous row spacing.
- On signage, limit messages to seven words or fewer for readability at walking speed.
Applications
How the CoSpark brand comes to life across physical and digital touchpoints.
Business Card
- 3.5" × 2" standard US size
- Uncoated stock, 18pt
- Front: Slate text on white
- Back: Copper icon on Slate background
- Logo at 1.5" width, top-left aligned
Member Card
- CR80 standard (3.375" × 2.125")
- Slate background with Copper icon
- Member name and number in Copper 300
- NFC enabled for space access
- Doubles as debit card and room key
Email Signature
Environmental Signage
Room Signage
- Room name in Display weight, Slate
- Capacity and amenities in Small, Slate 500
- LED booking status strip: Patina (open), Ember (occupied)
- Mounted at 57" center height
Wayfinding
- Floor directory in H2, left-aligned
- Directional arrows from icon set
- Slate on Slate 50 background
- Minimum text height: 1" for hallway signs
Wall Graphics
- Spark icon as large-scale motif
- Copper on white or white on Slate
- Brand statements in Display weight
- Keep to one statement per wall
Window & Glass
- Frosted vinyl with logo lockup
- Privacy band at 42"–72" height
- Hours and address in Caption weight
- Copper foil for exterior door signage