CloviTek Design System Showcase

Typography · Color · UI Elements · Light & Dark per platform · Accessibility-ready

CloviScanCloviAbleCloviLegalCloviChartsCloviPDFCloviDecksCloviImageCloviReachCloviHumanCloviFlow
🔍

CloviScan

Primary: #F43F5E · Rose Red · Default: light
Live site Platform 1
DARK THEME
Color Palette
#F43F5EPrimary
#FFD700CT Gold
#0A0F1EDeep BG
#0f172aCard BG
#1e293bBorder
#f1f5f9Text
#64748bMuted
Typography Scale
DisplayCloviScan
H1Main Page Heading
H2Section Heading
H3Card Title
BodyBody text for longer content and descriptions.
SmallLabel · Caption · Helper text
Codeconst scan = await clovi.run()
UI Elements
Buttons
Badges Active Success Warning Neutral
Card
Security Scan
Your Site Is At Risk
3 critical issues found. Click to view the full report.
Alert
Critical Issue Detected
Your SSL certificate expires in 3 days.
Toggle
Enabled
Font Stack & CSS Variables
font: Inter, system-ui
--brand: #F43F5E
--brand-dark: #e11d48
--bg: #0d0509 (dark)
--surface: #fdf2f4 (light)
--text: #0f0a0d
LIGHT THEME
Color Palette
#F43F5EPrimary
#ffffffPage BG
#f8fafcCard BG
#e2e8f0Border
#1e293bText
Typography Scale
DisplayCloviScan
H1Main Page Heading
H2Section Heading
BodyBody text for longer content and descriptions.
SmallLabel · Caption · Helper text
UI Elements
Buttons
Badges Active Success Warning
Card
Security Scan
Your Site Is At Risk
3 critical issues found.
Navbar
CloviScan
Features Pricing
♿

CloviAble

