Werq Studio · design systemየንድፍ ሥርዓት
Wedeb design system, v1የወደብ የንድፍ ሥርዓት፣ ዕትም 1
Every token, component and state used on the five public pages. This page is the handover artefact: a developer builds page six from here without asking a question. በአምስቱ ገጾች ላይ የተጠቀምንባቸው ሁሉም ቶከኖች፣ አካሎችና ሁኔታዎች። ይህ ገጽ የማስረከቢያ ሰነድ ነው፦ አንድ ገንቢ ስድስተኛውን ገጽ ጥያቄ ሳይጠይቅ ከዚህ ይሠራል።
01 · The deviceመሠረታዊ ሐሳብ
One shape does all the work: the corridor chevronአንድ ቅርጽ ሁሉንም ሥራ ይሠራል፦ የመስመሩ ሹል ምልክት
The logo is three chevrons in a row — a container corridor, with the last one amber because it is the cleared one. That same chevron becomes the eyebrow marker, the timeline node, the button arrow, the form-step cut and the corridor strip. Nothing else is asked to be decorative.አርማው በተከታታይ የተቀመጡ ሦስት ሹል ምልክቶች ናቸው — የኮንቴነር መስመር፤ የመጨረሻው አምበር የሆነው የተለቀቀውን ስለሚወክል ነው። ያው ሹል ምልክት የክፍል መለያ፣ የጊዜ ሰንጠረዥ ነጥብ፣ የአዝራር ቀስት፣ የቅጽ ደረጃ መለያና የመስመሩ ገመድ ይሆናል። ከዚህ ውጪ ማንም አካል ለጌጥ አልተቀመጠም።
Logo, three waysአርማው በሦስት መንገድ
Flat, single stroke weight, no gradient. Minimum 16 px; below that the amber chevron merges and the mark stops reading — use the wordmark instead.ጠፍጣፋ፣ አንድ የመስመር ውፍረት፣ ቀለም ማወራረድ የለም። ዝቅተኛው 16 ፒክስል፤ ከዚያ በታች የአምበሩ ምልክት ይዋሃዳል፤ አርማው መነበብ ያቆማል — በዚያ ጊዜ የቃል አርማውን ይጠቀሙ።
The chevron, reusedሹል ምልክቱ በተደጋጋሚ
as a section eyebrowየክፍል መለያ ሆኖ
- 1
- as a step cutየደረጃ መለያ
- 3
- as a checklist tickየዝርዝር ምልክት ሆኖ
02 · Colourቀለም
Navy carries the page. Amber only ever means “act” or “now”.ገጹን ኔቪ ይሸከመዋል። አምበር ትርጉሙ “እርምጃ ውሰድ” ወይም “አሁን” ብቻ ነው።
Amber is never used for decoration, headings or borders that mean nothing. If it is amber, it is either a button you should press or the step your cargo is on right now. That discipline is what makes the tracking page readable at a glance.አምበር ለጌጥ፣ ለአርዕስት ወይም ትርጉም ለሌለው ድንበር አይውልም። አምበር ከሆነ፣ ወይ ሊጫኑት የሚገባ አዝራር ነው፣ ወይ ጭነትዎ አሁን ያለበት ደረጃ ነው። የክትትል ገጹ በአንድ እይታ የሚነበበው በዚህ ሥርዓት ነው።
#122A43Primary. Headers, body text, dark sections.ዋና። ራስጌ፣ የጽሑፍ አካል፣ ጠቆር ያሉ ክፍሎች።#F5A623Action and live status only. Never decorative.ለእርምጃና ለቀጥታ ሁኔታ ብቻ። ለጌጥ በጭራሽ።#6B7A8CSecondary text, metadata, hairlines.ሁለተኛ ጽሑፍ፣ ተጨማሪ መረጃ፣ ቀጫጭን መስመሮች።#F2F5F8Page ground. Cool, not cream — this is an operations tool.የገጽ መደብ። ቀዝቃዛ፣ ክሬም አይደለም — ይህ የሥራ መሣሪያ ነው።#16794FStatus: done, released, delivered.ሁኔታ፦ ተጠናቋል፣ ተለቀቀ፣ ደርሷል።#B26A00Status: waiting on customs or a permit.ሁኔታ፦ ጉምሩክ ወይም ፈቃድ በመጠበቅ።#B3352FStatus: behind the promised date. Always with a reason.ሁኔታ፦ ከተባለው ቀን ዘግይቷል። ሁልጊዜ ከምክንያት ጋር።#0A1A2EFooter, CTA band, duotone plate ground.ግርጌ፣ የጥሪ ክፍል፣ የምስል መደብ።Amber #F5A623 fails on white for text, so text-on-light uses Amber 700 #C97F0E instead; #F5A623 is kept for fills, chips and the navy-background eyebrow. Every body pairing on this site is 4.5:1 or better.አምበር #F5A623 በነጭ ላይ ለጽሑፍ አይመጥንም፤ ስለዚህ በብርሃን መደብ ላይ ያለ ጽሑፍ Amber 700 #C97F0E ይጠቀማል። #F5A623 ለሙሉ ቀለም፣ ለምልክቶችና በኔቪ መደብ ላይ ላለው መለያ ይቀራል። በዚህ ገጽ ላይ ያለው ሁሉም ጥምረት 4.5:1 ወይም የተሻለ ነው።
03 · Typeፊደል
Archivo for headings, Inter for body, Noto Sans Ethiopic for both in አማርኛለአርዕስት Archivo፣ ለጽሑፍ Inter፣ በአማርኛ ለሁለቱም Noto Sans Ethiopic
Amharic is not a smaller afterthought: it gets its own line-height scale, applied at the root the moment the language switches. Ethiopic needs roughly 18% more leading than Latin at the same size or the ደ and ጠ forms collide.አማርኛ ኋላ የሚታሰብ ትንሽ ነገር አይደለም፦ ቋንቋው በሚቀየርበት ቅጽበት በዋናው ላይ የሚተገበር የራሱ የመስመር ክፍተት መጠን አለው። ኢትዮፒክ በተመሳሳይ መጠን ከላቲን 18% ገደማ የበለጠ ክፍተት ይፈልጋል፤ አለበለዚያ እንደ ደ እና ጠ ያሉ ቅርጾች ይጋጫሉ።
Archivo 700
In plain words.በግልጽ ቃላት።
Archivo 700
Where your container isኮንቴነርዎ የት አለ
Archivo 700
Four services, one fileአራት አገልግሎቶች፣ አንድ ፋይል
Archivo 700
Released — and you hear it firstተለቀቀ — መጀመሪያ የሚሰሙት እርስዎ ነዎት
Inter 400 / Noto 400
Freight forwarding, customs clearance and warehousing on the Djibouti–Addis corridor. You get a status, a timestamp and a name — not a promise.በጅቡቲ–አዲስ አበባ መስመር የጭነት ማስተላለፍ፣ የጉምሩክ ማስወጣትና የመጋዘን አገልግሎት። የምናቀርበው ተስፋ አይደለም — ሁኔታ፣ ሰዓትና የሰው ስም ነው።
Archivo 600, +.15em
Djibouti · Galafi · Modjo · Kalityጅቡቲ · ጋላፊ · ሞጆ · ካሊቲ
Inter 500
WLB-2026-1187 · 09:42 · 84,500 ETB · MODJO-IMP-2026-118744
Bilingual rules that are not negotiableየማይደራደሩ የሁለት ቋንቋ ሕጎች
- Same information architecture in both languages — never a shorter Amharic page.በሁለቱም ቋንቋዎች አንድ አይነት አወቃቀር — በጭራሽ አጠር ያለ የአማርኛ ገጽ አይኖርም።
- Trade terms stay in English inside Amharic sentences — LC, demurrage, FCL, HS code. That is how the corridor actually speaks.የንግድ ቃላት በአማርኛ ዓረፍተ ነገር ውስጥ በእንግሊዝኛ ይቀራሉ — LC፣ demurrage፣ FCL፣ HS code። መስመሩ በእውነት የሚናገረው እንዲህ ነው።
- Uppercase and wide letter-spacing are switched off for Ethiopic — Ge'ez has no case, and tracking damages it.ለኢትዮፒክ አቢይ ፊደልና ሰፊ የፊደል ክፍተት ይጠፋሉ — ግዕዝ አቢይ/ንዑስ ልዩነት የለውም፤ ክፍተቱም ይጎዳዋል።
- Dates carry both calendars where a person would say both: “25 Aug / ነሐሴ 19”.ሰው ሁለቱንም በሚናገርበት ቦታ ቀኖች ሁለቱንም አቆጣጠር ይይዛሉ፦ “25 Aug / ነሐሴ 19”።
- The choice is stored in localStorage, so a returning client never re-picks it.ምርጫው በlocalStorage ይቀመጣል፤ ተመላሽ ደንበኛ ዳግም አይመርጠውም።
Font budgetየፊደል ጫና
| Familyቤተሰብ | Weightsውፍረት | woff2 |
|---|---|---|
| Archivo | 600, 700 | ~38 KB |
| Inter | 400, 500 | ~42 KB |
| Noto Sans Ethiopic | 400, 600 | ~74 KB |
| Totalጠቅላላ | ~154 KB of a 200 KB budget, unicode-range subsetከ200 ኪባ ጫና ውስጥ፣ በunicode-range የተቆረጠ | |
Six faces total, no italics, no variable axes. Ethiopic loads only when the Amharic subset is requested, so an English-only visitor never pays for it.በጠቅላላው ስድስት ፊደሎች፣ ኢታሊክ የለም፣ ተለዋዋጭ ዘንግ የለም። ኢትዮፒክ የሚጫነው የአማርኛው ክፍል ሲጠየቅ ብቻ ነው፤ በእንግሊዝኛ ብቻ የሚጎበኝ ሰው ወጪውን አይሸከምም።
04 · Tokensቶከኖች
Spacing, radius, shadowክፍተት፣ ማዕዘን፣ ጥላ
Scaleመጠን
| Token | Value | Used forአገልግሎት |
|---|---|---|
--s2 / --s3 | 8 / 12 px | Inside chips, between form label and fieldበምልክቶች ውስጥ፣ በቅጽ መለያና ሳጥን መካከል |
--s5 | 24 px | Card padding, timeline step gapየካርድ ክፍተት፣ የደረጃዎች ልዩነት |
--s7 / --s9 | 48 / 96 px | Section rhythm — mobile / desktopየክፍሎች ምት — በስልክ / በኮምፒዩተር |
--r-sm | 3 px | Everything interactive. Sharp on purpose.ሁሉም የሚነካ አካል። ሹልነቱ በሐሳብ ነው። |
--sh-1 | 2-layer | Cards only. Nothing floats without reason.ለካርዶች ብቻ። ያለ ምክንያት ምንም አይንሳፈፍም። |
Performance budgetየፍጥነት ጫና
| Metricመለኪያ | Budgetጫና |
|---|---|
| LCP on throttled 3Gበተገደበ 3G | ≤ 2.0 s |
| CSS | ~24 KB gzipped, one fileየተጨመቀ፣ አንድ ፋይል |
| JS | ~11 KB gzipped, no frameworkየተጨመቀ፣ ፍሬምወርክ የለም |
| Hero imageዋና ምስል | ≤ 120 KB WebP + LQIP |
| Hero videoዋና ቪዲዮ | none, everየለም፣ በጭራሽ |
| Third-party trackersየሦስተኛ ወገን መከታተያ | 0 |
This is why the hero is a status board and not a photograph: the most persuasive element on the page costs 2 KB of HTML.ዋናው ክፍል ፎቶ ሳይሆን የሁኔታ ሰሌዳ የሆነው ለዚህ ነው፦ በገጹ ላይ እጅግ አሳማኙ አካል 2 ኪባ HTML ብቻ ያስከፍላል።
05 · Imageryምስሎች
Duotone plates, labelled with their treatment and weightበሁለት ቀለም የተሠሩ ምስሎች፣ ከአሠራራቸውና ከክብደታቸው ጋር
Real corridor subjects only — Modjo container stacks, the Kality racks, the 05:40 truck queue, a declaration with a release stamp. No handshakes, no globes, no glass-tower skylines. Each plate below is CSS in this mockup and a duotoned WebP in production; the label states the treatment so a photographer can match it.የመስመሩ እውነተኛ ትዕይንቶች ብቻ — የሞጆ ኮንቴነር ክምር፣ የካሊቲ መደርደሪያዎች፣ የ05:40 የመኪና ሰልፍ፣ የልቀት ማህተም ያለበት ዲክላራሲዮን። እጅ መጨባበጥ የለም፣ ግሎብ የለም፣ የመስታወት ሕንፃ ትዕይንት የለም። ከዚህ በታች ያለው እያንዳንዱ ምስል በዚህ ማሳያ ላይ CSS ነው፤ በተግባር ግን በሁለት ቀለም የተሠራ WebP ይሆናል። ፎቶግራፍ አንሺ እንዲያዛምደው መለያው አሠራሩን ይገልጻል።
06 · Componentsአካሎች
Buttons, chips, fieldsአዝራሮች፣ ምልክቶች፣ ሳጥኖች
Buttonsአዝራሮች
One amber button per screen. If a page seems to need two, the second one is not really primary.በአንድ ማያ ገጽ ላይ አንድ አምበር አዝራር። ገጽ ሁለት የሚያስፈልገው መስሎ ከታየ፣ ሁለተኛው በእውነት ዋና አይደለም።
Status chipsየሁኔታ ምልክቶች
A late chip never ships without a reason line beside it. That rule is in the CMS, not just in the design.የመዘግየት ምልክት ያለ ምክንያት መስመር በጭራሽ አይወጣም። ይህ ሕግ በንድፍ ብቻ አይደለም፤ በይዘት አስተዳደሩ ውስጥ ነው።
Field, and the same field wrongሳጥን፣ እና ያው ሳጥን ተሳስቶ
Use an Ethiopian mobile — 09…, 07… or +251…የኢትዮጵያ ሞባይል ይጠቀሙ — 09…፣ 07… ወይም +251…
Errors say what to type, not “invalid input”. They never apologise.የስህተት መልእክቶች “ልክ ያልሆነ ግብዓት” አይሉም፤ ምን መጻፍ እንዳለበት ይናገራሉ። በጭራሽ ይቅርታ አይጠይቁም።
Timeline node statesየደረጃ ነጥብ ሁኔታዎች
Doneተጠናቋል
Current — pulses once every 2 sአሁን ያለበት — በየ2 ሰከንዱ ይመታል
Planned — dashed ring, dimmed textየታቀደ — በተቆራረጠ ክብ፣ በደበዘዘ ጽሑፍ
07 · Statesሁኔታዎች
Loading, empty, error, 404 — all bilingual, all written by a personመጫን፣ ባዶ፣ ስህተት፣ 404 — ሁሉም በሁለት ቋንቋ፣ ሁሉም በሰው የተጻፉ
These four screens get more traffic than any marketing page and are usually the last thing anybody designs. Here they came first.እነዚህ አራት ማያ ገጾች ከየትኛውም የማስታወቂያ ገጽ በላይ ይጎበኛሉ፤ ብዙውን ጊዜ ግን መጨረሻ ላይ ይነደፋሉ። እዚህ መጀመሪያ ተነደፉ።
Loading skeletonየመጫን ንድፍ
Shown for the ~700 ms a real lookup takes. Blocks match the shape of the result, so nothing jumps when data lands.እውነተኛ ፍለጋ የሚወስደውን 700 ሚሊሰከንድ ገደማ ይታያል። ብሎኮቹ የውጤቱን ቅርጽ ይመስላሉ፤ መረጃው ሲመጣ ምንም አይዘልም።
Emptyባዶ
Enter a shipment number to see its statusሁኔታውን ለማየት የጭነት ቁጥር ያስገቡ
Your number is on the booking confirmation and on every email we send about the shipment. Format: WLB-2026-1187.ቁጥርዎ በቦታ ማስያዣ ማረጋገጫው ላይ እና ስለ ጭነቱ በምንልክልዎ በየኢሜይሉ ላይ አለ። አጻጻፍ፦ WLB-2026-1187።
An empty screen is an instruction, not an apology — it says where to find the number.ባዶ ማያ ገጽ ይቅርታ አይደለም፤ መመሪያ ነው — ቁጥሩ የሚገኝበትን ይናገራል።
Error — not foundስህተት — አልተገኘም
No shipment filed under that numberበዚህ ቁጥር የተመዘገበ ጭነት የለም
The format is right, but nothing is filed under it. It may belong to another forwarder, or the booking may not be confirmed yet.አጻጻፉ ትክክል ነው፤ በዚህ ቁጥር ግን የተመዘገበ የለም። የሌላ አስተላላፊ ሊሆን ይችላል፤ ወይም ቦታ ማስያዣው እስካሁን አልተረጋገጠም።
Every dead end offers the human channel. In Ethiopia that channel is Telegram, so it is a first-class exit, not a footnote.ማንኛውም መዘጋት የሰው መስመር ያቀርባል። በኢትዮጵያ ያ መስመር ቴሌግራም ነው፤ ስለዚህ የግርጌ ማስታወሻ አይደለም፤ ዋና መውጫ ነው።
404
That page is not on the corridorይህ ገጽ በመስመሩ ላይ አይገኝም
If you were looking for a shipment, the number goes in the tracking box — not in the address bar.ጭነት ሲፈልጉ ከነበረ ቁጥሩ በክትትል ሳጥኑ ውስጥ ይገባል — በአድራሻ መስመሩ ላይ አይደለም።
08 · Mobile first, literallyበእውነት ስልክ ቀዳሚ
375 px is the design. Desktop is what we do with the leftover space.375 ፒክስል ንድፉ ነው። ኮምፒዩተር ደግሞ በተረፈው ቦታ የምናደርገው ነው።
Most of Wedeb's clients open this on a phone, standing in a yard, on a connection that comes and goes. So the single column is the real layout: one thought per row, thumb-sized controls, and the corridor strip scrolls sideways instead of shrinking to nothing.አብዛኞቹ የወደብ ደንበኞች ይህን በስልክ ይከፍቱታል — ግቢ ውስጥ ቆመው፣ በሚቆራረጥ መስመር። ስለዚህ ትክክለኛው አቀማመጥ አንዱ አምድ ነው፦ በአንድ መስመር አንድ ሐሳብ፣ በጣት የሚመቹ መቆጣጠሪያዎች፣ እና የመስመሩ ገመድ እስከመጥፋት ከመጨመቅ ይልቅ ወደ ጎን ይንሸራተታል።
- One column, 20 px page gutterአንድ አምድ፣ 20 ፒክስል የገጽ ጠርዝ
- Nav collapses to a sheet; the language toggle stays visible at all timesዝርዝሩ ይታጠፋል፤ የቋንቋ መቀየሪያው ግን ሁልጊዜ ይታያል
- Track field and button stack, both full widthየክትትል ሳጥኑና አዝራሩ ተደራርበው፣ ሁለቱም ሙሉ ስፋት
- Corridor strip becomes a snap-scroll carouselየመስመሩ ገመድ ወደ ተንሸራታች ይቀየራል
- Timeline keeps its full copy — nothing is hidden on small screensየደረጃ ሰንጠረዡ ሙሉ ጽሑፉን ይይዛል — በትንሽ ማያ ገጽ ምንም አይሸሸግም
- Letterhead stamp drops below the text instead of overlapping itየወረቀቱ ማህተም ጽሑፉን ከመሸፈን ይልቅ ከሥሩ ይወርዳል
- Hero splits: headline left, the live board right — the board is the proof, so it earns half the screenዋናው ክፍል ይከፈላል፦ አርዕስቱ በግራ፣ የቀጥታ ሰሌዳው በቀኝ — ሰሌዳው ማስረጃው ነው፤ ስለዚህ ግማሽ ማያ ገጹን ያገኛል
- Body type rises 16 → 17 px; section rhythm 48 → 96 pxየጽሑፉ መጠን ከ16 ወደ 17 ፒክስል፤ የክፍሎች ምት ከ48 ወደ 96 ፒክስል
- Corridor strip lays out flat, all five nodes visible at onceየመስመሩ ገመድ ተዘርግቶ አምስቱም ነጥቦች በአንድ ጊዜ ይታያሉ
- Service tiles go 1 → 2 → 4 acrossየአገልግሎት ሳጥኖች ከ1 ወደ 2 ወደ 4 ይሰፋሉ
- Nothing new appears on desktop that a phone user cannot reachበስልክ ተጠቃሚ የማይደረስበት አዲስ ነገር በኮምፒዩተር ላይ አይታይም
Visible focus ring in Corridor Amber on every control · full keyboard path through the quote form · prefers-reduced-motion stops the board ticker and the node pulse · status changes announced via aria-live · the language toggle sets the document lang, so screen readers switch voice with it.በየመቆጣጠሪያው ላይ በአምበር የሚታይ የትኩረት ክብ · በዋጋ ቅጹ ውስጥ ሙሉ የቁልፍ ሰሌዳ መንገድ · prefers-reduced-motion የሰሌዳውን መንቀሳቀስና የነጥቡን ምት ያቆማል · የሁኔታ ለውጦች በaria-live ይነገራሉ · የቋንቋ መቀየሪያው የሰነዱን lang ያስቀምጣል፤ ስለዚህ የማያ ገጽ አንባቢዎች ድምፃቸውን አብረው ይቀይራሉ።
This system is the templateይህ ሥርዓት ራሱ አብነቱ ነው
Swap the palette, the two typefaces and the plates, and the same structure serves any operations-led business on this corridor. That is the point of building it properly once.ቀለሙን፣ ሁለቱን ፊደሎችና ምስሎቹን ይለውጡ፤ ያው አወቃቀር በዚህ መስመር ላይ ላለ ማንኛውም የክንውን ተኮር ሥራ ያገለግላል። አንድ ጊዜ በአግባቡ የመሥራት ጥቅሙ ይህ ነው።