# DYNGLE Design / v0.2

## Brand
DYNGLE = Dynamic + Mingle. Dynamic means evolving energy. Mingle means people, technology and ideas naturally connecting. Core: Connected Possibilities. Signature: Things come together. Purpose: 사람, 기술, 아이디어가 만나 새로운 가능성을 만든다.
Company: dynglecorp.com. Service: dyngle.com. Context: Bio, Wellness, Life.

## Visual rules
Use tokens.css as the source of truth.
- Black #101114; Living White #F7F7F4; Life Lime #C8FF4D; Bio Violet #6657FF.
- Semantic action #5443E8 with white text. Lime always uses black text.
- Spacing 4, 8, 12, 16, 24, 32, 48px.
- Radius 8px controls, 12px cards, 20px overlays.
- Body 16px/1.65, labels 14px/1.5, caption 12px/1.5.
- System sans-serif; no externally loaded font.
- Small UI state transitions 160ms. Respect prefers-reduced-motion.

## Implementation
1. Copy tokens.css into the project and import it once.
2. Use dy-button, dy-input, dy-label, dy-hint, dy-badge, dy-switch, dy-check for base controls.
3. Keep focus-visible, native semantics, input labels and accessible descriptions.
4. Use existing accessible primitives or native dialog.showModal for overlays.
5. Tabs require role, aria attributes, arrow/Home/End keys, and focus management.
6. Validate before confirming success. Preserve inputs on errors.
7. Write concise, explicit Korean action labels.
8. Test responsive behavior and keyboard interaction on actual product screens.

No @dyngle/ui package is published; do not invent this dependency. The source files app.js and styles.css include documentation-site demos, not a standalone React library. The logo SVG is a first concept, not a finalized trademark asset.

## Cursor task template
Implement the requested screen using the DYNGLE tokens and principles above. Explain which existing components are reused. Use semantic HTML, 16px body text, role-based colors, and the shared spacing scale. Include loading, disabled, focus and validation states when relevant. Do not add speculative workflows. Verify keyboard operation and responsive layout.

## v0.2 brand surfaces and visualization
Use the outlined SVG assets in assets/. Do not recreate the logo using text or CSS. Main and Brand pages use large full-width typography, lime/violet/black sections and user-triggered symbol separation. Documentation uses a branded sidebar and chapter hero while preserving text readability. Use D3.js for all data visualization; v7.9.0 is included in vendor/. data-viz.js implements accessible line/bar examples with synthetic data.