InkWell Style Guide

A comprehensive design system for building consistent, accessible, and beautiful digital experiences across all platforms.

✒ Brand Identity

InkWell represents clarity, creativity, and thoughtful communication. Our visual language balances modern minimalism with warm, inviting tones.

Usage Guidelines
  • ✓ Maintain minimum 24px clear space around the logo
  • ✓ Primary logo on light backgrounds only
  • ✓ Wordmark must never be stretched or distorted
  • ✓ Always use approved color combinations
Brand Voice

Clear, insightful, and approachable. We prioritize substance over hype, expertise over trends, and readability over decoration. Every touchpoint should feel like a conversation with a knowledgeable friend.

🎨 Color System

Our palette is built around a deep violet primary, balanced with warm secondary and accent tones. All colors meet WCAG AA contrast requirements.

Primary

#6C3CE1

Primary Dark

#5228C0

Secondary

#FF6B6B

Accent

#FCA311

Dark / Text

#1A1A2E

Gray / Muted

#8892B0

Gray Light

#E2E8F0

Background

#F8F9FC

Aa Typography

System font stack for optimal performance and native feel. Headings use extra bold weight for impact; body text prioritizes readability.

Display / H1
The Future of Digital Storytelling
font-size: 2.5remweight: 800line-height: 1.15
Heading / H2
Design Principles & Guidelines
font-size: 1.75remweight: 700line-height: 1.3
Heading / H3
Component Variants
font-size: 1.25remweight: 600line-height: 1.4
Body / Paragraph
Body text should maintain high contrast against backgrounds, with comfortable line lengths (60-75 characters) and generous line height for extended reading sessions.
font-size: 1remweight: 400line-height: 1.6
Caption / Metadata
Published Dec 15, 2024 · 8 min read
font-size: 0.85remweight: 500line-height: 1.5

📐 Spacing & Layout

Based on an 8px grid system for consistent rhythm and alignment across all breakpoints.

XS: 4px
SM: 8px
MD: 16px
LG: 24px
XL: 32px
2XL: 48px

🧩 UI Components

Pre-built, accessible components following our design tokens. All states (default, hover, focus, disabled) are included.

Buttons
Form Elements
Badges & Tags
Technology Design Business Verified
Notifications & Alerts
ℹ️ Informational message for user guidance.
✅ Successfully saved to your collection.
⚠️ Please verify your subscription details.
❌ Failed to process request. Try again.
Content Cards
[ 16:9 Image ]

Article Title

Brief excerpt describing the article content with key insights.

[ 16:9 Image ]

Guide Title

Step-by-step tutorial covering essential techniques and best practices.

[ 16:9 Image ]

Case Study

Real-world implementation results with measurable outcomes.

💻 Code Standards

CSS Variables and implementation patterns for developers.

Design Tokens (CSS Variables)
/* Colors */ --color-primary: #6C3CE1; --color-secondary: #FF6B6B; --color-accent: #FCA311; --color-dark: #1A1A2E; --color-bg: #F8F9FC; /* Spacing */ --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* Borders */ --radius-md: 12px; --radius-xl: 24px; --radius-full: 9999px;
Implementation Notes
  • • Always reference tokens instead of hardcoding values
  • • Use semantic HTML elements before applying utility classes
  • • Maintain focus-visible states for keyboard navigation
  • • Test contrast ratios using tools like WebAIM or Stark
  • • Mobile-first responsive breakpoints: 640px, 1024px, 1280px
"}