FamCoins — Brand Kit & Social Media Kit v1.0

01 — Primary Logos

Horizontal Lockups

Horizontal · Dark BG920x240

Horizontal · Light BG920x240

Horizontal · Gold BG920x240

With Tagline · Dark1080x280

02 — Stacked & Icon Marks

Stacked Layouts & Monograms

Stacked Logo

Gold Coin Icon

App Icon · Navy

Monogram Sticker

03 — Social Profile Marks

Circular Profile Avatars · 400x400

Circular · Gold

Circular · Monogram

Circular · Agenda

Circular · Store

04 — Social Headers & Banners

Twitter/X Header (1500x500) · Facebook Cover (1200x630)

Twitter/X Header Banner · 1500x500

Facebook Cover / Shared Image · 1200x630

05 — Social Media Kit Templates

Instagram Feed Post (1080x1080) · Pinterest Infographic Pin (1000x1500)

Instagram Post (1:1)

Pinterest Pin (2:3)

06 — Color Palette

Core Colors & Styling Guide

Space Navy

#080B14

BACKGROUND

Gold Coin

#FBBF24

COIN · ACCENTS

Soft Amber

#FDE68A

HIGHLIGHT TEXT

Dark Slate

#1E293B

CARDS · INPUTS

Growth Green

#10B981

DONE STATES

:root {
  --fc-navy-dark:       #080b14; /* Base dark constellation background */
  --fc-gold:            #fbbf24; /* FamCoins branding color */
  --fc-amber:           #fde68a; /* High contrast card highlights */
  --fc-slate:           #1e293b; /* Card surfaces, button borders */
  --fc-green:           #10b981; /* Completed badges, check-off animations */
}

07 — Typography System

Font Families & Scales

Primary Display · Space Grotesk

Space Grotesk — Bold 900

USED FOR: LOGOS, MAIN SECTION HEADERS, TITLE BANNERS, BRAND STATS

Body Font · Inter

Inter — Medium 500 / Regular 400. This body text shows optimal spacing, line-height (1.75), and legibility for both mobile screens and dashboards.

USED FOR: CHORE LABELS, USER DETAILS, SETTINGS TEXT, AUDIT LOG ITEMS

Metadata · IBM Plex Mono

IBM Plex Mono — Regular 400 · 0.08em tracking

USED FOR: DATES, WIDGET LABELS, BUTTON CAPTIONS, EXPORTS, CODE DEFINITIONS

08 — Brand Integrity Rules

Dos and Don'ts

Do

Always use the custom gold star SVG monogram coin inside the web application interfaces.

Render the monogram 'F' inside the custom coin using bold sans-serif lettering.

Keep each family portal session completely isolated dynamically via MySQL family IDs.

Don't

Never use the generic coin emoji 🪙 inside any user-facing templates or backend logs.

Do not hardcode family chores or store reward arrays inside the PHP static controllers.

Never store clean-text user passwords; always run them through bcrypt hashing.