Lingo design skill for AI agents

Overview

The Lingo design skill is a comprehensive, implementation-ready design system guideline built for AI agents. It encodes the entire visual identity, component specifications, and interaction standards of the Lingo brand into a single SKILL.md file that any AI coding assistant can follow.

Lingo is a Duolingo-inspired design style that combines minimal layouts with bright colors, rounded shapes, and friendly illustrations to create an engaging and approachable interface. It focuses on clarity and simplicity while adding personality that makes the product feel welcoming and interactive. Every rule in this skill file is anchored to a concrete token, threshold, or example — no ambiguous adjectives.

Style foundations

The Lingo design system is built on a bold and playful visual style with carefully defined foundations.

Typography

The system uses Nunito as both the primary body and display font, giving the entire interface a consistently rounded, friendly character that reinforces the approachable personality. JetBrains Mono is used for code and monospaced elements. The scale follows a progression of 12 / 14 / 16 / 20 / 24 / 32 pixels, with font weights from 400 to 900 available for precise typographic control.

Color palette

The system uses semantic tokens across five palettes — primary, neutral, success, warning, and danger — so components reference tokens rather than raw hex values. The signature green primary paired with a playful purple secondary creates the distinctive Lingo look: bright, rewarding, and immediately recognizable.

Shadows and depth

A defining characteristic of Lingo is its tactile, 3D-like depth. Interactive elements use bottom borders (e.g., border-b-4) or soft drop shadows to create a pressable, physical feel. Buttons appear raised and depress on click, cards lift off the page, and active states give clear tactile feedback.

Spacing

All spacing follows a 4 / 8 / 12 / 16 / 24 / 32 pixel scale to maintain a consistent vertical and horizontal rhythm across every component.

Component families

The Lingo skill covers a wide range of component families, organized into logical groups:

• Inputs and forms — buttons, inputs, textareas, selects/comboboxes, checkboxes, radios, switches, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges/chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars/headers, tabs, command palette
• Overlays — modals, drawers/sheets, tooltips, popovers/menus
• Feedback — alerts/toasts, notifications center, progress indicators, skeletons, empty states
• Pages — authentication screens, settings pages, onboarding, documentation layouts, pricing blocks, search
• Visualization — data visualization wrappers, carousels, accordions

Each component family includes defined states (default, hover, focus-visible, active, disabled, loading, error), interaction behavior for keyboard, pointer, and touch, explicit token usage, and responsive behavior with edge cases.

Accessibility

This skill targets WCAG 2.2 AA compliance with keyboard-first interactions and visible focus states. Every accessibility statement in the file is testable in implementation. When conflicts arise between aesthetics and accessibility, accessibility wins.

How to use this skill with AI agents

Pull the skill file into your project with a single command:

npx typeui.sh pull lingo

This saves the SKILL.md file directly into your project. The skill file is a structured markdown document that tells any AI agent exactly how to build interfaces following the Lingo design system — which colors to use, how typography should scale, what states every component needs, and how spacing and depth should behave.

Once the file is in your project, you can use it with any AI coding tool — Claude, ChatGPT, Cursor, Windsurf, Copilot, or any other agent that accepts context files, system prompts, or knowledge documents. Copy it into a project knowledge base, reference it as context in a prompt, upload it as a knowledge file, or drop it into a rules directory. The structured format ensures consistent results regardless of which AI platform you use.

Design principles

The Lingo skill enforces three core rules:

1. Prefer semantic tokens over raw values — always reference design tokens instead of hardcoded colors, sizes, or spacing
2. Preserve visual hierarchy — maintain clear distinctions between headings, body text, and supporting elements
3. Keep interaction states explicit — every interactive element must define its full state set

And six strict anti-patterns to avoid:

1. No low contrast text — all text must meet WCAG AA contrast ratios
2. No inconsistent spacing rhythm — every measurement must align to the spacing scale
3. No decorative motion without purpose — animation should communicate, not distract
4. No ambiguous labels — interactive elements must have clear, descriptive labels
5. No mixed visual metaphors — stick to the Lingo language, don't blend competing styles
6. No inaccessible hit areas — touch targets must be large enough for comfortable interaction

Writing tone

All content generated with this skill follows a concise, confident, and helpful tone. Labels are clear. Instructions are direct. There is no unnecessary jargon or decoration.