VALIOZ · The Living Canvas · v1.1
Design system.
Reusable Gutenberg + Blocksy components for next.valioz.com. Each section below is a synced pattern; edit it once and every page using it updates. Development environment — not public.
Navigation
Buttons
Pills
Cards
Typography
Colour
Forms
Growth Discovery
Logo
العربية RTL
01 · Navigation
Header lockups
The header uses the original VALIOZ logo file, untouched, with a core Navigation block. On narrow screens the menu collapses into the accessible overlay toggle (44px target).
03 · Pills & badges
Selection and labels
Website
Social
Business
Strategy
Content
Demo only
الموقع
السوشيال
البيزنس
04 · Cards
Service, opportunity and experience cards
Cards are core Group blocks with a token class, so they can be reused and restyled from one place. Numbers below are labels, not metrics.
Service
We see before we suggest.
Business context first: we understand the model, audience and constraints before proposing channels.
Opportunity
A clearer path to the next step.
01
Observation
02
Hypothesis
03
Next action
Experience
Built with you, not for you.
Workshops, shared roadmaps and transparent sources.
Experience
Small wins, compounding.
Prioritised experiments with a clear owner.
Insight
Data you can trace.
Every recommendation shows where it came from.
Experience
Growth with clarity.
Navy surfaces carry white text at body size and above.
05 · Typography
Manrope for English, IBM Plex Sans Arabic for Arabic
Scale: Display 96 · H1 64 · H2 52 · H3 24 · Body 16/1.65 · Label 11. Sizes are fluid (clamp) between mobile and desktop.
Display · 800
Your business has more possibilities.
H1 · 800
Let’s find them.
H2 · 800
We see before we suggest.
H3 · 800
Business context first
Body · 400
We understand your business, discover its opportunities and build the solutions that change results.
Label · 800
VALIOZ / GROWTH DISCOVERY
عنوان · 700
كل فرصة نمو بتبدأ بفهم أوضح.
نص · 400
نفهم نشاطك، ونكتشف فرصه، ونبني معاك الحلول اللي تفرق في النتائج.
06 · Colour
Primary, secondary, support
Navy leads. Coral and Canvas are the secondary pair. Pastels support content, never compete with it. Mapped to the Blocksy global palette (slots 1–8).
Deep Navy
Coral
Canvas
Ink
Mint
Lavender
Blue
Butter
Line
Muted
Focus
Rule: navy text on coral. White text on coral is not used at small sizes.
07 · Forms
Fields, help, error and focus
Visual tokens only: 52px fields, 14px radius, 3px focus ring. This form is not connected and sends nothing.
Demo only · not connected
عرض فقط · غير متصل
08 · Growth Discovery
Discovery UI — visual display only
A static, non-functional preview of the Growth Discovery entry point. Nothing here collects or analyses data.
Visual mock · non-functional
How discovery works
Understand, discover, build.
01
Observation
What the business shows today.
02
Hypothesis
Where the opportunity may be.
03
Next action
One clear step to test it.
VALIOZ / GROWTH DISCOVERY
Where should we start?
Website
Social
Business
yourbusiness.com
Discover opportunities →
Business context first
Data & source transparency
عرض مرئي · غير تفاعلي
نفهم، نكتشف، نبني.
نقطة بداية واضحة لاكتشاف فرص النمو في موقعك وحساباتك ونشاطك.
VALIOZ / GROWTH DISCOVERY
نبدأ منين؟
الموقع
السوشيال
البيزنس
yourbusiness.com
اكتشف الفرص ←
فهم البيزنس أولًا
شفافية البيانات والمصادر
09 · Logo
Original assets, unmodified
Files are the supplied PNGs, uploaded byte-for-byte. Never redrawn, recoloured or stretched; white versions only on navy.
١٠ · العربية و RTL
كل بيزنس عنده فرص أكبر. خلّينا نكتشفها.
نفهم نشاطك، ونكتشف فرصه، ونبني معاك الحلول اللي تفرق في النتائج. الاتجاه من اليمين لليسار، والأرقام والروابط اللاتينية معزولة بـ LTR.
خدمة
نشوف قبل ما نقترح.
فهم البيزنس أولًا قبل اختيار أي قناة.
فرصة
خطوة تالية أوضح.
٠١
ملاحظة
٠٢
فرضية
٠٣
إجراء
تجربة
نمو بوضوح.
نبني معاك، مش بالنيابة عنك.
قاعدة: النص الكحلي فوق المرجاني دائمًا.