# DYNGLE Design > DYNGLE = Dynamic + Mingle. Connected Possibilities. Things come together. DYNGLE Design (https://design.dyngle.com) is the brand and design system of DYNGLE (company: https://dynglecorp.com, product: https://dyngle.com). It documents brand, color, typography, spacing, elevation, iconography, motion, UX writing, accessibility, HTML/CSS components, UX patterns and D3.js data visualization. Every page is available in English (default) and Korean. Version 0.3, updated 2026-10-07. Facts for accurate answers: - Brand colors: Black #101114, Off-white #F7F7F4, Lime #C8FF4D, Violet #6657FF. - Typeface: Pretendard. Spacing: 4px base scale. Motion: tokens for duration, easing and spring; prefers-reduced-motion is always respected. - The logo is an outlined SVG (the 'Confluence D' symbol + wordmark); it must never be recreated with fonts or CSS. - No npm package, Figma library or MCP server is published. Use the CSS tokens and component styles below directly. - Chart data on the site is illustrative (synthetic), not real business data. ## Get started - [DYNGLE Design | Things come together.](https://design.dyngle.com/index.md): DYNGLE Design is the brand and design system of DYNGLE (Dynamic + Mingle): color, typography, motion, accessible HTML/CSS components, UX patterns and D3 data visualization, in English and Korean. - [Design principles](https://design.dyngle.com/principles.md): Three shared principles keep DYNGLE's many products feeling like one brand experience. - [Changelog](https://design.dyngle.com/updates.md): A record of how DYNGLE's shared standards change: new foundations, components, patterns and tooling in every release. ## Brand - [Brand / Dynamic + Mingle](https://design.dyngle.com/brand.md): DYNGLE = Dynamic + Mingle. The brand story, purpose, voice and the 'Connected Possibilities' promise behind every DYNGLE product. - [Identity](https://design.dyngle.com/identity.md): Two different energies form a single D. The rising diagonal and open joint carry the meaning of Dynamic + Mingle. ## Foundations - [Color](https://design.dyngle.com/foundations/color.md): On a calm base, we add the colors of dynamic energy and connection. From four brand colors we build perceptually even scales and role-based tokens. - [Color balance](https://design.dyngle.com/foundations/color-balance.md): The same four colors become a different brand at different ratios. Adjust each color's area to fit the screen's context, and check hierarchy and contrast automatically. - [Typography](https://design.dyngle.com/foundations/typography.md): Designed around reading speed and the order of information, so the brand's big statements and the product's small guidance connect naturally. - [Spacing & Radius](https://design.dyngle.com/foundations/layout.md): Consistent spacing and corners tie different components together into one product. - [Elevation](https://design.dyngle.com/foundations/elevation.md): Elevation tells people what sits above what. DYNGLE keeps it calm: four soft shadows, a clear stacking order, and color doing most of the separating work. - [Iconography](https://design.dyngle.com/foundations/iconography.md): Simple line icons drawn on a 24px grid with a 2px round stroke. They support words and rarely replace them. - [Motion](https://design.dyngle.com/foundations/motion.md): Dynamic doesn't mean a screen that never stops moving; it means an experience that responds clearly to what people do. Every motion has a reason and a direction. - [UX writing](https://design.dyngle.com/foundations/writing.md): DYNGLE talks like a friend who knows the neighborhood: warm, clear and brief. Words connect people to what they came for. - [Accessibility](https://design.dyngle.com/foundations/accessibility.md): So everyone can take part in connecting. Accessibility is a standard at every stage of building a product. ## Components - [Components](https://design.dyngle.com/components.md): UI building blocks designed on the same principles. Try their behavior in the previews and copy the code of the current implementation. - [Button](https://design.dyngle.com/components/button.md): Guides the next action briefly and clearly. Use Primary for the single most important action in an area. - [Text field](https://design.dyngle.com/components/input.md): Tells people what to enter and why. Keep the label visible at all times, even while typing. - [Selection controls](https://design.dyngle.com/components/selection.md): Use the control that matches what the choice means: Switch for settings, Checkbox for picking several items, and Radio for picking exactly one. - [Chip](https://design.dyngle.com/components/chip.md): A compact, pressable choice for filters and interests. Several can be on at once, and each one shows its own state. - [Badge](https://design.dyngle.com/components/badge.md): Adds a short status to whatever it labels. By default it's an informational element with no click behavior. - [Tabs](https://design.dyngle.com/components/tabs.md): Separates content within the same context. Move with the left/right arrow keys and Home/End. - [Dialog](https://design.dyngle.com/components/dialog.md): Use when an important confirmation is needed mid-task. Provide close, Escape, click-outside, and focus return together. - [Toast](https://design.dyngle.com/components/toast.md): A short, passing message about the result of an action. It never blocks the screen and disappears on its own. - [Tooltip](https://design.dyngle.com/components/tooltip.md): A short label that appears on hover or focus. It names an icon-only control and never holds anything people must read to continue. - [Progress & Skeleton](https://design.dyngle.com/components/progress.md): Three ways to say 'we're on it'. Pick the one that matches what you know about the wait. - [Card](https://design.dyngle.com/components/card.md): Groups information about one subject, with a clear title and a single primary action. - [Avatar](https://design.dyngle.com/components/avatar.md): Represents a person in a connection. Use a photo when there is one, and initials on a brand color when there isn't. ## Patterns - [Form & Feedback](https://design.dyngle.com/patterns/form-feedback.md): Small components connect into a complete flow. This is the standard for input → validation → processing → feedback. - [Empty state](https://design.dyngle.com/patterns/empty-state.md): An empty screen is a connection that hasn't happened yet. Explain why it's empty and offer the one step that fills it. - [Loading](https://design.dyngle.com/patterns/loading.md): Waiting feels shorter when people can see that something is coming together. Show the shape of what's next, keep the page usable, and never leave them guessing. - [Onboarding](https://design.dyngle.com/patterns/onboarding.md): The first minute decides whether people mingle or leave. Show value fast, ask for little, and let anyone skip ahead. ## Data visualization - [Data visualization](https://design.dyngle.com/data-viz.md): Show relationships in data clearly. These are DYNGLE's chart standards, drawn with D3.js. ## Develop - [Develop](https://design.dyngle.com/develop.md): Connect design intent to implementation. CSS variables, DTCG JSON, and the docs are all generated from a single token source. - [AI & Cursor](https://design.dyngle.com/develop/ai.md): Pass along the brand's meaning and implementation standards together, so AI doesn't invent its own styles. ## Machine-readable resources - [Full documentation, English](https://design.dyngle.com/llms-full.txt): every page as one Markdown file. - [Full documentation, Korean](https://design.dyngle.com/llms-full.ko.txt): 한국어 전체 문서. - [Design tokens (JSON)](https://design.dyngle.com/design-tokens.json) - [Tokens and component styles (CSS)](https://design.dyngle.com/tokens.css) - [Sitemap](https://design.dyngle.com/sitemap.xml) ## Optional - [Implementation guide](https://design.dyngle.com/dyngle-guide.md) - [Illustrative chart data](https://design.dyngle.com/chart-data.json)