Guides

These guides cover integration, design language, best practices, and reference materials that apply across the design system. Whether you're getting started with Tailwind, learning our design principles, ensuring accessibility, or understanding our color system, you'll find what you need here.

---

Setup & Integration

Tailwind CSS

Learn how Tailwind CSS relates to the design system — what's pre-compiled and available without setup, when you might want to install Tailwind in your project, and how to configure it. Whether you're using the pre-compiled stylesheet or building your own Tailwind setup, this guide explains the trade-offs and shows you how to work effectively with both approaches.

---

Design Language & Foundations

Design Principles

The core principles that guide every decision in the LOKE Design System: consistency, modularity, accessibility, responsiveness, performance, clarity, visual hierarchy, and feedback. Read this to understand the why behind the system's design, and to ensure your interfaces align with LOKE's design philosophy. Includes good and bad examples for each principle.

Color System

Explore the design system's semantic color tokens, usage guidelines, and interactive palette preview. Colors automatically adapt between light and dark modes. This guide explains how to choose colors by function (not appearance), access tokens via CSS custom properties or Tailwind classes, and maintain accessible contrast ratios throughout your interface.

Brand

Visual identity assets and branding guidelines for LOKE — logos, wordmarks, and approved brand usage. Use this when you need official brand assets for marketing, product, or communication materials.

---

Best Practices

Accessibility Guide

Build interfaces that work for everyone, including people with disabilities. This guide covers keyboard navigation, screen reader support, color contrast, and testing strategies. Includes a practical checklist, common issues and fixes, and code examples showing accessible and inaccessible patterns for buttons, forms, images, and dialogs.

---

Reference & Contribution

Component Reference

Full API reference for all design system components. Look here when you need detailed prop documentation, examples, and advanced usage patterns for any component.

Contribution Guide

Want to improve the design system? This guide covers the contribution workflow, code standards, testing requirements, and release process. Whether you're adding a new component, fixing a bug, or updating documentation, start here to understand how LOKE's design system is maintained and evolved.