Timeless design foundations.

틀 (Teul) is the Korean word for frame, mold, or pattern—a foundational structure that shapes what comes next. In Taekwondo, the forms are called Tul. In design, it's the framework that gives your work structure.

Teul brings together three worlds:

• Sanzo Wada's color combinations — 159 normalized colors used across 348 combinations from 1930s Japan
• Werner's Nomenclature of Colours — Patrick Syme's 110-color 1821 second edition, adapted from Werner's nomenclature
• Color-system modes — Exact Radix Colors pinned to @radix-ui/colors 3.0.0, source-preserving Teul Generated scales, and blocking WCAG-constrained semantic tokens

The result: historically sourced color relationships, clearly labeled digital approximations, and modern design tools. Generated systems should be validated for their intended color pairings and use cases.

Browse two historically sourced color collections represented by digital approximations:

Sanzo Wada — 159 normalized colors used across 348 combinations. Bundled sRGB values are digital approximations based on modern Seigensha CMYK recipes.

Werner's Nomenclature — Patrick Syme's 1821 second edition adapts Werner's nomenclature into 110 colors with references from nature. Teul independently transcribes the public-domain edition and reproducibly samples the Getty scan's aged painted swatches.

Turn any palette into a complete design system:

• Exact Radix Colors — selects the closest unmodified, versioned Radix family
• Teul Generated — preserves the selected source color and reports tested structural and contrast guarantees
• WCAG-Constrained Tokens — derives semantic tokens and blocks output unless every declared WCAG 2.2 color pairing passes
• 12-step scales for each color role (primary, secondary, tertiary, accent, neutral)
• Semantic tokens — backgrounds, borders, interactive states, text colors
• Light and dark modes generated automatically
• Usage proportions — guidance on how to balance your palette
• Export options — CSS variables, Tailwind config, JSON

WCAG-Constrained Tokens guarantees the declared semantic color-pairing policy. It does not claim that a complete design or product is universally WCAG conformant; full conformance also depends on content, semantics, keyboard behavior, focus, media, interactions, and complete user flows.

Swiss-inspired modern grid adaptations:

• 4, 6, 8, and 12-column presets
• Modular grids with rows and columns
• Uniform square Figma grids for spacing
• Save and reuse custom configurations

1. Open Figma Desktop
2. Go to Plugins → Browse plugins in Community
3. Search "Teul"
4. Click Install

Generate a color system:

1. Browse Wada or Werner colors
2. Find a combination you like
3. Click "System" to open the generator
4. Assign roles and generate
5. Export to your codebase or create Figma frames

Apply a grid:

1. Select a frame
2. Switch to Grids tab
3. Pick a preset
4. Apply

Requires Node.js 22 or 24 and npm 10.9.8.

git clone https://github.com/pauljunbear/Teul.git
cd Teul
npm ci
npm run dev

Import in Figma: Plugins → Development → Import plugin from manifest

Sanzo Wada — Modern Seigensha CMYK recipes, converted to sRGB by dictionary-of-colour-combinations, which credits Dain M. Blodorn Kim's original digital compilation.

Werner's Nomenclature of Colours — Patrick Syme's 1821 second edition, adapted from Werner's nomenclature; independently transcribed and sampled from the Getty Research Institute public-domain scan.

Radix UI Colors — Exact Match data pinned to @radix-ui/colors 3.0.0.

Teul's plugin code is MIT-licensed under LICENSE. Bundled libraries, source data, and third-party rights retain their own terms; see THIRD_PARTY_NOTICES.md and the source and provenance ledger. Werner's independent derivation is documented in docs/WERNER_DERIVATION.md, with source/display text differences pinned in scripts/werner-sampling/transcription-audit.json.