Design System Inspiration of OPENPOINT

1. Visual Theme & Atmosphere

OPENPOINT (統一超商紅利點數平台) is Taiwan's dominant retail loyalty and payment ecosystem, operated by President Chain Store (統一超商股份有限公司), the parent company of Taiwan's 7-ELEVEN network. Its web presence lands in a clean white (#ffffff) canvas with a signature dual-tone palette of electric purple (#8081ff) and warm lavender (#cf7ffa) that together define a cheerful, accessible loyalty-program aesthetic — one that says "earn and redeem" rather than "premium fintech." The teal accent (#0abbb5) punctuates dates and key dividers, adding a fresh, approachable warmth.

The typeface stack leads with Noto Sans TC for input/interactive elements (set at font-family: "Noto Sans TC", "Open Sans", Arial, "Microsoft JhengHei" in the stylesheet) and falls back to the traditional Taiwanese web stack: 微軟正黑體 (Microsoft JhengHei), 新細明體, 蘋果儷黑體 — reflecting a broad-compatibility, Traditional Chinese–first approach. Body text runs at a comfortable 16px / weight 400 with 1.5× line height. Navigation and CTA labels use weight 900 for strong, punchy micro-copy.

What makes OPENPOINT's design identity distinctive is the purple–lavender gradient (#cf7ffa → #8081ff) used across interactive states, member features, and premium tiers. This gradient doesn't appear in the physical 7-ELEVEN brand (which uses orange-and-green) but is the OPENPOINT app-native identity — a deliberate visual separation between the points platform and the convenience-store parent. The loyalty surface feels lighter, more app-first. Cards use a subtle drop-shadow (rgba(0,0,0,0.16) 2px 2px 5px) rather than flat tints for event separation, and the layout leans heavily on image-led promotion cards.

Key Characteristics:

• Purple-to-lavender gradient (#cf7ffa → #8081ff) as the primary brand axis
• Teal (#0abbb5) for date labels and accent underlines — energetic, calendar-forward
• White canvas with light grey (#f3f3f3) for card text areas — clean, informational
• Noto Sans TC / 微軟正黑體 — Traditional Chinese–first font stack
• Weight 900 for all interactive labels (nav, CTAs) — bold, accessible, tap-friendly
• Drop-shadow cards (not flat tints) for event and promotion listings
• 7-ELEVEN red (#e60012) strictly limited to compliance banners and alerts
• Dropdown navigation reveals lavender-to-purple sub-menus on hover

2. Color Palette & Roles

Primary Brand

• OPENPOINT Purple (#8081ff): Primary brand color, CTA buttons, links, active nav states, borders, form field focus rings. The core interactive color throughout the platform.
• Gradient Start (Lavender) (#cf7ffa): Left/top of the purple-lavender gradient. Used in premium points features, gradient badges, selected-state highlights.
• Gradient Mid (#a77bca): Mid-range purple used for gradient backgrounds and disabled-state overlays.

Accent & Status

• OPENPOINT Teal (#0abbb5): Event date labels (.date class) and accent underlines (.event_page .description bottom border). A fresh counterpoint to the purple primary.
• 7-ELEVEN Red (#e60012): Cookie-consent banner background, alert and warning indicators. Parent brand heritage color — intentionally quarantined from the rewards UI.
• Muted Purple (#9696ad): Disabled button states, secondary interactive elements.

Neutral & Surface

• Pure White (#ffffff): Page canvas, card faces, text on dark/purple backgrounds.
• Light Grey (#f3f3f3): Event card text area background (.event-text). Also the footer.
• Surface Light (#eeeef5): Faint purple-tinted surface used in member forms.
• Surface Lavender (#f5f2ff): Lightest lavender tint for subtle section highlights.
• Dark Navy (#48484e): Applied to overlay backgrounds and secondary UI chrome.
• Ink Black (#000000): Primary text, headings, event-btn label.
• Placeholder (#cccccc): Form input placeholder text.

3. Typography Rules

Font Family

• Primary (Traditional Chinese + Latin): "Noto Sans TC", "Open Sans", Arial, "Microsoft JhengHei", "Apple LiGothic Medium", sans-serif — applied to input/button/select elements.
• Body default: 微軟正黑體 (Microsoft JhengHei), 新細明體, 蘋果儷黑體, Arial, Helvetica, sans-serif — broad Taiwanese Windows/macOS compatibility.

Hierarchy

Principles

• Weight 900 for action text: Nav, CTAs, and event-btn links all run at font-weight 900 — visually declaring tap zones in a dense, touch-first layout.
• Traditional Chinese–first stack: The web falls back gracefully from Noto Sans TC to 微軟正黑體, ensuring correct rendering on both modern and legacy Taiwanese devices.
• Body is functional: No display fonts, no tight tracking. Copy is meant to be read quickly — a loyalty platform where users scan promotions, not read essays.
• Size stays conservative: H1 at 28.8px, H2 at 22.4px — modest at desktop, comfortable on mobile.

4. Component Stylings

Buttons

Primary (Nav Dropdown CTA)

• Background: #8081ff
• Text: #ffffff
• Radius: 8px
• Padding: 10px 15px
• Font: 16px / 900 Noto Sans TC
• Height: 38px
• Use: Sub-navigation items displayed as pill-like anchor buttons

Event See-More Link

• Text: #000000
• Padding: 8px 24px
• Font: 16px / 900 微軟正黑體
• Height: 33px
• Use: "查看更多優惠" (See more promotions) link-styled CTA

Disabled / Secondary (Muted Purple)

• Background: #9696ad
• Text: #ffffff
• Use: Disabled or deactivated action states

Gradient Button (Premium)

• Background: linear-gradient(to right, #cf7ffa, #8081ff)
• Text: #ffffff
• Use: Premium feature access buttons, member upgrade CTAs

Cards & Containers

Event Card

• Background: #ffffff
• Shadow: rgba(0, 0, 0, 0.16) 2px 2px 5px 0px
• Hover Shadow: rgba(0, 0, 0, 0.2) 4px 4px 8px 0px
• Radius: 0px (sharp corners)
• Use: Promotion/event listing cards; image fills 48% height, text area below

Event Text Area

• Background: #f3f3f3
• Padding: 16px
• Use: Below event card image — shows date + title + description

Member Form Surface

• Background: #eeeef5
• Use: Read-only field backgrounds, faint purple-tinted input areas

Inputs & Forms

Default

• Border: 1px solid #8081ff
• Radius: 8px
• Text: #000000
• Placeholder: #cccccc
• Font: 16px 微軟正黑體 / Noto Sans TC
• Focus: border #8081ff (maintained, no shift)
• Use: Member center login/register forms

Badges & Tags

Date Badge (Teal)

• Text: #0abbb5
• Font: 16px / 900 微軟正黑體
• Use: Event dates in card listings, e.g. "活動時間：2026/01/01–06/30"

Gradient Accent Badge

• Background: linear-gradient(to right, #cf7ffa, #8081ff)
• Text: #ffffff
• Use: Points highlights and premium feature labels

Muted Badge

• Background: #9696ad
• Text: #ffffff
• Use: Neutral/inactive status indicators

Navigation

Top Nav Category Link

• Text: #000000
• Font: 16px / 900 微軟正黑體
• Active: #8081ff text
• Use: Horizontal nav top-level items ("優惠活動", "點數交換", "旅遊集點護照")

Dropdown Sub-Item

• Text: #ffffff
• Radius: 8px
• Padding: 10px 15px
• Font: 16px / 900 Noto Sans TC
• Use: Dropdown menu items on hover ("OPENPOINT推薦", "累積點數", "兌換點數")

---

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.openpoint.com.tw, https://www.openpoint.com.tw/cdn/css/style.css Tier 2 sources: getdesign.md/openpoint (404 — not listed) | styles.refero.design/?q=openpoint (0 matches) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 16px
• Scale: 8px, 16px, 24px, 40px, 48px, 64px
• Event cards padded at 16px; event-btn at 8px 24px
• Section titles use 40px vertical margin

Grid & Container

• Max-width 1200px centered container
• Homepage uses a full-width hero carousel (slick-slider) with 0.3 opacity on non-active slides
• Event cards arranged in 3-column grid at desktop (≥1200px); single column on mobile
• Footer: centered single-column, #f3f3f3 background, 147px height

Whitespace Philosophy

• Generous section spacing: 40px margins around event-title banners
• Tight cards: event cards pack image + text compactly with minimal internal whitespace
• Full-width bands: hero carousel and event-title banners span the full viewport
• No padding on carousel list: padding: 0px 150px on desktop gives the panoramic parallax feel

Border Radius Scale

• Zero (0px): event cards, image containers, most content blocks — blunt, functional
• Small (8px): nav dropdown items, form inputs — the primary interactive radius
• Large (50px+): rarely used decorative elements

6. Depth & Elevation

Shadow Philosophy: OPENPOINT uses light drop-shadows (not flat tints) on cards, giving the event listings a magazine-like raised quality. The shadow is warm-neutral (black, not blue-tinted), keeping the feel casual and approachable. Loading states use a near-opaque black overlay (rgba(0,0,0,0.9)) with an SVG spinner — keeping the experience clean while content loads.

7. Do's and Don'ts

Do

• Use purple (#8081ff) for all primary CTAs, links, and active states
• Apply teal (#0abbb5) for date labels and fresh accent underlines
• Use the lavender-to-purple gradient (#cf7ffa → #8081ff) for premium features
• Set nav and CTA labels at font-weight 900 for clear tap targets
• Keep card corners sharp (0px radius) to maintain the magazine-grid aesthetic
• Use #f3f3f3 for card text area backgrounds — soft, readable separation
• Limit red (#e60012) to system alerts and compliance banners only

Don't

• Spread 7-ELEVEN red (#e60012) into brand UI — it belongs to alerts only
• Use drop shadows heavier than the card-standard 2px 2px 5px on content
• Apply Noto Sans TC at weights below 400 — the TC hinting requires standard weight
• Mix orange or green (7-ELEVEN store palette) into the OPENPOINT digital surface
• Round card corners — the sharp edge is part of the information-dense grid language
• Use the gradient on text — only as a background fill
• Replace teal with generic grey for dates — teal is the calendar/time signal

8. Responsive Behavior

Breakpoints

Touch Targets

• Dropdown nav items at 38px height, 8px radius — comfortable thumb targets
• Event-btn at 33px height with 24px horizontal padding
• Event cards at 247px height — generous touch/click area

Collapsing Strategy

• Hero carousel: full-width on both sizes; padding removed on mobile
• Event cards: 3-up desktop → stacked single-column mobile
• Navigation: horizontal nav hidden; replaced by hamburger/mobile nav menu (m-btn class)

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: OPENPOINT Purple (#8081ff)
• Gradient left: Lavender (#cf7ffa)
• Date / Accent: Teal (#0abbb5)
• Text Primary: Ink Black (#000000)
• Card Background: Pure White (#ffffff)
• Card Text Area: Light Grey (#f3f3f3)
• Muted / Disabled: #9696ad
• Alert / 7-ELEVEN: Red (#e60012)

Example Component Prompts

• "Build a promotion card: white background, no border-radius, shadow rgba(0,0,0,0.16) 2px 2px 5px. Image at 48% height, fills full width. Below: #f3f3f3 text area, 16px padding. Date in #0abbb5, weight 900. Title in black #000000, weight 900, 2-line ellipsis."
• "Create a nav dropdown: dark overlay background. Items as <a> with #8081ff background, white text, 8px radius, 10px 15px padding, weight 900. Stack vertically with 4px gap."
• "Design a gradient accent badge: background linear-gradient(to right, #cf7ffa, #8081ff), white text, weight 700. Use for 'OPENPOINT優惠' labels."
• "Style a form input: 1px solid #8081ff border, 8px radius, #000 text, Noto Sans TC 16px, placeholder #ccc."

Iteration Guide

1. Purple (#8081ff) owns all interactions — CTAs, borders, active nav, focus rings
2. Teal (#0abbb5) marks time — date labels and timeline underlines only
3. Gradient (#cf7ffa → #8081ff) signals premium or selected states
4. Cards use sharp corners and gentle shadows — lean into the information-grid feel
5. All label/button text at weight 900 — boldness = accessibility at small size
6. Keep red (#e60012) for alerts; never use orange/green (store palette)

---

10. Voice & Tone

OPENPOINT's voice is friendly, reward-focused, and transactional — the communication style of a loyalty programme that wants users to feel like they're winning every day. The copy is predominantly Traditional Chinese (繁體中文), concise, and action-oriented. Service names like 「OPENPOINT推薦」, 「累積點數」, 「兌換點數」 are plain category labels with zero jargon — the UX copy doesn't try to be clever, it tries to be clear and fast.

Voice samples (verbatim from live homepage 2026-06-22):

• "OPENPOINT優惠活動" — page H1 title (clarity over cleverness). (verified live 2026-06-22)
• "查看更多優惠" — event section CTA (direct, lowest-friction). (verified live 2026-06-22)
• "OPENPOINT為統一超商股份有限公司發行之紅利點數業務" — footer brand disclosure. (verified live 2026-06-22)

Forbidden register: hype language, urgency countdown pressure, English mixed into core navigation (aside from brand names like "OPENPOINT" and "icash"), emojis in body copy.

11. Brand Narrative

OPENPOINT (統一超商紅利點數) was launched by President Chain Store Corporation (統一超商股份有限公司) — Taiwan's largest convenience-store operator, running over 6,800 7-ELEVEN locations — as the digital loyalty and payment platform that bridges Taiwan's physical retail-first economy into an app-native consumer experience. The platform unifies in-store point earning (at 7-ELEVEN), payment via icash and icash Pay, and redemption partnerships with airlines, banks, and international loyalty schemes (Japan's Ponta, the Philippines' CLiQQ, Thailand's ALL member).

The brand name "OPENPOINT" signals openness — an open ecosystem where points flow beyond a single store chain to partner merchants, credit cards, and travel networks. The OPEN! mascot character (shared with 7-ELEVEN Taiwan's broader brand expression) carries a playful, orange-and-green character identity in physical retail, but OPENPOINT's own digital surface deliberately adopts a distinct purple identity — separating the loyalty app from the store brand, creating a more tech-forward, "smart wallet" perception.

The product targets Taiwan's mobile-first consumer who shops at 7-ELEVEN multiple times per week and wants to maximise everyday-spend rewards without friction — a context where the platform's dense information hierarchy and promotions-first homepage make perfect sense.

12. Principles

1. Every visit is a earning opportunity. OPENPOINT homepage surfaces active promotions before any account features. UI implication: promotions carousel is above the fold, member login is secondary; teal dates signal freshness.
2. Open ecosystem, closed visual identity. The purple-lavender palette is platform-native — distinct from the 7-ELEVEN orange-green store brand. UI implication: never import 7-ELEVEN's brand orange into the OPENPOINT UI.
3. Clarity over elegance. The navigation is a flat category list with no mega-menu or editorial photography. UI implication: nav labels are noun-only, no taglines; copy is short and informational.
4. Rewards are visible, not buried. Points balance, earning events, and redemption options are top-level navigation categories. UI implication: 累積點數 / 兌換點數 / 優惠 are first-level nav, not nested in a profile dropdown.
5. Taiwan-first, Asia-connected. International exchange features (Ponta, CLiQQ, ALL member) are prominent nav items reflecting Taiwan's outbound-travel culture. UI implication: travel and exchange features get dedicated nav real estate, not buried in settings.

13. Personas

Personas below are fictional archetypes informed by publicly observable OPENPOINT user patterns and Taiwan 7-ELEVEN consumer behaviour, not individual people.

林雅婷, 32, 台北市. Office worker who visits 7-ELEVEN two or three times daily. Uses OPENPOINT to earn and track points from every purchase, periodically redeeming for gift certificates or icash top-ups. Values the one-app convenience of seeing balance, recent transactions, and active promotions without needing to log in to multiple systems.

陳建宇, 45, 台中市. A small business owner who uses icash Pay for supplier transactions and collects points passively. Attracted to the bank-points exchange feature — consolidates points from credit cards into OPENPOINT for travel redemption. Sees the platform as a financial tool, not just a loyalty card.

黃小芸, 22, 高雄市. University student and frequent traveller. Primarily interested in the Japan Ponta and airline miles exchange features. Uses OPENPOINT's uniopen PRIMA subscription for enhanced earning rates. Engages most with the travel and partner-exchange sections of the app.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is conservative and functional. The event card hover uses a scale(1.2) image zoom (0.3s ease-out) paired with an elevated shadow — a standard e-commerce pattern that communicates interactivity without distraction. The cookie banner entrance uses a heavy ease-in/out curve, reflecting the legal-compliance character of that surface. Under prefers-reduced-motion, image scale transforms should collapse; shadow transitions are safe to retain at reduced magnitude.