Skip to main content

​
Overview

Chapinismos uses a comprehensive design system built on CSS variables. All design tokens automatically adapt to dark and light modes.

​
Color Palette

​
Primary Colors

The primary color palette uses vibrant blues for brand identity:

Primary

Dark: #4997d0
Light: #1f5e9c
Variable: --primary

Primary Light

Value: #5fa8dc
Variable: --primary-light

Primary Dark

Value: #3885bd
Variable: --primary-dark
Usage
/* CSS */
color: var(--primary);
background: var(--primary-light);
border-color: var(--primary-dark);

/* Tailwind utility */
.text-primary { color: var(--link-primary); }

​
Background Colors

Background colors create depth and hierarchy:

Background (Dark)

Value: #0a0e13
Variable: --bg

Background (Light)

Value: #f8fafc
Variable: --bg

Accent (Dark)

Value: #0f1419
Variable: --bg-accent

Accent (Light)

Value: #eff6fc
Variable: --bg-accent
Example
<body style="background: var(--bg);">
  <section class="bg-accent">
    Accent background section
  </section>
</body>

​
Card Colors

Card colors for elevated surfaces:

Card (Dark)

Default: #16202a
Hover: #1c2832
Variables: --card, --card-hover

Card (Light)

Default: #ffffff
Hover: #f1f5f9
Variables: --card, --card-hover
Example
<div class="bg-card hover:bg-card-hover transition-colors">
  Interactive card
</div>

​
Text Colors

Hierarchical text colors for readability:

Primary Text (Dark)

Value: #e8f2ff
Variable: --text
Utility: .text-theme

Primary Text (Light)

Value: #0f172a
Variable: --text
Utility: .text-theme

Secondary Text

Dark: #d1e3f5
Light: #1e293b
Variable: --text-secondary
Utility: .text-secondary

Muted Text

Dark: #a0b8d1
Light: #334155
Variable: --muted
Utility: .text-muted
Text Hierarchy Example
<article>
  <h2 class="text-theme text-2xl font-bold">
    Article Title
  </h2>
  <p class="text-secondary">
    Main body text with good readability
  </p>
  <small class="text-muted">
    Supporting text or metadata
  </small>
</article>

​
Border Colors

Border (Dark)

Value: #1e2937
Variable: --border
Utility: .border-theme

Border (Light)

Value: #e2e8f0
Variable: --border
Utility: .border-theme
Example
<div class="border border-theme rounded-lg">
  Content with theme-aware border
</div>

​
Button Colors

Specialized colors for interactive buttons:
Button Variables
--btn-primary-bg: #1f5e9c;
--btn-primary-bg-hover: #2973c1;
--btn-primary-text: #ffffff;
--btn-primary-shadow: rgba(31, 94, 156, 0.35);
Button Example
<button
  style="
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: 0 4px 12px var(--btn-primary-shadow);
  "
  class="hover:bg-[var(--btn-primary-bg-hover)] transition-colors"
>
  Primary Button
</button>
Link Variables
/* Dark mode */
--link-primary: #60a5fa;

/* Light mode */
html[data-theme="light"] {
  --link-primary: #1f5e9c;
}
Link Example
<a href="#" class="text-primary hover:underline">
  Interactive link
</a>

​
Typography

​
Font Families

Sans Serif (Body)

Font: Baloo 2 Variable
Variable: --font-sans
Weights: 400-800 (variable)
Use: Body text, UI elements

Serif (Titles)

Font: Alice
Variable: --font-title
Weight: 400
Use: <h1> headings
Typography Example
<h1 style="font-family: var(--font-title);" class="text-4xl">
  Alice Serif Title
</h1>

<p style="font-family: var(--font-sans);" class="text-base">
  Baloo 2 Variable body text with friendly, rounded characters.
</p>

​
Font Scale

Using Tailwind’s default type scale:
ClassSizeLine HeightUsage
.text-xs0.75rem (12px)1remSmall labels
.text-sm0.875rem (14px)1.25remSecondary text
.text-base1rem (16px)1.5remBody text
.text-lg1.125rem (18px)1.75remLarge body
.text-xl1.25rem (20px)1.75remSmall headings
.text-2xl1.5rem (24px)2remSection headings
.text-3xl1.875rem (30px)2.25remPage headings
.text-4xl2.25rem (36px)2.5remHero headings
.text-5xl3rem (48px)1Display text
Type Scale Example
<h1 class="text-5xl font-bold text-theme mb-4">
  Display Heading
</h1>
<h2 class="text-3xl font-semibold text-theme mb-3">
  Page Heading
</h2>
<h3 class="text-xl font-medium text-theme mb-2">
  Section Heading
</h3>
<p class="text-base text-secondary leading-relaxed">
  Body text with comfortable reading size and line height.
</p>
<small class="text-sm text-muted">
  Small supporting text
</small>

​
Font Weights

Baloo 2 Variable supports these weights:
ClassWeightUsage
.font-normal400Body text
.font-medium500Emphasized text
.font-semibold600Headings
.font-bold700Strong emphasis
.font-extrabold800Display text

​
Spacing

Using Tailwind’s default spacing scale (1 unit = 0.25rem = 4px):
ClassSizePixelsUsage
p-2 / m-20.5rem8pxTight spacing
p-4 / m-41rem16pxDefault spacing
p-6 / m-61.5rem24pxComfortable spacing
p-8 / m-82rem32pxGenerous spacing
p-12 / m-123rem48pxSection spacing
p-16 / m-164rem64pxLarge spacing
Spacing Example
<!-- Card with consistent spacing -->
<div class="card-base p-6 space-y-4">
  <h3 class="text-xl font-semibold">Title</h3>
  <p class="text-secondary">Content with vertical rhythm</p>
  <button class="px-4 py-2">Action</button>
</div>

<!-- Grid with gaps -->
<div class="grid grid-cols-3 gap-4">
  <!-- Items -->
</div>

​
Border Radius

Consistent border radius values for rounded corners:
Border Radius Variables
--radius-sm: 8px;      /* Small elements */
--radius-md: 12px;     /* Medium elements */
--radius-lg: 16px;     /* Large elements */
--radius-xl: 20px;     /* Extra large */
--radius-full: 9999px; /* Pills/circles */

Small (8px)

Inline code, small badges
border-radius: var(--radius-sm);

Medium (12px)

Buttons, inputs, nav items
border-radius: var(--radius-md);

Large (16px)

Cards, containers
border-radius: var(--radius-lg);

Extra Large (20px)

Hero cards, featured content
border-radius: var(--radius-xl);

Full (9999px)

Pills, circular avatars
border-radius: var(--radius-full);
Border Radius Examples
<!-- Small radius for inline code -->
<code style="border-radius: var(--radius-sm);" class="bg-glow-primary px-2 py-1">
  inline code
</code>

<!-- Medium radius for buttons -->
<button style="border-radius: var(--radius-md);" class="px-4 py-2 bg-card">
  Button
</button>

<!-- Large radius for cards -->
<div style="border-radius: var(--radius-lg);" class="card-base p-6">
  Card content
</div>

<!-- Full radius for badges -->
<span style="border-radius: var(--radius-full);" class="gt-badge px-3 py-1">
  GT
</span>

​
Shadows

Subtle shadows that adapt to theme:
Shadow Variables
/* Dark mode - more pronounced */
--shadow-sm: rgba(0, 0, 0, 0.1);
--shadow-md: rgba(0, 0, 0, 0.15);
--shadow-lg: rgba(0, 0, 0, 0.2);

/* Light mode - very subtle */
html[data-theme="light"] {
  --shadow-sm: rgba(15, 23, 42, 0.03);
  --shadow-md: rgba(15, 23, 42, 0.05);
  --shadow-lg: rgba(15, 23, 42, 0.08);
}
Shadow Utilities:
src/styles/global.css
.shadow-theme-sm {
  box-shadow: 0 1px 2px var(--shadow-sm);
}

.shadow-theme-md {
  box-shadow: 0 2px 8px var(--shadow-sm);
}

.shadow-theme-lg {
  box-shadow: 0 4px 12px var(--shadow-md);
}
Shadow Examples
<div class="card-base shadow-theme-sm">
  Subtle elevation
</div>

<div class="card-base shadow-theme-md hover:shadow-theme-lg transition-shadow">
  Elevated card with hover effect
</div>

​
Special Effects

​
Glow Effect

Subtle glow for highlighted elements:
Glow Variable
/* Dark mode */
--glow-primary: rgba(73, 151, 208, 0.08);

/* Light mode */
html[data-theme="light"] {
  --glow-primary: rgba(73, 151, 208, 0.05);
}
Glow Example
<div class="bg-glow-primary border border-primary rounded-lg p-4">
  Highlighted content with subtle glow
</div>

​
Gradient Text

Gradient Text Utility
.gradient-text {
  background-image: linear-gradient(to right, var(--text), var(--primary-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
Gradient Text Example
<h1 class="gradient-text text-5xl font-bold">
  Chapinismos
</h1>

​
Gradient Backgrounds

Background Gradients
<!-- Card with gradient -->
<div class="card-with-gradient p-6">
  Content with gradient background
</div>

<!-- Badge with gradient -->
<span class="badge-primary-gradient px-4 py-2 rounded-full text-white">
  Featured
</span>

​
Prose Styles

Markdown content styling:
Prose Styles
.prose {
  color: var(--text-secondary);
  line-height: 1.7;
}

.prose h1, .prose h2, .prose h3 {
  color: var(--text);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose p {
  margin: 1em 0;
}

.prose code {
  background: var(--glow-primary);
  color: var(--primary);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
}

.prose blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 1em;
  font-style: italic;
  color: var(--muted);
}
Prose Example
<article class="prose max-w-3xl mx-auto">
  <h1>Article Title</h1>
  <p>
    Paragraph with <code>inline code</code> and <strong>bold text</strong>.
  </p>
  <blockquote>
    Highlighted quote
  </blockquote>
</article>

​
Animation

Built-in animations:
Animations
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

​
Component Patterns

​
Standard Card

<div class="card-base p-6 shadow-theme-md">
  <h3 class="text-theme text-xl font-semibold mb-3">
    Card Title
  </h3>
  <p class="text-secondary">
    Card content
  </p>
</div>

​
Interactive Card

<a
  href="#"
  class="card-base p-6 shadow-theme-md hover:shadow-theme-lg transition-all duration-200"
>
  <h3 class="text-theme text-xl font-semibold mb-3">
    Clickable Card
  </h3>
  <p class="text-secondary">
    Hover for elevation effect
  </p>
</a>

​
Badge

<span class="gt-badge px-3 py-1 text-sm font-semibold inline-block">
  GT
</span>

​
Accent Box

<div class="accent-box p-4 rounded-lg">
  <p class="text-secondary">
    Important information with left border accent
  </p>
</div>

​
Next Steps

Styling Architecture

Learn how to customize CSS variables and global styles

Tailwind Configuration

Extend Tailwind with custom utilities

Build docs developers (and LLMs) love

Get started for freeTalk to us