Design System

5R★ Ceramic Brand Book

5R★ Design System — brand identity, visual language, and component guidelines for the 5RRRRR review platform.

5rrrrr.com GitHub
Brand Identity System
5 .com®

Reviews you can trust

5rrrrr.com®
01 — Golden Rule
Proportion «5» to stars
font-size = star × 1.35. Outfit Black cap-height ≈ 72% of font-size.
✅
5
Outfit Black · ★ base+n×0.04 · items-end
sm
★13px
«5» 18px
md
★18px
«5» 24px
lg
★20px
«5» 27px
xl
★24px
«5» 32px
hero
★32px
«5» 43px
02 — Brand Architecture
Mark Hierarchy
Complete Brand Architecture with ★ preserved across all variants. Sub-brands: 5R★ AI, 5R★ Trust, 5R★ Business.
Brand Architecture
Role Mark Usage
Favicon ★ Browser tab, app icon, PWA
Compact Mark 5R★ Badges 32-48px, watermark, signature — BASE
Primary Logo 5★★★★★ Header, hero, trust badges
Wordmark 5RRRRR SEO title, documents
Sub-brand AI 5R★ AI AI features, badges, seals
Sub-brand Trust 5R★ Trust Trust scoring, verification, seals
Sub-brand Business 5R★ Business B2B tools, company panel
Official tagline Where Trust is Measurable Primary slogan
FAVICON — ★ AMBER STAR
Favicon • Dark ★ Tab
Favicon • Light Light BG
32 • 20 • 16px Sizes
COMPACT MARK — 5R★
Compact mark — BASE for all sub-brands. For badges 32-48px, watermark, signatures.
5R
5R★ Dark ★ Trademark
5R
5R★ Light Light BG
PRIMARY LOGO — 5★★★★★
Primary logo. For header, hero, trust badges and profiles.
5
Reviews you can trust
Primary Logo • Dark ★ Header
5
Reviews you can trust
Primary Logo • Light Light BG
WORDMARK — 5RRRRR
5RRRRR
Wordmark • Dark ★ Primary
5RRRRR
Wordmark • Light Light BG
SUB-BRAND AI — 5R★ AI
AI sub-brand. For AI features, badges, seals and AI-generated content.
★ star is preserved across all sub-brands!
5R AI
5R★ AI • Dark ✨ AI
5R AI
5R★ AI • Light Light BG
SUB-BRAND TRUST — 5R★ TRUST
5R Trust
5R★ Trust • Dark ★ Trust
5R Trust
5R★ Trust • Light Light BG
SUB-BRAND BUSINESS — 5R★ BUSINESS
5R Business
5R★ Business • Dark ★ Business
5R Business
5R★ Business • Light Light BG
TAGLINES
Where Trust is Measurable
Official Tagline ★ Primary
Reviews you can trust
Logo Tagline Sub-logo caption
01 — Color Tokens
Brand Colors
Core color palette from Ceramic Design System.
Primary
#FF9213
Primary Light
#FFBE0B
Secondary
#09090B
Accent
#F70100
RATING COLOR SCALE
5
#04DA8D
4
#73CF11
3
#FFB800
2
#FF8A00
1
#F70100
CERAMIC GRAY SCALE
50
200
400
500
600
800
1000
1100
1300
1500
1700
01 — Font Families
Typography System
Role Font Usage
Logo Digit Outfit The «5» in logo, ratings
Tagline Sora Taglines, section headings
Headings Plus Jakarta Sans Card titles, UI headings
Body Inter Body text, paragraphs
Data DM Sans Dashboard, metrics, tables
Code Space Mono Tokens, labels, monospace
LIVE PREVIEW
Outfit · Logo
5★★★★★
Sora · Tagline
Where Trust is Measurable
Plus Jakarta Sans · Headings
Card Title Heading
DM Sans · Data
4.87 / 5.00 · Trust Score
Inter · Body
Trusted reviews platform with AI-powered fake detection and transparent trust scoring.
Space Mono · Code
--ceramic-brand: #FF9213;
01 — Card Patterns
Cards & Containers
Light Card
Standard card with border and padding. Used for content sections, settings blocks, and info panels.
bg-white · border · rounded-2xl · p-6
Dark Card
Dark variant. Hero sections, featured content, contrast blocks.
bg-ceramic-zinc-900 · rounded-2xl
Frosted Glass
Glassmorphism pattern. Overlays, modals, floating panels.
backdrop-blur(20px) · bg-white/5
Gradient Border
Premium card with amber gradient border. CTA, feature highlights.
gradient border · amber glow
01 — Button Variants
Buttons
SIZES
WITH ICONS
DISABLED
01 — Form Elements
Forms & Inputs
This field is required
TOGGLES
01 — Badges
Data & Display
Pro Add-on Info Success Warning Danger Neutral
RATING DISTRIBUTION
4.7
1,247 reviews
5
72%
4
18%
3
6%
2
2%
1
2%
01 — Danger Zone
Feedback & Alerts
Warning
This action may affect your trust score. Please review before proceeding.
Error
Something went wrong. Please try again or contact support.
Danger Zone
Destructive actions that cannot be undone. Proceed with caution.
01 — Layout Blocks
Layout Patterns
Hero Glow Block
Radial gradient glow
Top-center radial gradient creates a subtle amber glow effect for hero sections and CTA blocks.
SETTINGS CARD PATTERN
Section Header
Description of this settings section
Body content area. Settings rows, form fields, or information blocks go here.
Footer · meta information · last updated
01 — Domain Portfolio
Brand & Domains
Domain Purpose Status
5rrrrr.com Primary — all SEO, brand, traffic Active
5rrrrr.ru 301 redirect → /ru/ Active
5rrrrr.io Tech/API → api.5rrrrr.com Active
5rrrrr.review Niche redirect → 5rrrrr.com Active
SOCIAL LINKS
X (Twitter) GitHub Telegram Reddit YouTube
5RRRRR.COM® · Ceramic Brand Book · Design System Reference · 2026