Styleguide · SociaPedia – The Social Encyclopedia

Brand & colors

Defined once in src/styles/tokens.css. Components use semantic aliases.

Blue--sp-blue · #1571B0
Primary actions, links, hover

Navy--sp-navy · #02518C
Headings, dark buttons

Red--sp-red · #AB2330
TOP 500, alerts, accents

Gold--sp-gold · #D4A017
Stars and recognition (icons only)

Text--sp-text · #1D2733
Body text

Muted text--sp-text-muted · #5B6672
Meta, hints (AA on white and bg-alt)

Border--sp-border · #E3E6EA
Dividers, card borders

Background alt--sp-bg-alt · #F7F7F7
Section bands

Background alt 2--sp-bg-alt-2 · #F5F5F5
Inputs, chips, skeletons

Blue 50--sp-blue-50 · #EAF3FA
Hover, info surfaces

Gold ink--sp-gold-ink · #7A5A00
Gold-family text on light

Green--sp-green · #1E7A4C
Success, approved

Typography

Bebas Neue for display headings (h1–h3); Montserrat for everything else, including h4–h6. The serif .sp-display (Bodoni Moda, a free stand-in for the mockups' Aneto Skyline Condensed; swap it in --sp-font-display) is for wordmark-style titles: "The Social Encyclopedia", profile names, "Business Pedia".

display · --sp-font-display

The Social Encyclopedia

display underline

Business Pedia

h1 · --sp-fs-4xl

The Social Encyclopedia

h2 · --sp-fs-3xl

Discover professionals & businesses

h3 · --sp-fs-2xl

Recognized among the TOP 500

h4 · --sp-fs-md

Business Owner Advice

eyebrow

Food & Restaurants

lead · --sp-fs-md

Where people, professionals and businesses build their public identity and legacy.

body · --sp-fs-base

SociaPedia is more than a business directory. Profiles tell the story behind a business or a professional: their history, their expertise and the recognition they have earned. Inline links use the primary blue.

small · --sp-fs-sm

Orlando, Florida · Updated 3 days ago

arrow link

Spacing, shape & depth

8 px rhythm (--sp-space). Breakpoints: 480 / 768 / 1024 / 1280.

--sp-s-1 · 4px

--sp-s-2 · 8px

--sp-s-3 · 12px

--sp-s-4 · 16px

--sp-s-5 · 24px

--sp-s-6 · 32px

--sp-s-7 · 48px

--sp-s-8 · 64px

--sp-radius10px · cards, buttons

--sp-shadow-lg16px radius · modals, menus

Flat cardborder only

Icons

Inline SVG sprite (partials/icons.hbs), used with {{> icon name="search"}}. Decorative by default.

search

chevron-down

chevron-up

chevron-left

chevron-right

close

menu

plus

check

check-circle

info

alert

star

heart

share

phone

mail

globe

map-pin

clock

calendar

user

users

user-plus

bell

message

home

briefcase

tag

award

shield-check

file-text

mic

play

upload

flag

filter

trending

log-in

facebook

instagram

x

youtube

tiktok

threads

email

website

Buttons

Primary, outline, ghost and danger, plus dark and light for banners. The square --navy, --red and --flat variants are the client mockup's buttons (PRO PROFILE, CONNECT, YES / NO, SUBMIT). Minimum touch target 44 px.

Badges & chips

Badges label status and recognition. Chips are filters and tags; pressed chips use aria-pressed.

Trusted Advisor TOP 500 Verified Business Annual Free listing

Approved Pending review Needs info Declined Draft Messages 3

Orlando, FL

Cards

Flat mockup box: a Bebas label above a light-gray, square-cornered panel (profile sidebar, Connect cards, Report form).

Recognition

Acqua Wave Inc

Recognized by SociaPedia as a

Trusted Advisor

TOP500

Acqua Wave Inc

Recognized by visitor voting as a

TOP500

Content card (articles, offers), profile card (search, TOP 500, Connect) and sidebar box.

Business

How a neighborhood café built a loyal community

Fancy Coffee · Sep 28, 2026 · 5 min read

Inputs

Labels are always visible. Errors use aria-invalid + aria-describedby.

Full name

Email

Enter a valid email address.

Location

Star rating

Input for TOP 500 vote criteria (native radios: arrow keys work) and a read-only display.

Quality of service

Value for money

Scores:

Tabs

Underline tabs for profiles (list comes from the API's tabs), segmented tabs for switches. Use ← → Home End.

$249 / year

$24.90 / month

Modal, dropdown & toast

Modals use native <dialog>: focus stays inside, Esc and backdrop close, focus returns to the trigger.

Loading, empty, error & alerts

Every component that fetches data handles all four states.

No results found

Can't find your category? Try a broader search, or contact us and we will add it.

Clear filters

We couldn't load this section. Check your connection and try again.

Loaded. Results render here.

Alerts

Approval is separate from payment. Your profile goes live after review.

Pending review. We'll email you when your profile is approved.

Approved. Your profile is now public.

Quota reached. Your plan allows 3 job posts. Upgrade to add more.

Pagination

Reads { page, totalPages } from list responses; emits sp-page-change.

Page of 12