Nana Design Guideline

Nana Design Guideline is the single source of truth for building consistent, brand-aligned Nana experiences.

It defines colors, typography, layout principles, and usage rules that must be followed across all Nana products, including AI-assisted designs and implementations.

What This Is

A human-readable guide for how Nana should look and feel
A foundation for AI-assisted design and development
A shared language between design, product, and engineering

How to Use This Guideline

Use this guideline before designing or building any UI for Nana
When using AI tools, always reference the Nana Design System files
Follow the defined tokens and rules exactly — do not invent styles

Files Included

Design Tokens (JSON)
Contains colors, typography, spacing, and other system values.
Design Rules (Markdown)
Explains how and when to use those tokens.

Together, these files ensure consistency across human and AI-generated work.

Core Principles

Green-led brand: Ocean Green is the primary color and should visually dominate.
Consistency over creativity: Follow tokens strictly.
Mobile-first: Design for mobile interactions first.
Clarity and restraint: Simple, calm, and functional UI.

Versioning

This guideline is versioned and will evolve over time.

Current version: v0.0.3

Always use the latest version when starting new work.

One-line Reminder

Use Nana Design System as the single source of truth for all design and AI-assisted work.

Recommended Base Instruction (Copy & Paste)

Use Nana Design System v0.0.3.

Follow all rules in:
nana-ds-llm-rules-v0.0.3.md

Use design tokens only from:
nana-ds-llm-tokens-v0.0.3.json

Ocean Green must be the primary color.
Design mobile-first.
Do not introduce new colors, fonts, or spacing.