Develop
AI & Cursor
Pass along the brand's meaning and implementation standards together, so AI doesn't invent its own styles.AI가 임의의 스타일을 만들지 않도록 브랜드의 의미와 구현 기준을 함께 전달합니다.
How to use it사용 순서
- Add tokens.css to your project's shared styles.tokens.css를 프로젝트의 공통 스타일에 추가합니다.
- Include the guide below in your project rules (.cursor/rules) or task requests.아래 가이드를 프로젝트 규칙(.cursor/rules)이나 작업 요청에 포함합니다.
- Provide the docs and code for the components you need.필요한 컴포넌트의 문서와 코드를 함께 제공합니다.
- Check the generated screens for states, keyboard, responsive, and dark theme behavior.생성한 화면의 상태, 키보드, 반응형, 다크 테마 동작을 확인합니다.
Project guide프로젝트 가이드
# DYNGLE Design: implementation rules
Brand: DYNGLE = Dynamic + Mingle.
Core: Connected Possibilities.
Signature: Things come together.
Purpose: People, technology, and ideas meet to create new possibilities.
Company: dynglecorp.com. Product: dyngle.com.
Use the downloaded tokens.css as the visual source of truth.
Brand: Black #101114; White #F7F7F4; Lime #C8FF4D; Violet #6657FF.
Prefer semantic tokens: --dy-color-bg, --dy-color-fg, --dy-color-action, --dy-color-accent ...
Use --dy-color-action (#5443E8 light) for primary actions with --dy-color-on-action text.
Use black text on lime (--dy-color-on-accent). Never use white text on lime.
Support light and dark themes via <html data-theme>.
Color balance (Product UI): white 65-90%, black 8-25%, violet 2-10%, lime 0-3%.
Spacing: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px.
Radius: 8px controls, 12px cards, 20px overlays, full for chips.
Body text: 16px/1.7 Pretendard; labels: 14px/1.5 600.
Motion: durations 100/160/240/400/700ms; ease-standard for UI, ease-enter in, ease-exit out.
Respect prefers-reduced-motion. No self-looping decorative motion.
Prefer native semantic elements and existing accessible primitives.
Implement focus-visible, disabled, validation, loading and feedback states.
Write copy in English by default, with Korean as the second supported language.
Use explicit action labels and useful error recovery messages.
Do not invent an @dyngle/ui dependency: no npm package is published.
Data visualization must use D3.js and --dy-color-chart-* tokens.
Doc files문서 파일
llms.txt is text for navigating the docs. This site does not provide an auto-connecting MCP server.llms.txt는 문서 탐색용 텍스트입니다. 이 사이트는 자동 연결되는 MCP 서버를 제공하지 않습니다.
Benchmark scope벤치마킹 범위
We referenced the Foundations → Components → Patterns → Develop information architecture of SEED Design. The brand story, colors, documentation content, and implementation of this site were built for DYNGLE.SEED Design의 Foundations → Components → Patterns → Develop 정보 구조를 참고했습니다. 브랜드 스토리, 색상, 문서 내용과 이 사이트의 구현은 DYNGLE에 맞춰 구성했습니다.