ALLVEGHUB ECOSYSTEM

Design System & Shared Rules

One design language across four sites. This document defines the colors, typography, spacing, components, animations, and responsive rules that keep AllVegHub and its three partner sites visually consistent.

← Back to AllVegHub
01 / FOUNDATION

Design Philosophy

PrincipleApplication
Black · Red · WhiteThe core palette. Black for text and footer, red for accents and CTAs, white (paper) for backgrounds. No large dark areas except the footer.
Bright & OpenGenerous whitespace, light backgrounds, minimal borders. Sections breathe with 104px vertical padding on desktop.
Red as SignalRed is reserved for action — CTAs, hover states, focus rings, underline animations. Never decorative.
Consistent InteractionHover always follows the same language: pink fill (#fef0f0) + red accent. Underlines slide left-to-right; fills expand top-to-bottom or left-to-right.
Human-First CopyConcise, practical, no marketing fluff. Headlines in serif, body in sans-serif. Every CTA leads to a clear next step.
02 / PALETTE

Color System

Core Variables (Shared Across 4 Sites)

--red
Brand Red#e03a3e
--ink
Ink (Text)#20231f
--paper
Paper (BG)#fbfaf7
--line
Line (Border)#dedbd3
--muted
Muted Text#6d746e
--dark
Footer BG#151817

Site-Specific Accent Colors

SiteVariableHexUsage
senyo--olive#8b9440Route card top bar, code label, arrow, ecosystem dot
seleglu--green#2ba745Route card top bar, code label, arrow, ecosystem dot
dasumen--blue#0a5c6cRoute card top bar, code label, arrow, ecosystem dot
AllVegHub--red#e03a3ePrimary accent, CTA, all hover/focus states

Interaction Colors

hover fill
Hover Fill#fef0f0
cta hover
CTA Hover#bd252a
outcomes
Outcomes BG#f7f5f0
future
Future BG#f0ede6
03 / TYPE

Typography

Font Families

RoleStackSource
Headings (h1, h2, h3)"Noto Serif SC", "Source Han Serif SC", Georgia, serifGoogle Fonts / Adobe Fonts
Body & UI"Noto Sans", Roboto, "Liberation Sans", sans-serifGoogle Fonts / System
Monospace (code)monospaceSystem default

Type Scale

Hero H1
clamp(48px, 6.3vw, 91px) · 600 · 1.04 · -.04em
Start with the right path.
Section H2
clamp(36px, 4vw, 56px) · 600 · 1.08 · -.04em
Three focused ways forward.
Bottom H2
clamp(44px, 5.4vw, 75px) · 600 · 1.05 · -.04em
Not sure where your need fits?
Step H3
27px · 600 · -.04em
Human review & clarify
Insight H3
25px · 600 · 1.18 · -.04em
Why coordination belongs earlier
Route/Future H3
23px · 600 · -.04em
Fermentation-derived ingredients
FAQ Title
17px · 600 · sans-serif
How does AllVegHub charge?
Body Text
15px · 400 · 1.55 · sans-serif
AllVegHub brings fragmented capabilities together earlier — connecting ingredient, manufacturing and sourcing conversations.
Legal P
15px · 400 · 1.7 · sans-serif
We do not sell your data to third parties. We do not use your information for marketing lists.
Eyebrow
10px · 700 · .13em · sans-serif
EARLY ECOSYSTEM COORDINATION
Nav / CTA
13px · 600/700 · sans-serif
Submit for review
Footer Copyright
10px · 700 · .08em · sans-serif
© 2026 ALLVEGHUB. ALL RIGHTS RESERVED.
04 / RHYTHM

Spacing System

Layout Dimensions

ElementDesktopMobile (≤760px)
Header height82px68px
Header gap (between items)40px12px
Wrap max-width1280px—
Wrap side padding5vw22px
Section vertical padding104px 072px 0
Nav link gap30pxnav hidden
Tools gap18px12px
CTA padding14px 20px11px 13px
Route card padding28px28px
Step card padding25px 28px25px 28px
FAQ button padding22px 16px22px 16px
Answer padding18px 42px 23px 20pxsame
Bottom section padding95px 095px 0
Footer padding55px 5vw 22px40px 22px 20px
Form field padding18px 018px 0
Input padding12px 14px12px 14px

Grid Gaps

GridDesktopMobile
Routes / Steps1px (border-based)1px
Future grid18px15px
Insights grid22pxsingle column
Outcomes1px (border-based)1px
Footer links10px 28pxblock
05 / COMPONENTS

Component Specifications

CTA Button

Submit for review ↗
Background--red
Padding14px 20px
Font13px / 700
Hover BG#bd252a
Hover transformtranslateY(-2px)
Transition.2s

Nav Link

Insights
Font13px / 600
Click areaFull header height (82px)
Underline3px --red, scaleX(0→1)
Originleft
Duration.25s
Hover color--red

Dropdown Menu

Partner sites ▾
senyo
Open animationscaleY(0→1)
Origintop
Duration.25s
Gap (button→menu)12px transparent bridge
Item padding10px 16px

Form Input

Border1px solid --line
Padding12px 14px
Radius4px
Hover BG#fef0f0
Focus border--red
Focus ring0 0 0 3px #e03a3e15
Placeholder#aab1ab 14px

Step Card

STEP 01

Submit context

Share specifications and volume.

Top border3px solid --red
Hover fill#fef0f0 left→right
Fill duration.35s

FAQ Row

How does AllVegHub charge?+
Hover fill#fef0f0 top→bottom
Fill duration.3s
Plus iconscale(1.35) on hover
Icon duration.2s
06 / MOTION

Animation Specifications

ComponentTransformOriginDurationEasing
Nav underlinescaleX(0→1)left0.25sdefault
Dropdown button underlinescaleX(0→1)left0.25sdefault
Dropdown menu openscaleY(0→1), opacity(0→1)top0.25s / 0.15sease
Step card hover fillscaleX(0→1)left0.35sease
FAQ row hover fillscaleY(0→1)top0.3sease
FAQ plus iconscale(1→1.35)center0.2sease
CTA hovertranslateY(0→-2px)—0.2sdefault
Route top barscaleX(0→1)left0.25sdefault
Footer link colorcolor transition—0.2sdefault
Eco dot opacityopacity(0→1)—0.2sdefault
Hero carouselimage swap—4800ms interval—

Rule: Horizontal fills (step cards, nav underlines, route bars) always use scaleX with transform-origin:left. Vertical fills (FAQ rows, dropdown menus) always use scaleY with transform-origin:top.

07 / BREAKPOINTS

Responsive Design

ElementDesktop (>760px)Mobile (≤760px)
Header82px height, 40px gap, nav visible68px height, 12px gap, nav hidden
Navigation linksVisible, centered, with red underlineHidden (display:none)
Hero art48% width, 87% opacity, masked78% width, 22% opacity, lighter mask
Route/Step/Insight grids3 columns1 column
Outcomes2 columns side-by-side1 column stacked
Form2 columns1 column
Section padding104px vertical72px vertical
Wrap padding5vw22px
Footer layoutFlex row (logo + links)Block stacked
CTA button14px 20px padding11px 13px padding
Dropdown text13px11px
Top section headerFlex row (title + intro/CTA)Block stacked

Single breakpoint at 760px. No tablet-specific or large-desktop breakpoints. Mobile-first approach is not used — desktop is the default, mobile overrides are applied via @media(max-width:760px).

08 / ECOSYSTEM

Shared Rules & Site Differences

Shared Across All 4 Sites

  • Color core: Black, Red, White (--red, --ink, --paper)
  • Typography: Noto Serif SC for headings, Noto Sans for body
  • Header pattern: Logo + centered nav + CTA + partner dropdown
  • Footer pattern: Dark #151817 bg, white logo, 2-column links, ecosystem row
  • CTA style: Red button, 14px 20px, hover lift
  • Hover language: Pink fill #fef0f0 + red accent
  • Underline animation: scaleX(0→1), origin left, 0.25s
  • Card structure: Image top, text bottom, dashed/solid border
  • Responsive: Single breakpoint 760px, nav hidden on mobile
  • Ecosystem links: Each site links to the other 3 in footer

Site-Specific Differences

  • Accent color: Each partner site uses its own accent (olive/green/blue) for route cards, dots, and partner links
  • Logo: Each site has its own logo; footer uses white variant
  • Domain: Separate domains (allveghub-v2.pages.dev, senyobiotech.com, seleglu.com, dasumen.com)
  • Hero content: Different headline, lead text, and hero image per site
  • Route cards: AllVegHub shows 3 partner routes; partner sites show their own focus areas
  • Form fields: AllVegHub has 11 fields; partner sites may differ
  • Insights: Different articles per site, same card structure

AllVegHub

Coordination Hub

  • Accent: --red #e03a3e
  • Role: Central entry, routes to 3 partners
  • Nav: Ecosystem / Insights / About
  • Dropdown: Partner sites (senyo / seleglu / dasumen)
  • CTA: "Submit for review"

senyo

Fermentation Ingredients

  • Accent: --olive #8b9440
  • Focus: 4 ingredient families for R&D
  • Domain: senyobiotech.com
  • Logo: senyo.png

seleglu

Manufacturing & Private-Label

  • Accent: --green #2ba745
  • Focus: Sauces, hotpot bases, cooking bases
  • Domain: seleglu.com
  • Logo: bioseleglu.png

dasumen

Sourcing & Partner Matching

  • Accent: --blue #0a5c6c
  • Focus: Human-led sourcing from China
  • Domain: dasumen.com
  • Logo: dasumen.png
09 / ASSETS

Asset & Font Sources

Fonts

FontRoleSourceURL
Noto SansBody, UI, nav, buttonsGoogle Fontsfonts.google.com/specimen/NotoSans
Noto Serif SCHeadings (h1-h3)Google Fontsfonts.google.com/specimen/NotoSerifSC
Source Han Serif SCChinese heading fallbackAdobe Fontsfonts.adobe.com/fonts/source-han-serif
RobotoSans fallbackGoogle Fontsfonts.google.com/specimen/Roboto
GeorgiaSerif system fallbackSystem—
Liberation SansSans system fallbackSystem—

Images (15 files)

FileUsageDimensions
allveghub-en.pngHeader logo (English)165×48px (display)
allveghub-zh.pngChinese logo (backup)165×48px (display)
allveg-logo-white.pngFooter logo (white + red v)170px wide (display)
hero-collaboration.pngHero slide 1 (default)48% width, cover
hero-ingredients.pngHero slide 248% width, cover
hero-production.pngHero slide 348% width, cover
senyo.pngRoute card logo — senyo145×45px (display)
bioseleglu.pngRoute card logo — seleglu145×45px (display)
dasumen.pngRoute card logo — dasumen145×45px (display)
novel-packaging.pngFuture/About card 1100% width × 165px
international-distribution.pngFuture/About card 2100% width × 165px
market-access-advisory.pngFuture/About card 3100% width × 165px
news-ingredients.pngInsights card 1100% width × 220px
news-sauce.pngInsights card 2100% width × 220px
news-network.pngInsights card 3100% width × 220px

Custom Select Arrow (SVG)

Inline SVG data URI, red V-shape chevron:
data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e03a3e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E