Kiinara Design Guidelines

Simple, consistent design principles for the Kiinara Starter Kit using Open Sans for headings and Inter for body text.

Typography

Headings - Open Sans

H1 - Large Title

font-heading text-5xl font-bold

H2 - Section Title

font-heading text-3xl font-bold

H3 - Subsection

font-heading text-xl font-semibold

H4 - Component Title

font-heading text-lg font-semibold

Body Text - Inter

Large body text for emphasis and important content that needs to stand out from regular text.

font-body text-lg

Regular body text for most content, paragraphs, and general reading. This is the standard size for body text.

font-body text-base

Small text for captions, labels, and secondary information that supports the main content.

font-body text-sm text-gray-600

Extra small text for metadata, timestamps, and minimal supporting text.

font-body text-xs text-gray-500

Colors

Pattens Blue - Primary Brand

Light

100

Subtle

200

Accent

400

Primary

500

Hover

600

Dark

900

Neutral Grays

white
50
100
200
400
600
900
black

Color Usage

Backgrounds
  • • Page: gray-50
  • • Cards: white
  • • Primary: pattens-blue-500
  • • Dark: black
Text
  • • Primary: gray-900
  • • Secondary: gray-600
  • • Muted: gray-400
  • • Brand: pattens-blue-600
Interactive
  • • Links: pattens-blue-500
  • • Hover: pattens-blue-600
  • • Borders: gray-200
  • • Focus: pattens-blue-400

Spacing

Standard Scale

1 (4px)Minimal spacing
2 (8px)Small elements
4 (16px)Default padding/margin
6 (24px)Medium spacing
8 (32px)Large spacing
12 (48px)Section spacing
16 (64px)Large sections

Spacing Guidelines

Component Spacing
  • • Button padding: px-4 py-2
  • • Card padding: p-6
  • • Input padding: px-3 py-2
  • • Container: px-6
Layout Spacing
  • • Sections: mb-12 or mb-16
  • • Paragraphs: mb-4
  • • Lists: space-y-2
  • • Grids: gap-4 or gap-6

Quick Reference

Typography Classes

font-heading - Open Sans for headings

font-body - Inter for body text

text-5xl font-bold - Large titles

text-3xl font-bold - Section titles

text-xl font-semibold - Subsections

text-base - Body text

Common Patterns

bg-white p-6 rounded-lg - Cards

text-gray-900 - Primary text

text-gray-600 - Secondary text

bg-pattens-blue-500 - Primary buttons

hover:bg-pattens-blue-600 - Button hover

space-y-4 - Vertical spacing