menu_book
How this design system is grounded
This design system blends what's documented in the CPFS brief with proposed direction from Savage AdFox drawn from the brief's strategic positioning and the benchmark sites CPFS named (shopufs.com, cookmunitybyajinomoto.com, sanmiguelmart.ph).
Documented: Brand colours (from the new Food Solutions identity), sitemap, page templates (Home, PDP, Recipe), product detail requirements (case config, yield, dilution, shelf life), audience, strategic pillars (ELEVATE / SCALE UP / INCREASE REACH), funnel model.
Proposed (pending validation): Voice and tone direction, copy examples, photography style. These need a quick review with CPFS before locking as v1.0. Technical specs (typography scale, motion, accessibility, structure) are industry-standard build conventions.
Design direction
From inspiration to purchase
The CPFS brief asks for one unified platform that supports the full food service operator journey: from finding inspiration through recipes and content, to making procurement decisions through detailed product information, to placing orders through native ecom. This design system is built to deliver that journey.
The strategic positioning from the brief drives every design decision: position CPFS as a partner for innovation, co-creation, and solving customer pain points. Move from commodity thinking to value creation. Three pillars guide the experience: ELEVATE (showcase quality and capability), SCALE UP (support operators ordering at volume), and INCREASE REACH (modern ecom and SEO to grow the audience).
Design principles
01
Content meets commerce
The brief asks for content-rich pages for inspiration alongside lean and optimised product pages. Two layout systems, one unified platform.
02
Built for the operator journey
Every template moves operators through the funnel from the brief: awareness, discovery, consideration, conversion, retention. No dead-end pages.
03
Performance is positioning
Site speed and SEO are explicit criteria in the brief. Clean Liquid sections, structured metaobjects, schema markup. The site has to load fast and be found.
04
Locked design, open content
Marketing controls content, banners, products, recipes. Layout, colours, and structure are locked at the theme level. Brand integrity stays intact.
Brand palette
Copied
CPFS Teal
#0F8C8C
Primary / brand
Copied
Navy
#0E2A3C
Headings / dark surfaces
Copied
Gold
#C9A961
Accent / sparingly
Copied
Red
#D93B3B
Alerts / errors only
Copied
Teal dark
#0A6E6E
Hover / pressed states
Copied
Teal light
#E1F2F2
Soft surfaces
Copied
Surface
#FBFAF6
Page background
Copied
Dark
#1A1A1A
Body text
CPFS Teal (#0F8C8C) is the heritage brand colour, carried forward from the existing logo and trusted across all CPFS communications. It leads the new identity. Navy (#0E2A3C) provides depth and confidence for hero sections and CTA bands. Gold (#C9A961) adds warmth on dark surfaces, used sparingly. Red (#D93B3B) is reserved for system alerts and errors only.
Usage rules
Backgrounds
Surface (#FBFAF6) as default. White for cards. Teal light for soft accents. Navy for hero, CTA bands, footer. Avoid pure black.
Text on light
Dark (#1A1A1A) for body. Navy (#0E2A3C) for headings. Teal for eyebrows and section labels. Grey for muted secondary.
Text on navy
White for headings.
rgba(255,255,255,0.75) for body. Gold for eyebrows. Never use grey on navy.Borders
Navy at 8% opacity for card borders. 14% for strong dividers. Teal solid only for active states and focus rings.
CTAs
Primary: teal background, white text. Secondary: outlined with navy border. Tertiary: text-only link in teal with underline on hover.
Gold usage
Sparingly. Reserved for accent lines on navy surfaces, hero eyebrows, and key emphasis moments. Never use gold as a CTA colour.
Red usage
System messages only. Form errors, stock-out alerts, validation. Never decorative. Never marketing.
Shopify theme tokens
Map the brand palette to Shopify theme settings so colours flow through the editor without exposing hex codes to non-technical editors.
| Token | Value | Usage |
|---|---|---|
| --color-background | #FBFAF6 | Page background |
| --color-foreground | #1A1A1A | Body text |
| --color-brand | #0F8C8C | Primary CTAs, eyebrows, links |
| --color-brand-dark | #0A6E6E | Hover, pressed states |
| --color-brand-soft | #E1F2F2 | Soft tinted surfaces |
| --color-deep | #0E2A3C | Headings, dark sections |
| --color-accent | #C9A961 | Accents on dark surfaces |
| --color-danger | #D93B3B | System alerts only |
| --color-surface | #FFFFFF | Card fills |
| --color-border | rgba(14,42,60,0.08) | Card borders |
Type system
Headings — Inter
Built for chefs. Made for operators.
Body — Inter
Century Pacific Food Solutions is your partner in scaling Filipino food service. From beach-side cafes to five-star hotels, we deliver quality ingredients, menu innovation, and the supply consistency your kitchen needs.
Labels and eyebrows
Our Products · Solutions · Recipes · About Us
Type in context
FEATURED RECIPE
Adobo Flakes Sliders
with Century Tuna
with Century Tuna
A modern take on a Filipino classic. Crispy adobo flakes, slow-cooked Century Tuna, and a tangy aioli on house-baked pan de sal. Yields 12 servings in under 25 minutes.
View recipe arrow_forward
Type scale
Set per breakpoint in the Shopify theme settings. Fluid sizing handled via
clamp() in custom Liquid sections where supported.| Element | Weight | Desktop | Tablet | Mobile | Tracking |
|---|---|---|---|---|---|
| H1 / Hero | 700 | 56px | 44px | 36px | -0.02em |
| H2 / Section | 700 | 40px | 34px | 28px | -0.02em |
| H3 / Card title | 600 | 24px | 22px | 20px | -0.01em |
| H4 / Sub-card | 600 | 18px | 17px | 16px | 0 |
| Body large | 400 | 17px | 16px | 16px | 0 |
| Body | 400 | 15px | 15px | 14px | 0 |
| Small / caption | 400 | 13px | 13px | 12px | 0 |
| Eyebrow / nav | 600 | 12px | 12px | 11px | 0.12em |
Icon library
Material Symbols Outlined
We use Google Material Symbols (Outlined) as the single source for all UI icons. Free, open-source, comprehensive (2,500+ glyphs), and weight-variable so they adapt to any size without losing crispness. Loaded via Google Fonts CDN with a single stylesheet link.
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<span class="material-symbols-outlined">shopping_cart</span>
<span class="material-symbols-outlined">shopping_cart</span>
Common icons used
restaurant_menurestaurant_menu
shopping_cartshopping_cart
inventory_2inventory_2
local_shippinglocal_shipping
storefrontstorefront
searchsearch
personperson
favoritefavorite
menumenu
closeclose
arrow_forwardarrow_forward
filter_listfilter_list
scheduleschedule
groupgroup
scalescale
water_dropwater_drop
verifiedverified
mailmail
Browse the full library at fonts.google.com/icons. Pick names that describe the action or concept, not the visual ("shopping_cart" not "basket_thing"). Stick to Outlined weight for consistency. Never mix with other icon sets.
Sizing
restaurant_menu16px / inline
restaurant_menu20px / button
restaurant_menu24px / UI default
restaurant_menu32px / feature
restaurant_menu48px / hero
Usage rules
Default weight
Outlined. Filled variants reserved for active states (e.g. favorite when item is favorited).
Default size
24px for UI controls. 20px when inline with body text. 16px for compact labels. Scale up for feature blocks.
Color
Inherits from parent text colour by default. Teal for active or interactive icons. Navy for static or decorative.
With text
Place icon to the left of label for actions ("Add to cart"). Right for navigation or progression ("Next →"). Always set
aria-hidden="true" when text label exists.Icon-only buttons
Must have
aria-label describing the action. Minimum tappable area 44×44px even if icon is smaller.Don't
Mix icon sets. Use emoji as UI icons. Use filled and outlined weights interchangeably. Skip accessibility labels.
Section architecture
Every section on the site follows a two-layer container model. The outer section spans the full viewport for backgrounds. The inner container constrains content to a readable max-width. This pattern works across the home, product, and recipe templates.
<section class="section-name">
/* Full viewport width. Handles background, padding-block, padding-inline */
<div class="container">
/* max-width: 1280px. margin-inline: auto. No padding. */
/* Grid or Flexbox layout applied here */
<div class="section__content">
/* Text group with flex-direction: column and gap */
</div>
</div>
</section>
/* Full viewport width. Handles background, padding-block, padding-inline */
<div class="container">
/* max-width: 1280px. margin-inline: auto. No padding. */
/* Grid or Flexbox layout applied here */
<div class="section__content">
/* Text group with flex-direction: column and gap */
</div>
</div>
</section>
Spacing philosophy
All spacing follows a consistent model. No ad-hoc margins between sections. Each section owns its vertical space through padding-block.
| What | How | Why |
|---|---|---|
| Between sections | Section's padding-block | No margins between sections. Each owns its spacing. |
| Horizontal gutter | Section's padding-inline | Safety net for small screens. |
| Content width | Inner container max-width | Readability constraint (1280px). |
| Between text elements | Gap on flex parent | Consistent, predictable, no margin collapse. |
| Accent to heading | Tight gap (nested group) | They are semantically linked. |
| CTA separation | Slight margin-top | Exception to gap rule for emphasis. |
| Between grid items | Gap on grid parent | Consistent grid gutters. |
Text grouping pattern
All text elements in a content block are wrapped in a single parent container using flexbox column direction with gap for spacing. Accent text and headings are tightly grouped (semantically linked). CTAs get a slight margin-top for visual separation.
Pattern
<div class="content">
<div class="title-group">
<span class="accent">ACCENT</span>
<h2>Heading</h2>
</div>
<p>Description text</p>
<a class="cta">View recipe</a>
</div>
<div class="title-group">
<span class="accent">ACCENT</span>
<h2>Heading</h2>
</div>
<p>Description text</p>
<a class="cta">View recipe</a>
</div>
Rendered
FEATURED PRODUCT
Century Tuna 1.7kg
Restaurant-grade tuna chunks in vegetable oil. Built for high-volume kitchens.
View product
Shopify Liquid section pattern
How section-layout-architecture maps to Shopify theme sections.
Layer 1 (Section)
Use a Shopify section file (
sections/<name>.liquid). Full-width. Background colour/image set via section schema. Vertical padding set on the outer wrapper.Layer 2 (Container)
Inside the section, a
.container div with max-width: 1280px and margin-inline: auto. No padding. Grid or flexbox layout applied here.Text groups
Vertical flex stack with
gap for spacing. Nested tighter stack for accent + heading pairs.Section spacing
Padding-block exposed in section schema as a setting. Desktop: 96px. Tablet: 72px. Mobile: 56px. No margins between sections.
Horizontal gutter
Padding-inline on the section. Desktop: 40px. Tablet: 32px. Mobile: 20px. Not on the container.
Editor exposure
Section schema exposes only content fields (text, images, products). Layout, spacing, and colours are locked at the theme level.
Pre-build checklist
Section spans full viewport width
Inner container has max-width (1280px)
Texts grouped in a flex-column parent with gap
Accent and heading tightly grouped
Section spacing via padding-block, not margins
Padding-inline on section, not container
CTA has slight margin-top for breathing room
Single-line accent has line-height: 1
Layout pattern
B2B editorial commerce
Editorial-style layouts for content pages (recipes, brand stories, solutions), tight commerce layouts for product pages (PDPs). The site borrows the breathing room of a magazine site for inspiration content, and the density of a B2B catalogue for procurement content.
Full-bleed hero sections
2-column product grids
Sticky navigation
Recipe card layouts
Featured SKU modules
Solutions hub callouts
Sticky add-to-cart on PDPs
Sitemap
01Home
02Our Brands & Products
03Our Solutions
04Recipes
05About Us
06Contact Us
07Blog
08Product (PDP)
09Recipe detail
10Cart & checkout
11Account
12Search results
Based on the CPFS brief. Product subcategories: Marine, Meat, Milk, Tomato, Coconut, Plant-Based. Recipe subcategories: Meals, Snacks, Beverages. Solutions: Customisations, Ideations, Collaborations, Roadshows.
Spacing system
Section gaps
96px desktop · 72px tablet · 56px mobile between major sections.
Card padding
32px internal. 16px gap between cards.
Container width
Max 1280px for content. Full-bleed for hero images and CTA bands.
Border radius
12px for cards. 8px for buttons. 6px for tags and small badges. 100px for pills. No sharp corners.
Grid gap
24px on desktop grids. 16px on tablet. 12px on mobile.
Key page templates
Home
Hero with rotating banners · Brand and product spotlight · Featured recipes module · Solutions hub callout · Latest news block · Footer.
Product (PDP)
Product images (gallery left) · Name, short description, case config, yield, dilution, shelf life (right) · Add to cart · Suggested recipes module · Related products.
Recipe detail
Hero shot · Summary block (servings, time) · Ingredients (structured list) · Procedures (numbered steps) · Featured CPFS SKUs · Related recipes · Schema.org Recipe markup.
Solutions
Hub page leading to four service streams: Customisations, Ideations, Collaborations, Roadshows. Each with its own inquiry CTA.
Motion principles
Motion serves comprehension, not decoration. Every animation has a purpose: confirming an action, drawing attention to a change, or guiding the eye through a transition. Speed beats spectacle. If motion doesn't help the user, it doesn't belong.
01
Fast, then slow
Use ease-out curves for things appearing. Ease-in for things leaving. Standard ease for things moving in place.
02
Short durations
UI feedback: 150–200ms. Section transitions: 300–400ms. Anything over 600ms feels sluggish.
03
Respect reduced motion
Always check
prefers-reduced-motion: reduce. Disable transforms and complex animations for users who need them off.04
GPU-only properties
Animate
transform and opacity only. Never animate width, height, or top/left — they trigger layout thrash.Easing functions
| Curve | Value | Use for |
|---|---|---|
| Standard | cubic-bezier(0.4, 0, 0.2, 1) | Default for most UI transitions |
| Ease out | cubic-bezier(0, 0, 0.2, 1) | Elements entering the screen |
| Ease in | cubic-bezier(0.4, 0, 1, 1) | Elements leaving the screen |
| Spring (soft) | cubic-bezier(0.34, 1.56, 0.64, 1) | Playful confirmations (cart added) |
| Linear | linear | Loading indicators only |
Common motion patterns
visibilityFade in
Hover the card to preview. Used for section reveals as content enters the viewport.
opacity: 1 → 0.3 · 300ms ease-out
arrow_forwardSlide in
Hover the card to preview. Used for card reveals, hero text staggers, dropdown menus.
translateX(0 → 20px) · 300ms
zoom_inScale
Hover the card to preview. Used for image hover zoom on recipe and product cards.
scale(1 → 1.15) · 300ms
arrow_upwardLift
Hover the card to preview. Used for interactive cards and buttons to signal affordance.
translateY + shadow · 200ms
Reduced motion
Roughly 1 in 3 users have some form of vestibular sensitivity or motion preference set in their OS. Always wrap non-essential motion in a media query check.
/* Default: animations on */
.card { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }
/* User prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.card { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }
/* User prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Key effects
Scroll-triggered fade-in with subtle upward translation
transform: translateY(20px) to 0; opacity: 0 to 1; duration: 500ms ease-out
Sticky navigation with backdrop blur on scroll
backdrop-filter: blur(16px); background: rgba(255,255,255,0.92)
Soft hover lift on product cards and recipe tiles
transform: translateY(-2px); box-shadow expand; transition: 200ms ease
Image hover zoom on recipe cards
transform: scale(1.03); transition: 400ms ease; overflow: hidden
CTA button hover with subtle background shift
background: #0F8C8C to #0A6E6E; transition: 200ms ease
Recipe and product image lazy loading with low-res placeholders
loading="lazy"; native browser API; tiny blurhash placeholder
Smooth scroll on anchor navigation
scroll-behavior: smooth; native CSS
Anti-patterns
Pure black (#000) backgrounds — use navy instead
Auto-playing video on page load
Carousels for primary content
Animations longer than 600ms
Decorative floral or border illustrations (move away from old site style)
Drop shadows heavier than 8% opacity
Modal popups on page entry
Decorative full-width colored bars
All-caps body text
Generic stock food photography
Skeuomorphic gradients or 3D effects
Auto-scrolling marquees
Compliance target
WCAG 2.2 Level AA
The site is built to meet WCAG 2.2 Level AA standards as a baseline. This covers colour contrast, keyboard navigation, screen reader support, and motion preferences. Compliance is checked at design, build, and post-launch via automated audits and manual review.
Core requirements
Colour contrast
Body text: minimum 4.5:1 contrast ratio. Large text (18px+): minimum 3:1. UI controls and graphical objects: minimum 3:1.
Keyboard navigation
Every interactive element reachable via Tab. Logical focus order. Visible focus rings (never
outline: none without replacement). Skip-to-content link at page top.Screen reader
Semantic HTML first (use
nav, main, article, button). ARIA labels on icon-only buttons. Alt text on every meaningful image.Touch targets
Minimum 44×44px tappable area for all interactive elements. Spacing of at least 8px between adjacent targets to prevent mis-taps.
Motion sensitivity
Respect
prefers-reduced-motion. No auto-playing video. No flashing content exceeding 3 flashes per second.Text scaling
Layout holds up to 200% browser zoom. Use rem/em units for typography. Container widths in % or max-width, not fixed px.
Contrast checks (palette pairs)
Aa
White on Navy
Body text / dark sections
Body text / dark sections
14.4 : 1
PASS AAA
Aa
Dark on Surface
Body copy on light bg
Body copy on light bg
16.9 : 1
PASS AAA
Aa
Teal on White
Links and eyebrows
Links and eyebrows
4.7 : 1
PASS AA
Aa
White on Teal
CTA buttons
CTA buttons
4.7 : 1
PASS AA
Aa
White on Gold
Avoid — fails AA for body
Avoid — fails AA for body
2.1 : 1
FAIL
Aa
Grey soft on White
Avoid for body — use only for captions ≥14px
Avoid for body — use only for captions ≥14px
2.6 : 1
FAIL
Implementation checklist
Every form input has a
<label>All images have
alt attributesFocus rings visible on all interactive elements
Skip-to-content link at top of body
Heading hierarchy doesn't skip levels
Buttons use
<button>, not <div>Links use
<a> with hrefIcon-only buttons have
aria-labelForms announce errors to screen readers
Site usable with JS disabled (graceful degradation)
Tested with VoiceOver / NVDA before launch
Lighthouse Accessibility score 95+
Voice and tone
The voice draws from three places: the strategic language in the CPFS brief (innovation, co-creation, value creation, ELEVATE / SCALE UP / INCREASE REACH); the tone of the benchmarks CPFS named (UFS "we support chefs", Cookmunity warmth, Great Food Solutions credibility); and the audience the brief specifies (Hotels, Restaurants & Cafes, Canteens & Caterers, Emerging Food Businesses).
Voice
A trusted partner for food service operators. Knowledgeable without being clinical. Warm without being casual. Confident in capability, generous with help.
Tone
Professional and partner-oriented, like UFS's "built by chefs, for chefs". Lead with what we can do for the operator. Avoid corporate distance; avoid casual slang. CPFS supports food businesses to elevate, scale up, and reach further.
Audience
From the brief: Hotels, Restaurants & Cafes, Canteens & Caterers, Emerging Food Businesses. Chefs, kitchen managers, procurement leads, and owner-operators of food businesses across the Philippines.
Brand language
Pull from the rebrand deck: innovation, co-creation, value creation, solving customer pain points, ELEVATE, SCALE UP, INCREASE REACH, from inspiration to purchase. These aren't just slogans; they're how CPFS positions itself.
Mood words
Partner, solution, support, elevate, customise, co-create, reliable, consistent, scalable
Writing rules
Capitalisation
Sentence case for all body copy and headings. Uppercase with wide tracking for eyebrows, navigation, and section labels only. The three pillars (ELEVATE, SCALE UP, INCREASE REACH) stay all-caps when used as named pillars.
CTA pattern
"[Verb] [object]" format. Direct and clear. Examples: "View product", "View recipe", "Request a quote", "Explore solutions", "Talk to our team".
Address
First person plural (we/our) for the CPFS voice. Second person (you/your) when speaking to the operator. Never third person.
Sentence length
Short. Lead with the value, follow with the proof. Hero headlines: 10 words or fewer. Product short descriptions: 25 words or fewer.
Numbers and units
Always specific where the brief calls for it: case config, yield, dilution ratio, shelf life. "1.7kg case" not "large case". Operators trust numbers.
Spelling
Philippine English. Be consistent within a single piece.
Content don'ts
Avoid: corporate language ("best-in-class solutions")
Avoid: superlatives without proof ("world's finest")
Avoid: jargon ("synergistic offerings")
Avoid: generic claims ("quality you can trust")
Avoid: stock phrases ("at the forefront of innovation")
Avoid: long paragraphs on landing pages
Avoid: emoji as functional UI elements
Avoid: exclamation marks in headlines
Copy examples
These examples demonstrate how the writing rules and brand language work together. Final copy will be developed with CPFS during the content phase; these show tone and structure, not final wording.
HERO HEADLINE
Elevate your menu. Scale up your kitchen.
Uses the three brand pillars (ELEVATE, SCALE UP) as the lead message.
HERO SUBLINE
From inspiration to purchase, Century Pacific Food Solutions partners with hotels, restaurants, canteens, and emerging food businesses across the Philippines.
Uses the brief's "inspiration to purchase" framing and audience list.
PRODUCTS INTRO
Six product categories built for food service: Marine, Meat, Milk, Tomato, Coconut, and Plant-Based. Each SKU includes the case config, yield, dilution, and shelf life your kitchen needs to plan.
Lists the product categories and details exactly as the brief specifies for PDPs.
RECIPES INTRO
Inspiration for your menu. Recipes developed for food service operators, featuring the CPFS products that make every dish repeatable at scale.
Leans into the "inspiration" half of the journey and signals scale.
SOLUTIONS INTRO
Beyond product supply, we work with you to solve real kitchen problems. Customisations, ideations, collaborations, and on-ground roadshows. Co-create with us.
Pulls "co-creation" and "solving customer pain points" directly from the brief's positioning.
PRODUCT SHORT DESCRIPTION
[Product name]. Built for [application]. Case of [X], yields up to [Y] servings, shelf life [Z].
Template structure matching the brief's PDP requirements. CPFS to supply final product copy.
Photography direction
The brief doesn't specify photography style, but the benchmark sites give us cues: UFS uses chef portraits and dish hero shots; Cookmunity uses warm Filipino food photography. Direction below is proposed and should be validated with CPFS before the shoot. Image asset specs are technical standards.
Mood
Warm and inviting, like the benchmark sites. Real food in real service contexts. Photography should feel professional but not overly clinical.
Products
Clean catalogue shots on white or soft neutral backgrounds. Pack-on, label-forward. Optional secondary lifestyle shot showing the product in a finished dish for context.
Recipes
Hero shots of the finished dish at portion size that matches food service scale. Close-up texture crops can support ingredient detail.
People
Chefs and operators in working kitchen contexts where appropriate, in the spirit of UFS's "built by chefs, for chefs" positioning. Photography brief to be developed with CPFS.
Composition
Generous whitespace around hero images. Strong, clear compositions. Mix wide context shots with close detail to support both inspiration (recipes) and procurement (products).
Colour grading
Warm and natural, to flatter food. Consistent across the site. Final grading direction to be locked once initial assets are reviewed.
Image specs
| Asset | Format | Max size | Dimensions |
|---|---|---|---|
| Hero banners | WebP / JPEG | 250 KB | 1920 × 800px |
| Product images | WebP / PNG | 120 KB | 1200 × 1200px |
| Recipe hero | WebP / JPEG | 180 KB | 1600 × 1200px |
| Recipe card | WebP / JPEG | 80 KB | 800 × 600px |
| Blog thumbnail | WebP / JPEG | 60 KB | 800 × 500px |
| Brand logos | SVG | 20 KB | Vector |
All images served via Shopify's CDN with automatic format negotiation. Alt text required on every image. Decorative-only images get
alt="".