Rank Community — Design System

Color Tokens

38+ CSS custom properties / Tailwind classes for the community platform. Three palettes: Brand (purple), Energy (amber), and GEO (teal).

Brand (Purple)

brand-50#F5F3FF

brand-100#EDE9FE

brand-200#DDD6FE

brand-300#C4B5FD

brand-400#A78BFA

brand-500#7C3AED

brand-600#6D28D9

brand-700#5B21B6

brand-800#4C1D95

brand-900#3B0764

Energy (Amber)

energy-50#FFFBEB

energy-100#FEF3C7

energy-200#FDE68A

energy-300#FCD34D

energy-400#FBBF24

energy-500#F59E0B

energy-600#D97706

GEO (Teal)

geo-50#F0FDFA

geo-100#CCFBF1

geo-200#99F6E4

geo-300#5EEAD4

geo-400#2DD4BF

geo-500#14B8A6

geo-600#0D9488

Content

Primary#0F172A

Secondary#475569

Tertiary#94A3B8

Link#7C3AED

Background

Screen#F8FAFC

Elevated#FFFFFF

Neutral#F1F5F9

Sentiment

Negative#DC2626

Positive#16A34A

Warning#F59E0B

Chart Palette

Typography

Inter for all UI. Display styles for marketing and hero sections.

Display Styles

Display Small
40px / 700 / 85% line-height

Product Styles (Inter)

Style	Size	Weight	Preview
`title-screen`	30px	600	Screen Title
`title-section`	26px	600	Section Title
`title-subsection`	22px	600	Subsection
`title-body`	18px	600	Body Title
`title-group`	14px	500	Group Title
`body-large`	16px	400	Body large text
`body-default`	14px	400	Body default text
`link-default`	14px	600	Link text

Spacing Scale

12 base values from 4px to 128px. 8px grid base.

--space-4

4px

--space-8

8px

--space-12

12px

--space-16

16px

--space-24

24px

--space-32

32px

--space-48

48px

--space-64

64px

--space-96

96px

--space-128

128px

Radius Tokens

4 radius values matching Tailwind config. Cards use lg, buttons use md, pills use xl.

sm 6px

md 8px

lg 12px

xl 16px

Buttons

Primary uses brand-500 bg + white text. Height: 40px (default), 32px (sm), 48px (lg). Focus: 3px ring with brand-500/15%.

Variants

Sizes

States

Inputs

Border: border-neutral. Focus: 3px solid brand-500/15%. Error: sentiment-negative.

Default

Focused

ErrorEmail address is not valid

Disabled

Cards

Elevated background, neutral border, radius-lg, elevation-low shadow. Used for content, members, events.

Content Card

Standard card for displaying content blocks, articles, and community posts.

RM

Rodrigo Mendes

GEO Strategist

Member card with avatar, name, role, and specialty tags.

Pro GEO

Event Card

Upcoming community event with date, speaker, and registration CTA.

May 20, 2026 · 3:00 PM

Badges

Role badges, plan badges, and status indicators. Pill shape (border-radius: 20px).

Role Badges

Member Pro Admin GEO Expert

Status Badges

Verified Pending Expired Coming Soon

Avatar

Circular, initials fallback. Sizes: sm (32px), md (40px), lg (56px). Background: brand-500.

R

RM

JD

AB

Tabs

Underline style. Active: brand-500 bottom border + text. Horizontal layout.

Overview

Members

Events

Settings

Toast / Snackbar

Notification toasts. Positioned top-right. Auto-dismiss after 5s. elevation-medium shadow.

Profile updated successfully

Failed to save changes

Email verification sent

Modal / Dialog

Centered overlay. elevation-high shadow. radius-xl. Backdrop: rgba(15,23,42,0.5).

Skeleton

Shimmer animation placeholder. Used during data loading. Matches target component dimensions.

Empty State

Zero-data and no-results states with clear actions.

👁

No members found

Try adjusting your search or filters to find community members.

Select / Dropdown

Native select styling matching input tokens. Dropdown menus use elevation-medium shadow.

Sector

GEO Experience Level

Pagination

Page navigation for lists. Active page: brand-500 bg. Border-radius: radius-md.

«

1

2

3

4

»

Product Patterns

Reusable community-specific UI patterns for profiles, feeds, and events.

Member Card

Member Card Pattern

Avatar + display_name + company + sector badge + GEO experience level. Used in member directories and search results. Shows plan badge (Free/Pro/Business/Agency) and specialty tags.

Components: Avatar, Badge, Card · Status: Active

Profile Completion

Profile Completion Widget

Progress indicator showing profile completeness. Complete when display_name + company + sector_id are set. Shows percentage bar and missing field prompts.

