ChartMogul

ChartMogul — design reference

Source: https://chartmogul.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Typography

• font-family: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif — selector html:lang(ja) body
• font-family: 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif — selector html:lang(ko) body
• font-family: 'Inter', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif — selector html:lang(zh-Hant) body
• font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif — selector html:lang(zh-Hans) body
• font-size: clamp(1rem, .8vw + .9rem, 1.2rem) — selector h3
• font-size: 1.3rem — selector max-width: 1000px; margin: 0 auto 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 0; padding: 2rem; justify-content: space-around; figcaption
• font-size: clamp(1.8rem, 3.75vw + .675rem, 3rem) — selector h2
• font-size: 1.1rem — selector margin: 0 0 3rem 0; text-align: center; p
• font-size: clamp(1rem, .8vw + .9rem, 1.3rem) — selector h2 + p
• font-size: clamp(1.5rem, 2vw + .8rem, 2rem) — selector max-width: 50rem; margin: 0 auto; position: relative; text-align: center; p
• font-size: 1.2rem — selector h3
• font-size: clamp(2rem, 3vw + 1.1rem, 3.5rem) — selector display: grid; grid-template: auto auto / 1fr; place-items: center; gap: 5rem; max-width: 72rem; padding: clamp(6rem, 8vw + 1rem, 8rem) 2rem; margin: 4rem auto; box-sizing: border-box; border-radius: clamp(0px, 30vw -
• font-weight: 600 — selector text-align: center; &::after
• font-weight: 300 — selector p:last-child
• font-weight: 700 — selector display: grid; grid-template: auto auto / 1fr; place-items: center; gap: 5rem; max-width: 72rem; padding: clamp(6rem, 8vw + 1rem, 8rem) 2rem; margin: 4rem auto; box-sizing: border-box; border-radius: clamp(0px, 30vw -
• line-height: 1.2 — selector h1, h2, h3
• line-height: 1.25 — selector max-width: 50rem; margin: 0 auto; position: relative; text-align: center; p
• line-height: 1.3 — selector display: grid; grid-template: auto auto / 1fr; place-items: center; gap: 5rem; max-width: 72rem; padding: clamp(6rem, 8vw + 1rem, 8rem) 2rem; margin: 4rem auto; box-sizing: border-box; border-radius: clamp(0px, 30vw -
• letter-spacing: -0.02rem — selector body

Colors and surfaces

• color: transparent — selector text-align: center; &::after
• color: #007DF1 — selector color: #091121; text-wrap: balance; span
• color: #29303E — selector :where(section)
• color: #D0DBF5 — selector h2 + p
• color: #AAB3C7 — selector p
• background-color: rgb(255 255 255 / 95%) — selector display: block; width: 100%; height: var(--nav-height); position: fixed; inset: 0 0 auto; z-index: 1000000; &[no-blend]

Components and layout

• border-radius: .5rem — selector display: flex; gap: 1rem; padding: 0 2rem; margin: 5rem -2rem; position: relative; overflow: auto clip; a
• border-radius: .75rem — selector a:is(.primary, .secondary)
• border-radius: 50% — selector display: grid; grid: auto auto / auto 1fr; gap: 1.5rem 5rem; max-width: 64rem; padding: 3rem clamp(2rem, 16vw - 2rem, 6rem); margin: 0 auto; font-size: 1.1rem; img
• box-shadow: 0 0 0 2px inset black — selector color: black; background: none; box-shadow: 0 0 0 2px inset #7A87A2; &:hover
• box-shadow: 0 0 0 2px inset #B4BCCC — selector color: white; box-shadow: 0 0 0 2px inset #7A87A2; &:is(:hover, :focus)
• max-width: 50rem — selector padding-block: 6rem 10rem; color: white; background: #13283F; h2, p
• max-width: 25rem — selector p
• padding: 4rem max((100% - 1200px) / 2 + 2rem, 2rem) — selector main section
• padding: .375rem .75rem — selector display: flex; gap: 1rem; padding: 0 2rem; margin: 5rem -2rem; position: relative; overflow: auto clip; a
• padding: 4rem max((100% - 72rem) / 2 + 2rem, 2rem) — selector main section
• padding: 1rem 1.4rem — selector a:is(.primary, .secondary)
• padding: 1rem 1.15rem — selector a:is(.primary, .secondary)
• gap: 4rem — selector ul
• gap: 1rem — selector ul
• gap: 1rem 2rem — selector nav
• gap: 1.5rem 2rem — selector nav
• gap: 2rem — selector nav
• transition: background-color .2s, box-shadow .2s — selector a:is(.primary, .secondary)

Responsive rules

(width < 900px)
(width < 850px)
(width < 48rem)
(width < 48rem) 
(width < 50rem)
(width >= 850px)