A comprehensive guide to Claude Insider's visual language, components, and patterns.
Font: Inter or system font stack
“Your comprehensive guide to Claude AI”
Minimum clear space = 1x logo width on all sides
Violet
#7C3AED
Blue
#2563EB
Cyan
#0891B2
// Tailwind CSS
className="bg-gradient-to-r from-violet-600 via-blue-600 to-cyan-600"
// CSS
background: linear-gradient(to right, #8B5CF6, #3B82F6, #06B6D4);Success
#10B981
Warning
#F59E0B
Error
#EF4444
Info
#3B82F6
Background
Surface 1
Surface 2
Surface 3
Border
Background
Surface 1
Surface 2
Surface 3
Border
Headings
Sample Text
text-gray-900 / white
Body Text
Sample Text
text-gray-700 / gray-300
Secondary
Sample Text
text-gray-600 / gray-400
// Heading text
className="text-gray-900 dark:text-white"
// Body text
className="text-gray-700 dark:text-gray-300"
// Links (accent color)
className="text-blue-600 dark:text-cyan-400"
// Secondary/muted text
className="text-gray-600 dark:text-gray-400"Display
36px/60px / Bold
Display
H1
30px / Bold
Heading 1
H2
24px / Bold
Heading 2
H3
18px / Semibold
Heading 3
Body
16px / Regular
Body text for main content
Small
14px / Regular
Small text for secondary content
Caption
12px / Regular
Caption text for labels
Mono
14px / Regular
const code = 'example';
// Primary Font (UI)
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
// Monospace (Code)
font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;4px
p-1 / gap-1
8px
p-2 / gap-2
12px
p-3 / gap-3
16px
p-4 / gap-4
24px
p-6 / gap-6
32px
p-8 / gap-8
48px
p-12 / gap-12
64px
p-16 / gap-16
96px
p-24 / gap-24
// Standard page padding
className="px-4 sm:px-6 lg:px-8"
// Section vertical spacing
className="py-12 sm:py-16 lg:py-24"
// Container with max-width
className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"// Primary Button
className={cn(
"px-6 py-3 rounded-lg text-sm font-semibold text-white",
"bg-gradient-to-r from-violet-600 via-blue-600 to-cyan-600",
"shadow-lg shadow-blue-500/25",
"hover:shadow-xl hover:-translate-y-0.5",
"transition-all duration-200"
)}Basic card with border
Card with shadow elevation
Hover me for effect
Glass morphism effect
Lift
-translate-y-1
Scale
scale-105
Glow
shadow-blue-500/25
Color
gradient fill
// Entrance Animation
className="animate-in fade-in slide-in-from-bottom-4 duration-500"
// Hover Effect
className="hover:-translate-y-1 hover:shadow-lg transition-all duration-200"
// Glass Morphism
className="bg-white/20 backdrop-blur-md border border-white/30"Using Heroicons (outline style) for consistency. 24x24px default size.
Text on Background
Contrast ratio: 21:1 (AAA)
Primary Blue on White
Contrast ratio: 4.5:1 (AA)
// Focus ring pattern
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
// Dark mode offset
className="dark:focus-visible:ring-offset-[#0a0a0a]"Minimum Touch Target
44x44px minimum for WCAG 2.1 compliance
// Respect user preferences
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}