# Mint Design System

Live reference: https://mint-design.izlata.ru/

This folder is a donor design system for future small SaaS-style apps and internal tools. Use it as a visual and code reference when a new app should look soft, friendly, airy, and product-like.

## What To Use

- `index.html` - live showcase page for the design system.
- `saas-design-system.html` - original source showcase.
- `tokens/mint-tokens.css` - reusable CSS variables for colors, radius, shadows, spacing, and typography.
- `templates/mint-app-starter.html` - small app starter layout with sidebar, toolbar, panels, table, tags, and responsive behavior.
- `prompts/use-mint-design-system.md` - prompt Olga can paste into Codex when starting a new app in this style.

## Visual Direction

The style is a calm mint SaaS interface:

- soft aqua and mint as primary navigation and active states;
- peach, rose, lemon, and sky as secondary accents;
- white cards on a pale cloud background;
- compact app panels instead of marketing landing pages;
- rounded corners around `8px`;
- Inter / Segoe UI / system sans-serif typography;
- practical first screen with real controls, metrics, lists, and workflow elements.

## App Rules

When building a future app from this donor:

- Start with a real application screen, not a landing page.
- Use a persistent sidebar on desktop and a compact top navigation on mobile.
- Keep buttons, inputs, cards, tabs, tags, tables, and metric cards consistent with the tokens.
- Keep demo content fictional unless Olga provides real client data.
- Check desktop around `1280px` and mobile around `390px`.
- Make sure there is no horizontal scroll, clipped text, or overlapping navigation.

## Deployment

The public site is served as static files from:

`/srv/apps/mint-design.izlata.ru`

Nginx serves the domain:

`mint-design.izlata.ru`