Olipop — design system & UI screens
Teal pop-art hero with a cluster of OLIPOP cans (Shirley Temple, Blackberry Vanilla, Raspberry Sherbet) over a comic-burst background, a 25%-off badge and a Shop-our-collections fiber-filter row.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/olipop.
Decoded design system
Olipop's decoded design system: background #FFF6EA, text #0A0A0B, accent #FFFF7D, link #034638, primary #14433D; type scale h1 20px / h2 24px / body 12px; 4px spacing base; 24px base radius. The single interactive/action color is #FFFF7D — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFF6EA |
| surface | #F0E7DC |
| border | #DAD2C8 |
| text | #0A0A0B |
| text_muted | #67635F |
| primary | #14433D |
| accent | #FFFF7D |
| link | #034638 |
| secondary | #FFF6EA |
| button_bg | #FFFF7D |
| button_text | #034638 |
Using these colors
- Action color
#FFFF7D— the single interactive color; only on things you click or must notice, never large fills. accent,button_bgare all#FFFF7D— one role, not several (the action color).- accent
#FFFF7D— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - primary
#14433D— a brand color — but the call-to-action uses #FFFF7D, not this. - link
#034638— inline text links and link-styled controls. - secondary
#FFF6EA— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Ano
- Body: Helvetica
- h1: 20px
- h2: 24px
- body: 12px
Spacing
- base unit: 4px
- scale: 2px, 3px, 5px, 8px, 10px, 11px, 12px, 16px, 20px, 24px
Radii
- base: 24px
- button: 50px
Shadows (elevation)
- subtle:
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px - card:
rgb(20, 67, 61) 0px 0px 0px 1.5px
Motion
Micro-interactions run at 250ms (dominant) with ease-in-out.
- durations: 250ms · 500ms · 300ms
- easings:
ease-in-out·cubic-bezier(0.4, 0, 0.2, 1) - animated properties: opacity, margin, color, background-color
Native design tokens
| Token | Value |
|---|---|
--color-text | #3a3a3a |
--color-text-shadow | rgba(0,0,0,0.4) |
--color-body-text | #333232 |
--color-sale-text | #fa4545 |
--color-small-button-text-border | #3a3a3a |
--color-text-field | rgba(0,0,0,0) |
--color-text-field-text | #000000 |
--color-navigation-text | #3a3a3a |
--color-btn-primary | #3a3a3a |
--color-btn-primary-darken | #212121 |
…and 110 more measured on the page.
Button states (measured)
- primary focus: outline
2px solid rgb(24, 99, 220)
Layout (measured)
- container max-width:
900px - nav: 70px relative
- common grid: 2 columns
Motion choreography (measured)
Load order: img.ls-is-cached → a.toggle-clp-jump-link → a.toggle-clp-jump-link → a.toggle-clp-jump-link → a.toggle-clp-jump-link → a.toggle-clp-jump-link
Scroll reveal: 2 elements rest at opacity 0, animate in over 0.23s ease-in.
Overlay recipe (measured)
dialog panel: #FFFFFF · radius 6px
Responsive (measured)
- breakpoints: 749px · 760px · 768px · 989px · 1024px · 1198px
- mobile (390px): hero 20px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →