Foundations / New
Color balance
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.같은 네 가지 색도 비율이 다르면 다른 브랜드가 됩니다. 화면의 맥락에 맞게 색의 면적을 조정하고, 위계와 대비를 자동으로 검증하세요.
What each color does색마다 맡은 역할
The larger the area, the calmer it reads; the smaller, the stronger it works.면적이 넓을수록 차분하고, 좁을수록 강하게 작동합니다.
The space for reading. The default background of product screens, used the most.정보를 읽는 공간. 제품 화면의 기본 바탕이며 가장 넓게 씁니다.
Type, structure, and strong inverted fields. It anchors the weight of brand areas.글자와 구조, 강한 반전 색면. 브랜드 영역에서 무게를 잡습니다.
Large fields make the brand memorable. For actions, use --dy-color-action.넓은 색면으로 브랜드를 기억하게 합니다. 행동 색은 --dy-color-action.
Use the least, only where it matters most. As its area grows, the emphasis disappears.가장 적게, 가장 중요한 곳에만. 면적이 커지면 강조가 사라집니다.
Balance playground
Pick a context and adjust the ratios with the sliders. Changing one color redistributes the rest proportionally, so the total is always 100%. The green band shows the recommended range.맥락을 고르고 슬라이더로 비율을 조정해 보세요. 한 색을 바꾸면 나머지가 비례해 재분배되어 합계는 항상 100%입니다. 초록 띠는 권장 범위입니다.
Things come
together.
- A good balance for Brand / MarketingBrand / Marketing에 잘 맞는 균형이에요Every color is within range, and the accent/signature hierarchy holds.모든 색이 권장 범위 안에 있고, 강조와 서명의 위계가 유지됩니다.
Recommended ranges by context맥락별 권장 범위
| Context맥락 | Living White | DYNGLE Black | Bio Violet | Life Lime |
|---|---|---|---|---|
| Product UI Product screens that need focus: browsing, input, checkout정보 탐색, 입력, 결제처럼 집중이 필요한 제품 화면 | 65-90% | 8-25% | 2-10% | 0-3% |
| Brand / Marketing Brand intros, landing pages, docs home브랜드 소개, 랜딩, 문서 메인 | 40-65% | 15-35% | 8-22% | 3-10% |
| Campaign Short, bold impressions: posters, social, events포스터, 소셜, 이벤트처럼 짧고 강한 인상 | 10-35% | 20-40% | 25-45% | 10-25% |
Automatic checks자동 진단 규칙
| Rule규칙 | Threshold기준 | Why이유 |
|---|---|---|
| Recommended range권장 범위 | Points off per 1% outside the context's range맥락별 범위 이탈 1%당 감점 | So screens in the same context leave the same impression같은 맥락의 화면이 같은 인상을 갖도록 |
| Lime ceiling라임 상한 | Fails above 25%25% 초과 시 실패 | When the accent spreads, the emphasis disappears and attention scatters.강조 색이 넓어지면 강조가 사라지고 시선이 분산됩니다. |
| Hierarchy위계 | Product/brand: lime > violet x 1.25제품, 브랜드에서 라임 > 바이올렛 x 1.25 | The signature (violet) and accent (lime) swap places.서명(바이올렛)과 강조(라임)의 순서가 뒤바뀝니다. |
| Breathing room휴식 공간 | White + Black < 40% | There isn't enough neutral background for reading.텍스트를 읽을 중립 바탕이 부족해집니다. |
| Brand recognition브랜드 인지 | Violet + Lime < 3% | There aren't enough cues that this is DYNGLE.뒹글임을 알아볼 단서가 부족합니다. |
Focus a screen's lime on its single most important point of connection. When you need a large color field, use violet.한 화면의 라임은 가장 중요한 연결 지점 하나에 집중합니다. 넓은 색면이 필요하면 바이올렛을 사용합니다.
Don't place lime and violet side by side at equal area, or fill the background of an information-heavy screen with brand color.라임과 바이올렛을 같은 면적으로 나란히 두거나, 정보가 많은 화면의 바탕을 브랜드 색으로 채우지 않습니다.
Using it in code코드에서 사용하기
Press 'Copy as CSS variables' in the tool to copy the current ratio in the format below. Attach it to design reviews and screen specs.도구에서 'CSS 변수로 복사'를 누르면 현재 비율이 아래 형식으로 복사됩니다. 디자인 리뷰와 화면 명세에 함께 첨부하세요.
/* DYNGLE color balance, Brand, Marketing, score 100 */
--dy-balance-white: 55%;
--dy-balance-black: 25%;
--dy-balance-violet: 14%;
--dy-balance-lime: 6%;