GYEON
Premium ceramic coatings and paint protection film brand serving automotive, marine, and aerospace markets. Established 2013, known for Q² technology innovation and professional-grade car care.
Colors
surface#ffffff
surface-dim#f3f3f3
surface-bright#ffffff
surface-container-lowest#edf0f8
surface-container-low#f5f7fc
surface-container#edf0f8
surface-container-high#e8ecf5
surface-container-highest#dce2f0
on-surface#323857
on-surface-variant#6b7280
inverse-surface#1e2742
inverse-on-surface#f3f3f3
outline#9ca3af
outline-variant#d1d5db
surface-tint#de3f7d
primary#de3f7d
on-primary#ffffff
primary-container#f5d5e5
on-primary-container#8b1f4a
inverse-primary#ff6fa3
secondary#188ef4
on-secondary#ffffff
secondary-container#d4e8ff
on-secondary-container#0d3a7a
tertiary#ffd024
on-tertiary#1e1a00
tertiary-container#fff5cc
on-tertiary-container#664d00
error#cf2e2e
on-error#ffffff
error-container#f9dedc
on-error-container#8b0000
primary-fixed#f5d5e5
primary-fixed-dim#de3f7d
on-primary-fixed#3d0d24
on-primary-fixed-variant#8b1f4a
secondary-fixed#d4e8ff
secondary-fixed-dim#188ef4
on-secondary-fixed#001a4a
on-secondary-fixed-variant#0d3a7a
tertiary-fixed#fff5cc
tertiary-fixed-dim#ffd024
on-tertiary-fixed#3d3200
on-tertiary-fixed-variant#664d00
background#ffffff
on-background#1e2742
surface-variant#e8ecf5
Typography
- display
- fontFamily: GT America Compressed · fontSize: 70px · fontWeight: 700 · lineHeight: 78px · letterSpacing: -0.04em
- headline-lg
- fontFamily: GT America Compressed · fontSize: 48px · fontWeight: 700 · lineHeight: 56px · letterSpacing: -0.02em
- headline-md
- fontFamily: GT America Compressed · fontSize: 32px · fontWeight: 700 · lineHeight: 40px · letterSpacing: -0.01em
- title-lg
- fontFamily: Open Sans · fontSize: 24px · fontWeight: 600 · lineHeight: 32px
- body-lg
- fontFamily: Open Sans · fontSize: 18px · fontWeight: 400 · lineHeight: 28px
- body-md
- fontFamily: Open Sans · fontSize: 15px · fontWeight: 400 · lineHeight: 24px
- label-md
- fontFamily: Open Sans · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
- label-sm
- fontFamily: Open Sans · fontSize: 12px · fontWeight: 600 · lineHeight: 16px · letterSpacing: 0.02em
Design guidance
Do's and Don'ts
**Do**
- Do use primary pink (#de3f7d) exclusively on CTAs and high-priority interactive elements—never on passive content or backgrounds.
- Do apply negative letter-spacing (-0.02em to -0.04em) to all GT America Compressed headlines to reinforce the technical, engineered aesthetic.
- Do maintain minimum padding of md (24px) on all cards and containers to ensure visual breathing room and professional appearance.
- Do use the navy-gray shadow color (rgba(30, 39, 66, ...)) for all elevation effects to maintain the cool, sophisticated tone.
- Do transition all interactive state changes (hover, focus, active) over 200ms with ease-in-out timing for smooth, predictable feedback.
- Do pair Open Sans body text with GT America Compressed headlines to create visual tension that communicates both precision and approachability.
**Don't**
- Don't use primary pink on passive elements, backgrounds, or non-interactive content—reserve it for actions and CTAs only.
- Don't mix border-radius values arbitrarily; use the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
- Don't apply shadows darker than lg (0 8px 24px rgba(30, 39, 66, 0.2))—the system is deliberately flat and modern, not skeuomorphic.
- Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#323857) for primary text and on-surface-variant (#6b7280) for secondary to maintain sophistication.
- Don't transition colors instantly; always use 200ms ease-in-out for hover, focus, and active states to provide smooth, professional feedback.
- Don't override the typography scale with arbitrary font sizes; use the defined levels (display, headline-lg, body-md, label-sm) to maintain hierarchy and readability.
Edit, then copy or download.