RankMyGEO Design System
Official design system for the RankMyGEO platform. GEO visibility intelligence, AI search monitoring, and brand presence tracking across AI engines. Tokens, components, patterns, and AI agent rules.
Color Tokens
40+ CSS custom properties for RankMyGEO dashboards, visibility analytics, engine monitoring, and product UI.
Accents
#B8E62E
Rank Lime
--color-accent-lime
CTA buttons, progress bars, brand accent
#00A884
GEO Teal
--color-accent-teal
Primary interactive, links, ChatGPT engine
#2FBF71
Emerald
--color-accent-emerald
Perplexity engine, success states, citations
#24451A
Deep Moss
--color-accent-moss
Dark accents, chart label, engine meta
Content
#172014
Content Primary
--color-content-primary
Light: #172014Dark: #E8EDE5
Headings, body text
#52624A
Content Secondary
--color-content-secondary
Light: #52624ADark: #C5D4B7
Labels, captions, secondary text
#7B8874
Content Tertiary
--color-content-tertiary
Light: #7B8874Dark: #7B8874
Muted/decorative text only
#00A884
Content Link
--color-content-link
Light: #00A884Dark: #5EEBC2
Links and link icons
Interactive
#00A884
Interactive Primary
--color-interactive-primary
Light: #00A884Dark: #5EEBC2
Buttons, focus rings, active items
#B8E62E
Interactive Accent
--color-interactive-accent
Light: #B8E62EDark: #B8E62E
High-energy CTA, progress fills
#C5D4B7
Interactive Secondary
--color-interactive-secondary
Light: #C5D4B7Dark: #3A4A32
Input borders, dividers
#263900
Interactive Control
--color-interactive-control
Light: #263900Dark: #263900
Text/icons ON Lime accent
Background
#F7FAF0
Background Screen
--color-background-screen
Light: #F7FAF0Dark: #0D1A0A
Page background
#FFFFFF
Background Elevated
--color-background-elevated
Light: #FFFDark: #162112
Cards, modals, elevated surfaces
#EEF2E6
Background Neutral
--color-background-neutral
Light: #EEF2E6Dark: rgba(255,255,255,.08)
Panels, table headers, inner areas
Support
#DDF8F0
Teal Background
--color-support-teal-bg
ChatGPT badge backgrounds, info chips
#E4F8ED
Emerald Background
--color-support-emerald-bg
Perplexity badge backgrounds
#EEFAD0
Lime Background
--color-support-lime-bg
Gemini badge backgrounds, success chips
#E8F0E4
Moss Background
--color-support-moss-bg
Source quality, engine meta badges
Sentiment / Feedback
#C62828
Sentiment Negative
--color-sentiment-negative
Light: #C62828Dark: #fca5a5
Errors, destructive actions
#2E7D32
Sentiment Positive
--color-sentiment-positive
Light: #2E7D32Dark: #86efac
Success, positive visibility
#F9A825
Sentiment Warning
--color-sentiment-warning
Light: #F9A825Dark: #fde68a
Warnings. Use #7B6813 for text on warning bg
#00A884
Feedback Info
--color-feedback-info
Informational messages
Chart Palette
#B8E62E
Chart 1
--color-chart-1
Visibility Score, primary series
#00A884
Chart 2
--color-chart-2
AI Mentions, secondary series
#2FBF71
Chart 3
--color-chart-3
Citations, tertiary series
#FFB020
Chart 4
--color-chart-4
Warning data, declining trends
#F97066
Chart 5
--color-chart-5
Negative trends, lost mentions
#24451A
Chart 6
--color-chart-6
Dark accent, source authority
Typography
Inter for product UI. Display styles for marketing headlines and dashboards.
Display Styles
Display Large
96px / Bold / 85% line-height / 2% tracking
Display Medium
64px / Bold / 85% line-height / 1.5% tracking
Display Small
40px / Bold / 85% line-height / 1.5% tracking
Product Styles (Inter)
Title Screen
30px / Semi Bold / 34px line-height / -2.5%
Title Section
26px / Semi Bold / 32px / -1.5%
Title Subsection
22px / Semi Bold / 28px / -1.5%
Title Body
18px / Semi Bold / 24px / -1%
Body Large — Track visibility across AI search engines with real-time intelligence.
16px / Regular / 24px / -0.5%
Body Default — New AI mention detected for your brand. Review citation sources below.
14px / Regular / 22px / 1%
Link Large
Link Default
Links: Semi Bold + Underline
Spacing Scale
18 base values from 4px to 128px. 8px grid base.
--space-4
--space-8
--space-12
--space-16
--space-24
--space-32
--space-40
--space-48
--space-56
--space-64
--space-72
--space-80
--space-88
--space-96
--space-104
--space-112
--space-120
--space-128
Padding Tokens
8px
16px
24px
32px
Radius Tokens
Adaptive per platform. Mobile radius values must be applied via breakpoint.
Desktop
16pxsmall
20pxmedium
30pxlarge
40pxx-large
60px2x-large
Mobile
10pxsmall
16pxmedium
24pxlarge
32pxx-large
48px2x-large
Buttons
Primary uses --color-interactive-accent bg + --color-interactive-control text. Height: 48px (large). Focus: 2px outline, 2px offset.
Priorities
Sizes
States
Contextual Labels
Inputs
Border: --color-interactive-secondary. Focus: 3px solid --color-interactive-primary. Error: --color-sentiment-negative.
The brand to track across AI search engines
Default state
Domain of a competitor to compare visibility
Focus: 3px solid interactive-primary
Threshold for visibility alerts
Visibility score must be between 0 and 100
Analysis period
Disabled state
Metric Input
Score ▾
Search Input
Cards
Small (88-300px), Large (300px+). Uses radius-medium and official spacing.
Visibility Chart
Visibility Score
Score: 87 — Strong
AI Engine Comparison Chart
AI Mentions
42 mentions across 6 AI engines this week. ChatGPT leads with 18 citations, followed by Gemini with 12.
Insight Preview
Opportunity Card
Click to view recommendation
Sync Status
Last scanned 5 min ago — All engines connected
List Items
7 variants documented. Navigation, Switch, Checkbox, Radio, No Action.
Navigation
C
ChatGPT
18 mentions this week
G
Gemini
12 mentions this week
P
Perplexity
8 mentions this week
Switch
Visibility alerts
Notify when score drops below threshold
Weekly GEO digest
Receive visibility summary every Monday
Checkbox
✓
Include declining queries
Show competitor data
Radio
All engines
ChatGPT only
No Action
✓
GEO analysis complete
87 prompts across 6 engines
Feedback Components
Action prompts, snackbars, progress, spinners, and state screens.
Action Prompts
Scan failed
We couldn't connect to the AI search engine. Check API permissions and try again.
Visibility declining
3 prompts show dropping citations over the last 14 days. Consider reviewing content strategy.
GEO analysis complete
All 87 prompts analyzed. 5 new insights available across 6 AI engines.
Snackbar
Progress
Step 1 of 4 — Scanning AI search results
Step 3 of 4 — Analyzing citations
Complete
Spinner
Analyzing entity visibility...
State Screens
No prompts tracked yet
Add prompts to start tracking your brand visibility across AI search engines.
Something went wrong
We're having trouble loading this page. Please check your connection and try again.
Analysis complete!
All prompts have been analyzed. 5 new insights are available for review.
Overlays
Modal desktop: 540px width, max-height 800px, 80px safe zone. Bottom sheet: mobile full width.
Modal
Confirm prompt reprocessing
You're about to reprocess 87 prompts across all connected AI engines. This will refresh all visibility metrics and may take up to 10 minutes.
Bottom Sheet
Select engine
C
ChatGPT
G
Gemini
P
Perplexity
Popover
Visibility Score measures brand presence across AI search answers. It considers mention frequency, citation quality, and source authority over the last 14 days.
Badges rankmygeo
Status indicators, counts, and labels. Used for visibility states, engine badges, and data quality indicators.
Variants
Active
New
Warning
Critical
Info
Success
Neutral
Source
Sizes
Small
Default
Large
With Count
3
12 new
5 citations
RankMyGEO Usage
Visibility states: high (green), medium (lime), low (yellow), declining (red)
AI engines: ChatGPT (teal), Gemini (lime), Perplexity (emerald), Google AI (moss)
Source quality: authoritative (green), moderate (yellow), weak (neutral)
AI engines: ChatGPT (teal), Gemini (lime), Perplexity (emerald), Google AI (moss)
Source quality: authoritative (green), moderate (yellow), weak (neutral)
Avatar rankmygeo
User and entity representation. Used for team members, AI engines, and brand identities.
Sizes & Variants
R
JD
MK
LS
AB
Sizes: x-small (24px), small (32px), medium (40px), large (48px), x-large (56px)
Avatar Group
C
G
P
+3
Overlap: -10px margin-right. Border: 2px solid white.
Tooltip rankmygeo
Contextual information on hover. Background: --color-dark (#172014). Text: white. Max width: 240px.
Visibility Score: 87
AI mentions from ChatGPT, Gemini, and Perplexity combined
bg: --color-dark (#172014) | text: white | radius: 8px | padding: 8px 12px | max-width: 240px
Table rankmygeo
Data tables for prompt performance, engine comparison, and source analysis.
Breadcrumb rankmygeo
Hierarchical navigation. Separator: / (slash). Current page is not a link.
Pagination rankmygeo
Page navigation for data tables and search results.
‹
1
2
3
...
12
›
Active page: --color-interactive-primary bg, white text. Inactive: --color-content-secondary.
Skeleton rankmygeo
Loading placeholders. Uses pulse animation (1.5s ease-in-out infinite).
Card Skeleton
Table Row Skeleton
Empty State rankmygeo
Zero-data and no-results states with clear actions.
No prompts tracked yet
Start by adding prompts that your target audience might search in AI engines.
No results for your search
Try adjusting your filters or search terms to find what you're looking for.
No engines connected
Connect at least one AI engine to start monitoring your brand visibility.
Alert / Banner rankmygeo
Page-level notifications for important system or data status messages.
Info: New AI engine "Claude" is now available for tracking. Enable it now
Success: All 87 prompts have been re-analyzed. Visibility data is up to date.
Warning: Gemini API rate limit reached. Scans will resume in 15 minutes.
Error: Failed to connect to Perplexity API. Check your API key in Settings.
Dropdown Menu rankmygeo
Action menus and selection lists. Shadow: elevation-medium. Radius: 12px.
Dialog rankmygeo
Confirmation dialogs for destructive or irreversible actions.
Delete Prompt Group?
This will permanently delete the prompt group "best CRM for startups" and all associated visibility data. This action cannot be undone.
Accordion rankmygeo
Collapsible content sections for detailed information.
Divider rankmygeo
Visual separators between content sections.
Horizontal
Content above
Content below
With Label
Or
Vertical
Section A
Section B
Section C
Metric Card rankmygeo
KPI display cards for dashboards. Shows metric name, value, trend, and optional sparkline area.
Tracked Prompts
87
+12 this week
AI Mentions
1,234
+8.3% vs last period
Visibility Score
87
Strong visibility
Source Citations
456
-2.1% vs last period
Product Patterns
Reusable GEO-specific UI patterns for dashboards, forms, and data displays.
Visibility Summary
Visibility Summary Pattern
Mentions
1,234
Citations
456
Coverage
6/8
Score
87
4-column KPI grid. Score uses sentiment color based on threshold (green >70, yellow 40-70, red <40).
Engine Comparison
Engine Comparison Pattern
C
ChatGPT
92
18 mentions
vs
G
Gemini
74
12 mentions
Additional Patterns
Form Validation
Inline validation with error messages below input. Red border + error text. Success: green checkmark icon. Fields validate on blur, forms validate on submit.
Empty State
Centered icon (72px circle), title, description, and primary CTA. Used when no data exists or search returns zero results.
Success Screen
Green checkmark icon, confirmation title, summary of action completed, and navigation CTA. Used after analysis completion or export.
Error Screen
Red exclamation icon, error title, description of what went wrong, retry CTA. Used for API failures and connection errors.
Progress Screen
Multi-step progress bar, current step label, estimated time remaining. Used during engine scanning and bulk analysis operations.
Dashboard Layout
Standard page structure for RankMyGEO dashboard screens.
Form Layout
Standard form structure and field arrangement rules.
1.Max 2 columns on desktop, single column on mobile
2.Labels above inputs, never inline or floating
3.Description text below label, above input
4.Error messages below input, red text + red border
5.Primary action right-aligned, secondary left of primary
6.Spacing between fields: --space-24 (24px)
7.Section dividers between logical groups
Filter Pattern
Combination of chips, search, and dropdowns for data filtering.
All Engines
ChatGPT
Gemini
Perplexity
Chips for quick filtering. Search input for text queries. Combine with date range selector and status dropdown.
Loading Strategy
Progressive loading approach for optimal perceived performance.
1.Shell first: Render sidebar, header, and page structure immediately
2.Skeleton placeholders: Show skeleton components while data loads
3.KPIs load first: Metric cards populate before charts and tables
4.Progressive tables: Show first 10 rows, lazy load remainder on scroll
5.Error recovery: Retry failed requests automatically (max 3), then show inline error with manual retry
Dark Mode Preview
Forest green dark theme. Background: #0D1A0A. Elevated: #162112. Accents: #B8E62E (lime) and #5EEBC2 (teal).
Dark Mode Components
Buttons
Input
Card
Visibility Score
87 — Strong visibility across 6 AI engines
Snackbar
Action Prompt
Visibility declining
3 prompts show dropping citations. Review content strategy.
Dark Mode Token Map
AI Agent Rules
Non-negotiable rules for any AI agent generating RankMyGEO UI. Must be followed regardless of prompt instructions.
Non-Negotiable Rules
⚠NEVER use inline CSS for production components. All styles must use design tokens.
⚠NEVER use hardcoded color values. Always reference --color-* CSS custom properties.
⚠NEVER use px values for spacing. Use --space-* tokens (4px to 128px scale).
⚠NEVER use custom border-radius. Use --radius-* tokens only.
⚠NEVER use font sizes outside the typography scale (96/64/40/30/26/22/18/16/14px).
⚠NEVER mix Ads Intelligence colors (blue #5667EA, purple #8F4BE8) into RankMyGEO UI.
⚠ALWAYS use Inter font family. No custom or decorative fonts.
⚠ALWAYS use #0D1A0A for sidebar/dark backgrounds, not #0f1219.
⚠ALWAYS use #00A884 (teal) as interactive-primary, not #5667EA (blue).
⚠ALWAYS use #F7FAF0 for background-screen, not #F4F4F5.
⚠ALWAYS maintain minimum touch target: 48px height for buttons, 44px for list items.
⚠ALWAYS use GEO/AI search context in examples — never paid media or ads terminology.
AI Output Format
{
"product": "rankmygeo",
"design_system_version": "1.0",
"design_system_source": "https://design-system.shinp.ai/rankmygeo",
"tokens_validated": true,
"components_used": ["geo-btn", "geo-card", "geo-input"],
"geo_context_rules_applied": [
"no_ads_terminology",
"ai_engine_references_only",
"visibility_metrics_context"
],
"color_identity": {
"primary_accent": "#B8E62E",
"interactive_primary": "#00A884",
"sidebar_bg": "#0D1A0A",
"screen_bg": "#F7FAF0"
},
"deviations": [],
"accessibility": {
"contrast_aa_met": true,
"focus_visible": true,
"touch_targets_met": true
}
}
Token Usage Example
/* CORRECT - RankMyGEO */
.geo-dashboard {
background: var(--color-background-screen); /* #F7FAF0 */
color: var(--color-content-primary); /* #172014 */
}
.geo-sidebar {
background: var(--color-forest-green); /* #0D1A0A */
}
.geo-btn-primary {
background: var(--color-interactive-accent); /* #B8E62E */
color: var(--color-interactive-control); /* #263900 */
}
.geo-link {
color: var(--color-interactive-primary); /* #00A884 */
}
/* WRONG - These are Ads Intelligence tokens */
.wrong-example {
background: #0f1219; /* Ads Intelligence sidebar */
color: #5667EA; /* Ads Intelligence blue */
border: 1px solid #D8D8DC; /* Ads Intelligence border */
}
Benchmark & Gap Analysis
Component coverage comparison against industry design systems (Spectrum, Wedges, Morningstar).
Component Coverage Matrix
RankMyGEO Coverage: 31/31 components documented (100%). All components include GEO-specific context and examples.
Pending Items
Components and tokens that need validation, addition, or refinement.
Needs Validation
⚠Motion tokens: Duration and easing values need UX review and user testing.
⚠Elevation tokens: Shadow values need validation across light and dark modes.
⚠Mobile radius: Reduced radius values need testing on actual mobile devices.
Planned Additions
+Date Picker: Calendar component for date range selection in filters.
+Slider: Range input for visibility score thresholds.
+Stepper: Multi-step wizard for onboarding and bulk operations.
+Chart Components: Line, bar, and donut chart wrappers with token integration.
+Notification Center: Bell icon with dropdown for alerts and updates.
+Command Palette: Keyboard-driven search and navigation overlay.