InkWell Design System

A comprehensive, scalable interface toolkit built for clarity, consistency, and developer efficiency. Use these guidelines to craft exceptional digital experiences.

Core Principles #

Every interface element in InkWell is guided by four foundational principles that ensure predictability and accessibility across all products.

🎯 Clarity

Interfaces should communicate purpose instantly. Remove ambiguity through precise labeling, hierarchy, and feedback.

🔄 Consistency

Reinforce mental models by reusing patterns, spacing, and component behaviors across every screen.

♿ Accessibility

Meet WCAG 2.1 AA standards. Ensure sufficient contrast, keyboard navigation, and screen reader compatibility.

Color Palette #

Our palette balances brand identity with functional hierarchy. Use semantic colors sparingly for status and actions.

Primary

#6C3CE1

Primary Light

#9B6BFF

Secondary

#FF6B6B

Warning

#FCA311

Success

#10B981

Neutral Dark

#1A1A2E

Background

#F8F9FC

Surface

#FFFFFF

Typography #

We use a fluid type scale optimized for readability across devices. Line heights tighten as font sizes increase.

h1 / 3.5rem / 800

InkWell Design System

h2 / 2.5rem / 700

Build with confidence

h3 / 2rem / 600

Consistent patterns

h4 / 1.25rem / 600

Component variants

body / 1rem / 400

This is the default body text. Used for paragraphs, descriptions, and general content blocks across the platform.

small / 0.875rem / 400

Caption text, metadata, error messages, and secondary information. Use sparingly.

Spacing & Scale #

All spacing values are derived from a 4px base grid. Use these tokens to maintain visual rhythm and alignment.

4px

8px

12px

16px

24px

32px

48px

64px

Components #

Pre-built, accessible UI elements ready for integration. All components respect design tokens and support focus states.

Buttons

Form Inputs

Default Input

Error State

Please enter a valid email address.

Toggle Switch

Cards & Badges

Article Preview

Hover to see elevation and shadow transitions applied via CSS variables.

Technology Trending Verified Draft

Design Tokens #

Reference implementation of our core CSS custom properties. Drop these into your root stylesheet.

:root {
  --ink-purple: #6C3CE1;
  --ink-purple-dark: #5228C0;
  --ink-red: #FF6B6B;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(26,26,46,0.06);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}