Primary: #84CC16 · Lime Green · Default: dark
Live site Platform 2
DARK THEME
Color Palette
#84CC16Primary
#65a30dDark shade
#FFD700CT Gold
#0A0F1EDeep BG
#0f172aCard BG
#f1f5f9Text
Typography Scale
DisplayCloviAble
H1Accessibility Made Real
H2Section Heading
BodyReal accessibility. No theater.
Codeaxe.run(document)
UI Elements
Buttons
Badges Passed Failed Warning
Alert
WCAG 2.1 AA Passed
All 47 accessibility checks passed.
Toggle
Enabled
Font Stack & CSS Variables
font: 'Plus Jakarta Sans', sans-serif
--check-yes: #0f766e
--check-no: #f43f5e
--c-yes: #15803d / --c-no: #475569
--hero-gradient: linear-gradient(135deg,#0f766e,#0369a1)
LIGHT THEME
Color Palette
#84CC16Primary
#f0fdf4Tinted BG
#1e293bText
UI Elements
Buttons
Card
Accessibility Score
98/100
Your site exceeds WCAG 2.1 AA standards.
Navbar
CloviAble
⚖️

CloviLegal

Primary: #4F46E5 · Deep Indigo #312E81 · Default: dark
Live site Platform 3
DARK THEME
Color Palette
#4F46E5Primary
#818CF8Accent
#312E81Deep Indigo
#FFD700CT Gold
#0f0e1aBG
#f4f5fbText
Typography
DisplayCloviLegal
H1AI Legal OS
Body160+ AI contract templates. Native eSign. No 3rd party.
UI Elements
Buttons
Badges Active Signed Pending
Card
NDA Template
Non-Disclosure Agreement
AI-generated, jurisdiction-aware NDA ready to eSign.
CSS Variables
--brand:#4f46e5
--accent:#818cf8
--bg:#0f0e1a
--surface:rgba(255,255,255,0.04)
--text:#f4f5fb
LIGHT THEME
Color Palette
#4F46E5
#818CF8
#eef2ffTinted
#1e1b4bText
UI Elements
Buttons
Navbar
CloviLegal
📊

CloviCharts

Primary: #0EA5E9 · Sky Blue · Default: light
Live site Platform 4
DARK THEME
Color Palette
#0EA5E9Primary
#a78bfaPurple accent
#7c3aedBrand
#0f0a1eBG dark
#f8f5ffBG light
Typography
DisplayCloviCharts
H1Beautiful Data Visualization
BodyAI-powered charts from your data in seconds.
UI Elements
Buttons
Card
Line Chart
Revenue Growth
CSS Variables
--brand: #7c3aed (CSS)
--accent: #5b21b6
--bg: #f8f5ff (light) / #0f0a1e (dark)
--text: #1e0a3c (light)
LIGHT THEME
UI Elements
Buttons
Navbar
CloviCharts
📄

CloviPDF

Primary: #F59E0B · Amber · Default: light
Live site Platform 5
DARK THEME
Color Palette
#F59E0BPrimary
#d97706Dark shade
#FFD700CT Gold
#0A0F1EBG
#f1f5f9Text
UI Elements
Buttons
Alert
PDF Generated
Your report is ready to download.
LIGHT THEME
UI Elements
Buttons
Navbar
CloviPDF
🎞️

CloviDecks

Primary: #7C3AED · Dark variant: #A78BFA · Default: dark
Live site Platform 6
DARK THEME
Color Palette
#7C3AEDPrimary
#A78BFAAccent
#FBBF24Brand Gold
#0a0a0fBG
#0F1F3DDeep
Typography
DisplayCloviDecks
H1AI Pitch Decks in Minutes
BodyInvestor-ready decks from your idea. No design skills needed.
UI Elements
Buttons
Badges Slide 1/12 Investor
CSS Variables
--brand:#FBBF24
--bg:#0a0a0f
--deep:#0F1F3D
--radius:14px
--font-head:'Plus Jakarta Sans'
--font-body:'Inter'
LIGHT THEME
UI Elements
Buttons
Navbar
CloviDecks
🖼️

CloviImage

Primary: #EC4899 · Hot Pink · Default: light
Live site Platform 7
DARK THEME
Color Palette
#EC4899Primary
#9F67FFPurple accent
#7C3AEDBrand (CSS)
#0a0814BG dark
UI Elements
Buttons
Card
AI Generated
Image Preview
CSS Variables
--brand:#7C3AED
--brand-light:#9F67FF
--bg:#0a0814 (dark)
--bg:#f9f8ff (light)
--surface:rgba(255,255,255,0.04)
LIGHT THEME
UI Elements
Buttons
Navbar
CloviImage
📡

CloviReach

Primary: #8B5CF6 · Violet · Teal/Cyan CSS vars · Default: light
Live site Platform 8
DARK THEME
Color Palette
#8B5CF6Brand
#0EA5A0Teal (CSS)
#0891B2Cyan (CSS)
#FBBF24Amber
UI Elements
Buttons
Badges Email LinkedIn SMS
CSS Variables
--teal:#0EA5A0 / --cyan:#0891B2
--amber:#FBBF24
--radius:20px
--grad:linear-gradient(120deg,#0EA5A0,#0891B2)
--line:#e2e8f0
LIGHT THEME
UI Elements
Buttons
Navbar
CloviReach
✍️

CloviHuman

Primary: #F97316 · Orange · Default: dark
Live site Platform 9
DARK THEME
Color Palette
#F97316Primary
#FB923CLight shade
#0a0a0fBG
#12121aSurface
#f0f0f8Text
UI Elements
Buttons
Badges Human AI Detected Mixed
Alert
Text Humanized
Your text now reads 97% human. AI score: 3%
CSS Variables
--brand:#F97316
--brand-light:#FB923C
--brand-glow:rgba(249,115,22,0.4)
--bg:#0a0a0f
--surface:#12121a
font: -apple-system, BlinkMacSystemFont
LIGHT THEME
UI Elements
Buttons
Navbar
CloviHuman
⚡

CloviFlow

Primary: #10B981 · Emerald Green · Default: dark
Live site Platform 10
DARK THEME
Color Palette
#10B981Primary
#34D399Light
#FBBF24Amber
#06140FBG dark
#f4faf7BG light
Typography
DisplayCloviFlow
H1Automate Everything
BodyConnect your tools. Build powerful workflows without code.
UI Elements
Buttons
Badges Active Scheduled Failed
Card
Workflow
Lead Nurture Sequence
Runs every day at 9 AM. 847 contacts.
Running
CSS Variables
--brand:#10B981 / --brand2:#34D399
--bg:#06140F (dark) / #f4faf7 (light)
--text:#eef6f1 (dark) / #0b1a14 (light)
--muted:#9db0a6 (dark) / #4c6157 (light)
--radius:18px
font: 'DM Sans', ui-sans-serif
LIGHT THEME
Color Palette
#10B981
#f4faf7BG
#dbe7e1Border
#0b1a14Text
UI Elements
Buttons
Card
Workflow
Lead Nurture Sequence
847 contacts · Running
Navbar
CloviFlow
CloviTek internal design system  ·  Logo preview  ·  Style analysis  ·  10 platforms · 2 themes each · Generated 2026-06-16