Switch between the rendered Visual preview and the Raw DESIGN.md.
The CU design system embodies a modern, approachable convenience store aesthetic that blends corporate professionalism with friendly, accessible digital experience. The palette centers on rich purple tones that convey trust and innovation, paired with a bold, clean black-and-white foundation for clarity and legibility. The visual identity prioritizes clarity and directness—leveraging strong geometric shapes, ample whitespace, and high contrast to guide users through retail and franchise information seamlessly. The overall mood is progressive yet practical, targeting both everyday consumers and business-minded franchise partners with equal confidence.
Key Characteristics
#6837F8): Primary call-to-action buttons, key interactive elements, and brand-forward highlights. Dominant in hero sections and primary navigation states.#634094): Alternative brand accent for secondary emphasis and depth layering.#6837F8): Primary action buttons—subscribe, apply franchise, key conversions. Use #6837F8 for all prominent CTAs with 60px height and 45px border radius.#000000): Primary text, body copy, headings. Highest usage across the system.#222222): Secondary headings and emphasized text elements.#444444): Tertiary text, subdued labels.#555555): Muted metadata and helper text.#999999): Disabled states, placeholder text, auxiliary content.#DDDDDD): Borders, dividers, subtle background separation.#7F7F7F): Alternative mid-tone for borders and subtle backgrounds.#FFFFFF): Primary background for all surfaces, cards, inputs, and elevated content areas.#DDDDDD): Subtle borders, card outlines, and light dividers.#37D243): Affirmative states, confirmation badges, active indicators, and success messaging. Used sparingly for high-impact approval visuals.Primary Font Stack: Noto Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif Secondary Font Stack (UI Controls): Arial, Helvetica, sans-serif
The system defaults to Noto Sans for all body and heading content, with Arial reserved for smaller interactive controls (buttons, navigation) where optimal legibility at small scales is critical.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Noto Sans | 36px | 700 | 50.04px | 0px | Large hero headings for page introductions |
| Heading 1 | Noto Sans | 24px | 700 | 28.8px | 0px | Main section headings and feature titles |
| Heading 3 | Noto Sans | 13px | 700 | 15.6px | 0px | Subheadings and card titles |
| Body Large | Noto Sans | 24px | 400 | 28.8px | 0px | Large descriptive text and leads |
| Body Regular | Noto Sans | 13px | 400 | 15.6px | 0px | Standard body copy, product descriptions |
| Label / Button | Arial | 13.33px | 400 | 16px | 0px | Button text, form labels, small controls |
| Caption | Noto Sans | 13px | 400 | 15.6px | 0px | Fine print, metadata, helper text |
| Link | Noto Sans | 13px | 400 | 15.6px | 0px | Inline and standalone hyperlinks |
#6837F8#FFFFFF0px 0px 0px 0px (width 200px, height 60px — use container sizing)45px0px nonenone18px#5B2FD4 with slight shadow lift 0 4px 12px rgba(104, 55, 248, 0.3)#4A23B3 with inset shadow#DDDDDD text on #999999 backgroundrgba(0, 0, 0, 0) (transparent)#0000000px 0px 0px 0px0px0px nonenonenormalautoauto#6837F8 or fade text to #444444#6837F8rgba(0, 0, 0, 0)#0000000px 0px 0px 0px0px0px nonenone#6837F8rgba(0, 0, 0, 0)#0000001px 6px 1px 6px0px0px nonenone30px30pxnormalrgba(104, 55, 248, 0.1) with #6837F8 foreground#FFFFFF1px solid #DDDDDD8px20px 24px 24px 24px0 2px 8px rgba(0, 0, 0, 0.08)0 4px 16px rgba(0, 0, 0, 0.12), subtle scale 1.02#6837F8 or #634094 (gradient optional: linear-gradient(135deg, #6837F8 0%, #634094 100%))64px 80px 64px 80px0px (full-width hero) or 8px (contained variant)#FFFFFFnone (flat design preferred)#FFFFFF40px 48px 40px 48px0px (section container) or 8px (card variant)0px or 1px solid #DDDDDDnone#FFFFFF#0000000px 0px 0px 0px (use height/width for sizing: height 29px, width 480px)0px1px solid #DDDDDD (default) or 1px solid #6837F8 (focus)none (focus): inset 0 0 0 2px rgba(104, 55, 248, 0.1)normal#999999#6837F8, shadow 0 0 4px rgba(104, 55, 248, 0.25)1px solid #FF6B6B, shadow 0 0 4px rgba(255, 107, 107, 0.25)#2222228px15.6px18px × 18px0px (checkbox) or 50% (radio)2px solid #DDDDDD (unchecked)#FFFFFF (unchecked) or #6837F8 (checked)#FFFFFF0 0 0 3px rgba(104, 55, 248, 0.2)#FFFFFF103px (container height)#0000000px 0px 0px 0px (managed by menu item padding)0px0 1px 4px rgba(0, 0, 0, 0.08) (subtle separation)normal#6837F83px solid #6837F812px 16px 12px 16px#6837F8rgba(104, 55, 248, 0.05)all 0.2s ease#00000030px × 30pxrgba(0, 0, 0, 0) (transparent)rgba(104, 55, 248, 0.1)#000000#FFFFFF4px 12px 4px 12px4pxuppercase#37D243#FFFFFF6px 12px 6px 12px4pxBase Unit: 4px
Scale:
8px — Micro-spacing between tight elements (icon gaps, small padding)12px — Compact spacing (form field labels, small container gaps)20px — Standard padding for cards and small containers24px — Comfortable padding for content sections32px — Medium section separation (between major blocks)40px — Generous top/bottom spacing for prominence48px — Substantial section separation52px — Off-scale fine-tuning spacer60px — Large vertical breathing room64px — Hero section padding80px — Maximum container padding for expansive layouts112px — Full-screen section margins for dramatic white spaceUsage Context:
8px–12px internal padding20px–24px padding40px–64px padding64px–112px padding40px–60pxMax Width: 1200px (standard container)
Column Strategy:
20px column gutters40px on left/right at full widthSection Patterns:
1200px max-width20px gapscalc(100% - 300px) + sidebar 300px with 32px gapWhitespace is strategic and breathing—not accidental. The system prioritizes visual clarity through ample margins and padding, avoiding cramped layouts. Sections are separated by generous vertical gaps (40px–60px minimum) to prevent cognitive overload. Card-based layouts leverage breathing room between elements to establish clear information hierarchy. Hero sections anchor pages with substantial padding (64px–80px) creating focal points. Margins around text preserve readability and rest the eye.
0px — Navigation, section containers, full-width components (flat aesthetic)4px — Badges, small UI elements, minimal rounding8px — Cards, contained input fields, standard rounding12px — Modal/dialog containers, larger interactive elements45px — Primary action buttons exclusively (pill-button style for prominence)50% — Circular elements (avatars, radio buttons, badge accents)| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow, box-shadow: none | Primary navigation, section backgrounds, text elements |
| Raised (1) | 0 2px 8px rgba(0, 0, 0, 0.08) | Card containers, default product cards, subtle lift |
| Elevated (2) | 0 4px 16px rgba(0, 0, 0, 0.12) | Hovered cards, modal overlays, secondary emphasis |
| Floating (3) | 0 8px 24px rgba(0, 0, 0, 0.16) | Dropdowns, floating action buttons, maximum prominence |
| Focus Ring | 0 0 0 3px rgba(104, 55, 248, 0.2) | Keyboard focus states for interactive elements |
Shadow Philosophy:
The elevation system is minimal and purposeful—shadows serve to distinguish interactive surfaces and modals without creating visual clutter. Primary surfaces (navigation, backgrounds) remain flat. Cards and containers use subtle shadows (Raised) to establish layering. Hover states amplify elevation to 2 levels (Elevated) signaling interactivity. Dropdowns and overlays use maximum depth (Floating) for unmistakable prominence. Focus rings use purple-tinted overlays to maintain brand consistency during keyboard navigation.
#6837F8 for all primary CTAs and interactive highlights. Every key action button, active state, and brand emphasis should leverage the primary purple.20px–24px padding. Apply #DDDDDD subtle borders and 0 2px 8px shadows for definition.64px–80px padding. Hero containers anchor pages with visual prominence and breathing room.#37D243 success green sparingly for affirmations only. Reserve this semantic color for confirmations, badges, and approval states.40px–60px margins minimum).#000000 for all body text and headings. High contrast ensures accessibility and legibility.45px border-radius exclusively to primary action buttons. This distinctive pill shape signals prominence and brand identity.#000000) on purple backgrounds. Instead use #FFFFFF for 7:1+ contrast on #6837F8 surfaces.0 8px 24px on standard cards. Excess depth creates visual clutter and breaks the minimal aesthetic.#6837F8) for disabled or secondary states. Reserve purple strictly for active, primary, and affirmed interactions.| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–479px | Single-column layout, full-width containers, 20px side padding, 1-column product grid, hamburger nav, 18px headings |
| Tablet | 480px–767px | 2-column grid for products, 32px side padding, responsive hero with reduced padding (40px), menu partially visible |
| Small Desktop | 768px–1023px | 3-column product grid, 40px side padding, full navigation visible, standard container widths |
| Desktop | 1024px–1439px | 4-column product grid, full 1200px max-width container, 48px side padding, full horizontal nav |
| Large Desktop | 1440px+ | Increased side padding to maintain visual balance, 1200px max-width enforced, full hero width |
44px × 44px (buttons, links, icon controls)60px for primary actions (larger touch area)12px vertical padding minimum to avoid accidental taps36px minimum height for mobile, 48px for comfortable typing18px × 18px at minimum, 24px × 24px preferred on mobileTypography:
Spacing & Padding:
64px (desktop) → 40px (tablet) → 24px (mobile)48px (desktop) → 32px (tablet) → 20px (mobile)24px (all breakpoints—maintain comfortable whitespace)Layout Transforms:
Input & Form Fields:
100% on mobile/tablet (maintain touch-friendly sizing)100% on mobile, auto-width on tablet+#6837F8) — All primary action buttons, active states, brand highlights#634094) — Alternative accent for depth layering#FFFFFF) — All card and surface backgrounds#000000) — All headings and primary emphasis#000000) — Standard body copy and labels#DDDDDD) — Card outlines, subtle separators#999999) — Inactive states, placeholder text#37D243) — Confirmation badges, approval indicatorsAll buttons use #6837F8 for primary actions. Apply padding 0px, width 200px, height 60px, border-radius 45px, font Noto Sans 18px weight 600. Hover state: darken to #5B2FD4 with 0 4px 12px rgba(104, 55, 248, 0.3) shadow.
Typography defaults to Noto Sans. Headings are 700 weight; body is 400 weight. Minimum font size is 13px for all public-facing copy. Line-height: 1.2x font size for body (13px → 15.6px), larger for display (36px → 50.04px).
All card containers use #FFFFFF background with 1px solid #DDDDDD border and 0 2px 8px rgba(0, 0, 0, 0.08) shadow. Padding minimum 20px 24px. Hover state elevates shadow to 0 4px 16px rgba(0, 0, 0, 0.12).
Hero sections and primary CTAs inherit #6837F8 background. Pair with #FFFFFF text. Padding: 64px minimum (top/bottom) × 80px (left/right). Border-radius 0px for full-width, 8px for contained.
Spacing scale: Base 8px. Use 8px micro (icons), 12px compact (forms), 20px–24px standard (cards), 40px–64px sections, 80px–112px hero/maximums. Never use arbitrary spacing; select from the defined scale.
Focus states use purple ring: 0 0 0 3px rgba(104, 55, 248, 0.2). All interactive elements must be keyboard-accessible with visible focus indication.
Mobile-first responsive: 12-column grid, gutters 20px. Products: 1 col (mobile) → 2 col (tablet) → 4 col (desktop). Navigation collapses to hamburger at 768px breakpoint.
Input fields: #FFFFFF background, 24px font, Noto Sans 400. Default border 1px solid #DDDDDD; focus border 1px solid #6837F8 with inset shadow. Height 29px minimum for touch accessibility.
Success indicators always use #37D243. Badges, checkmarks, confirmation states. Pair with #FFFFFF text for maximum contrast (4.5:1 WCAG AA minimum).
Disabled state colors: Text #999999, background #DDDDDD. Prevent interaction visually and functionally. Do not use purple for disabled elements; reserve purple for active/enabled only.