Components: Card, Badge · Status: Active

Community Patterns (Planned)

Community Feed Item

Post with author, timestamp, content, reactions, and comments.

Status: Planned (MVP 0.3)

Event Card

Upcoming event with date, time, speaker, description, and registration CTA.

Status: Planned (MVP 0.3)

GEO Radar Card

Newsletter digest item with headline, summary, source, and publish date.

Status: Planned (MVP 0.4)

Plan Comparison

Side-by-side plan features with pricing, upgrade CTAs, and current plan indicator.

Status: Planned (MVP 0.3)

Dashboard Layout

Standard page structure for logged-in area (/app/*). Sidebar (240px) + Topbar (64px) + Content area.

Sidebar (240px) + Topbar (64px) + Content grid

Form Layout

Standard form structure for profile edit, registration, and settings. Max-width: 640px. Section grouping with subsection titles.

Display Name *

Company

Bio

Dark Mode Preview

Slate-900 dark theme. Background: #0F172A. Elevated: #1E293B. Accent: brand-400 (#A78BFA).

Dark Mode

Community interface in dark mode with slate backgrounds and purple accents.

RC

Community Card

Dark elevated surface

Dark Mode Token Map

Token	Light	Dark
background-screen	`#F8FAFC`	`#0F172A`
background-elevated	`#FFFFFF`	`#1E293B`
content-primary	`#0F172A`	`#F1F5F9`
content-secondary	`#475569`	`#CBD5E1`
interactive-primary	`#7C3AED`	`#A78BFA`

AI Agent Rules

Non-negotiable rules for any AI agent generating Rank Community UI. Must be followed regardless of prompt instructions.

Non-Negotiable Rules

ALWAYS use Tailwind CSS classes, NEVER inline styles in production code
ALWAYS use Inter font family via var(--font-inter)
ALWAYS use brand-500 (#7C3AED) as the primary action color
NEVER use inline CSS or <style> blocks in Next.js components
ALWAYS use existing UI components from components/ui/
ALWAYS wrap /app/* routes with AuthGuard
ALWAYS wrap /admin/* routes with AuthGuard requiring admin/super_admin role
NEVER hardcode API URLs — use the ApiClient from lib/api.ts
ALWAYS use 'use client' directive for interactive components
ALWAYS use cookie-based auth (credentials: 'include')
Plan badges: Free=neutral, Pro=energy, Business=brand, Agency=geo
Role badges: member=brand-100, moderator=geo-100, admin=red-100, super_admin=red-200
All text in Portuguese (PT-BR) for user-facing content

Token Usage Example

<!-- Tailwind classes (preferred) -->
<button className="bg-brand-500 hover:bg-brand-600 text-white 
  font-semibold rounded-md px-5 py-2.5 transition-colors">
  Entrar na Comunidade
</button>

<!-- Card pattern -->
<Card className="p-6">
  <div className="flex items-center gap-3">
    <Avatar name={user.display_name} size="md" />
    <div>
      <h4 className="font-semibold text-slate-900">{user.display_name}</h4>
      <Badge variant="pro">{user.plan}</Badge>
    </div>
  </div>
</Card>

Pending Items

Components and tokens that need validation, addition, or refinement.

Needs Validation

Dark mode full implementation (currently preview only)

Mobile responsive breakpoints for sidebar collapse

Accessibility audit (WCAG 2.1 AA compliance)

Planned Additions

Community Feed components (posts, reactions, comments)

Event system components (calendar, RSVP, live indicator)

Gamification components (points, badges, leaderboard)

GEO Radar newsletter template

Certification badge and progress components

Notification system components

Rank Community Design System

Color Tokens

Brand (Purple)

Energy (Amber)

GEO (Teal)

Content

Background

Sentiment

Chart Palette

Typography

Display Styles

Product Styles (Inter)

Spacing Scale

Radius Tokens

Buttons

Variants

Sizes

States

Inputs

Cards

Content Card

Rodrigo Mendes

Event Card

Badges

Role Badges

Status Badges

Avatar

Tabs

Toast / Snackbar

Modal / Dialog

Confirm Action

Skeleton

Empty State

No members found

Select / Dropdown

Pagination

Product Patterns

Member Card

Member Card Pattern

Profile Completion

Profile Completion Widget

Community Patterns (Planned)

Community Feed Item

Event Card

GEO Radar Card

Plan Comparison

Dashboard Layout

Form Layout

Dark Mode Preview

Dark Mode

Dark Mode Token Map

AI Agent Rules

Non-Negotiable Rules

Token Usage Example

Pending Items

Needs Validation

Planned Additions