PALOP GO Marketplace · 3.1.0

A ourela que cose

Todos os componentes do catálogo, com dados reais dos seis mercados. O tema e o modo poupar dados vêm do URL, por isso cada variante tem o seu endereço.

Cor

Papéis, não tons

As duas colunas são os mesmos papéis em claro e em escuro; o escuro é desenhado ao lado do claro, nunca derivado dele.

Chão e tinta

claro · papel branco

background#FBF6EE
surface#FFF3E0
surfaceRaised#FFFFFF
text#0F1F17
textMuted#5B6573
border#F1E3CD
borderInput#7D7569

escuro · noite #0B0F14

background#0B0F14
surface#121820
surfaceRaised#19212B
text#F5F7FA
textMuted#A3ADBB
border#263140
borderInput#6F7F94

Verbo e atenção

claro · papel branco

primary#0B6B37
primaryHover#064E2B
primaryPressed#04391F
onPrimary#FFFFFF
accent#C2410C
warning#F7A21B
merchantAccent#FA8B3C
ring#0B6B37
link#0B6B37

escuro · noite #0B0F14

primary#2BB55A
primaryHover#3FC56A
primaryPressed#22A447
onPrimary#0B0F14
accent#FA8B3C
warning#F7A21B
merchantAccent#FA8B3C
ring#FFC53D
link#5FD07A

Dinheiro

claro · papel branco

money#FFC53D
onMoney#1A1A1A
moneyBox#1A1A1A
onMoneyBox#FFC53D

escuro · noite #0B0F14

money#FFC53D
onMoney#0B0F14
moneyBox#1A1A1A
onMoneyBox#FFC53D

Estados

claro · papel branco

success#0B6B37
successTint#DCF3E3
danger#921B4C
dangerTint#FDE4EE
neutralTint#F4E8D4
track#E8DBC4
skeleton#F4E8D4

escuro · noite #0B0F14

success#3FB64A
successTint#0E3B22
danger#F497BA
dangerTint#4A1027
neutralTint#1E2733
track#263140
skeleton#1E2733

Mapa

claro · papel branco

mapLand#FFFFFF
mapRoad#E6EAF0
mapWater#DCEBF7
mapPark#E3F4E8
mapRoute#F7A21B
mapCourier#13853D
mapDestination#E8361C
mapStore#1A1A1A

escuro · noite #0B0F14

mapLand#121820
mapRoad#263140
mapWater#0F2236
mapPark#0E3B22
mapRoute#F7A21B
mapCourier#2BB55A
mapDestination#FF6B52
mapStore#F5F7FA

As sete categorias

comida
moda
beleza
artesanato
servicos
eventos
mais

Contraste, calculado agora a partir de tokens.json

87 pares · todos cumprem o mínimo

Contraste de cada par de papéis, por tema
TemaFrente sobre fundoRatio
lighttext / background15.89
lighttext / surface15.58
lighttext / surfaceRaised17.09
lighttextMuted / background5.49
lighttextMuted / surface5.39
lighttextMuted / surfaceRaised5.91
lighttextPlaceholder / surface5.39
lighttextDisabled / backgroundexempt (aria-disabled)2.06
lightdisabledText / disabledFillexempt (disabled, 100 % opacity)3.70
lighttext / disabledFilla visible disabledReason is live information, not a dead label12.97
lightprimary / background6.15
lightonPrimary / primary6.62
lightonPrimary / primaryHover9.85
lightonPrimary / primaryPressed13.04
lightaccent / background4.81
lightaccent / surfacea flash-sale header sits on a card, not only on the page4.72
lightonAccent / accent5.18
lightonMerchantAccent / merchantAccent7.31
lightonMoney / money11.03
lightonMoneyBox / moneyBox11.03
lightsuccess / background6.15
lightonSuccessTint / successTint8.43
lightonWarning / warning8.40
lightwarningText / background7.25
lightdanger / background7.86
lightdanger / surface7.71
lightonDanger / danger8.46
lightonDanger / dangerHover11.18
lightonDangerTint / dangerTint9.32
lightonNeutralTint / neutralTint6.24
lightborder / backgrounddecorative hairline1.18
lightborderInput / backgroundnon-text boundary4.22
lightborderInput / surfaceRaisednon-text boundary4.54
lightring / backgroundfocus ring6.15
lightlink / background6.15
lightlink / surface6.04
lightonSelectedChip / selectedChip9.85
lightonToast / toast17.09
lightskeleton / surfacedecorative1.10
lightplaceholderIcon / placeholderTileicon6.74
darktext / background17.91
darktext / surface16.62
darktext / surfaceRaised15.12
darktextMuted / background8.47
darktextMuted / surface7.86
darktextMuted / surfaceRaised7.15
darktextDisabled / backgroundexempt (aria-disabled)4.70
darkdisabledText / disabledFill6.64
darktext / disabledFilla visible disabledReason is live information, not a dead label14.04
darkprimary / background7.19
darkonPrimary / primary7.19
darkonPrimary / primaryHover8.61
darkonPrimary / primaryPressed5.92
darkaccent / background8.07
darkaccent / surface7.49
darkonAccent / accent8.07
darkonMerchantAccent / merchantAccent8.07
darkonMoney / money12.18
darkonMoneyBox / moneyBox11.03
darksuccess / background7.32
darksuccess / surface6.80
darkonSuccessTint / successTint10.59
darkonWarning / warning9.28
darkwarningText / background12.18
darkwarningText / surface11.30
darkdanger / background9.14
darkdanger / surface8.48
darkonDanger / dangerButton8.46
darkonDangerTint / dangerTint12.55
darkonNeutralTint / neutralTint10.61
darkborder / backgrounddecorative seam1.46
darkborderInput / backgroundnon-text boundary4.70
darkborderInput / surfacenon-text boundary4.37
darkring / backgroundfocus ring12.18
darkring / surfacefocus ring11.30
darklink / background9.87
darklink / surface9.17
darklink / surfaceRaised8.34
darkonSelectedChip / selectedChip17.91
darkonToast / toast17.91
darkskeleton / backgrounddecorative1.28
darkplaceholderIcon / placeholderTileicon8.36
darkctText / ctBackgroundControl Tower16.77
darktextMuted / ctBackgroundControl Tower8.69
darkctKpi / ctBackgroundControl Tower KPI12.49
darkprimary / ctBackgroundControl Tower7.38
darkdanger / ctBackgroundControl Tower9.37
Tipografia

Montserrat e Inter

Os títulos em Montserrat, a voz da marca; o corpo e os números em Inter, com algarismos tabulares. Os espécimes carregam os diacríticos todos: ã, õ, ç, á, é, í.

display · 36 / 56Pano e ritmo
h1 · 28 / 40Cachupa à moda da Brava
h2 · 22 / 28Tranças ao domicílio
h3 · 18 / 20Mamã Dinha — Comida Caseira
body · 16O estafeta liga quando chegar; mostre o código à porta.
small · 14Aberto · fecha às 23:00 · entrega em 25 a 35 min
label · 12 (o mínimo)Ponto de referência
eyebrow · 12 +0.08emPerto de si
num.timerXl · 64 mono0:18
num.timerLg · 484 min
num.timer · 32 mono2:45
num.priceXl · 3215 800 Kz
num.otpDisplay · 40 mono4721
num.priceLg · 242 500 Kz
num.price · 161 200$00
num.data · 13 mono+244 92* *** *18
Marca

A marca e a ourela

A marca é desenhada em paths, nunca em texto. O selvedge tem seis bandas em larguras desiguais e um período de 64 px; as instâncias são lei.

BrandMark · full / wordmark / go
AppIcon · light / dark
Ourela · the six instances
hero
sheet
card
row
navSegment
vertical
LosangoRule · PatternField · TicketEdge
Eyebrow
Primitivas

Botões e acções

Button · variants
Button · sizes 40 / 48 / 56 / 64
Button · states
IconButton · ActionRow
Primitivas

Campos, escolhas e separadores

Input · Textarea · Select

O estafeta precisa disto para te encontrar.

PhoneInput · SearchInput
Chip · ChipRail
Toggle · Checkbox · Radio

SegmentedControl · Tabs

Painel: novos

Avatar · Badge · RatingStars · Divider
3 itens128 itens


Primitivas

Estados, avisos e sobreposições

TopStrip · all five, in priority order

Sem ligação. O que fizeres fica guardado e é enviado depois.

2 ações por enviar.

A voltar a ligar…

Modo ilha: a célula está a funcionar sozinha. Os pedidos continuam.

Modo poupar dados ligado: sem fotos nesta rede.

Skeleton · ShuttleLoader · ProgressBar
Countdown · block / inline / xl
Responder em
Toast · Sheet · Dialog

Entregue. Bom proveito!

EmptyState

O pedido está vazio

Comece pela comida: a cachupa da Nha Bia sai às 11:30.

Ver comida
Table · KpiTile
Pedidos
EstadoTotal
#2211Entregue15 800
#2207A preparar8 500
#0481Pagamento850
Pedidos / h128
12%a subir
Tempo médio0:32
8 sa descer
Comércio

Dinheiro

O amarelo é do dinheiro: a etiqueta é ouro com tinta, a caixa é tinta com ouro. O valor é sempre um inteiro na unidade menor do mercado.

MoneyText · the num scale
8 500 Kz8 500 Kz8 500 Kz8 500 Kz
15,99 €990$003 000 FCFA−2,50 €
PriceDisplay · old price, discount, cross-market
12,00 €15,00 €−20 %
8,98 €

≈ 990$00 · entregue em Praia · 1 € = 110,265 CVE em 5 out.

PriceTag · list / hero / free / xl
Entrega 500 Kzdesde 2 500 KzEntrega grátis2 500 Kz2 500 Kz
CashBox · consumer / courier
A pagar ao estafeta15 800 Kztroco para 20 000 Kz
Dinheiro em mãos12 400 Kz
Comércio

Os 17 estados do pedido

Cada estado é uma cor E um ícone E uma etiqueta, por isso nenhum depende do tom. O fio enche-se com a percentagem do estado e cose-se no fim.

OrderStatePill · all 17 states
A aguardar pagamentoPagamento não confirmadoConfirmadoAceiteA prepararProntoSem estafetaEstafeta a caminho da lojaRecolhidoA caminhoA chegarChegouEntregueNão entregueCanceladoReembolso em cursoReembolsado
OrderStatePill · sm
A aguardar pagamentoAceiteA prepararA chegarEntregueCancelado
ProgressThread · every state, with its fill %
  • A aguardar pagamento5%
  • Pagamento não confirmado5%
  • Confirmado15%
  • Aceite25%
  • A preparar40%
  • Pronto50%
  • Sem estafeta50%
  • Estafeta a caminho da loja60%
  • Recolhido70%
  • A caminho80%
  • A chegar90%
  • Chegou95%
  • Entregue100%
  • Não entregue80%
  • Cancelado0%
  • Reembolso em curso0%
  • Reembolsado0%
OrderStateLine · ProgressStepper

O Nelson está a 2 minutos. Ele liga-te quando chegar.

O Nelson recolheu. Chega em 12 a 19 minutos.

  1. Aceite
  2. A preparar
  3. Recolhido
  4. A chegar
  5. Entregue
Comércio

Cartões e o ritmo das tiras

CategoryTile · CategoryRail · SectionHeader
EditorialFeed · hero + pair rhythm (5 stores)
Aberto · fecha às 22:30

Cantinho da Tia Nha Lurdes

Cachupa como na Brava, feita desde as seis da manhã.

35–50 minEntrega 2,49 €

Sabores de Maputo

30–45 min
Entrega 2,99 €Aberto · fecha às 23:00

Capulana & Co.

Entrega 3,99 €Aberto · fecha às 19:00
ItemCard · normal, in cart, esgotou
Mais pedido

Cachupa rica

Milho e feijão cozidos devagar com chouriço, linguiça, toucinho e couve, servida com a colher a ficar de pé.

11,00 €

Cachupa refogada com ovo

A cachupa de ontem salteada em cebola e banha, com ovo estrelado e linguiça por cima.

9,50 €
2
Mais pedido

Pastel com diabo dentro (3 un.)

Massa de batata-doce e milho recheada com atum picante, frita no momento.

4,50 €Esgotou
EventCard · ServiceCard · QuantityStepper

DJ de kizomba e semba para festas

DJ Kalú — Som & Luz

Próxima vaga · qui., 8 out. às 18:30
desde 250,00 €
2
1
PlaceholderTile · the lite and no-photo box
Comércio

Pagamento

A ordem e a disponibilidade vêm do ficheiro do mercado. Um empurrão para o telemóvel nunca diz que correu bem antes do callback.

PaymentWordmark · the provider tiles
PaymentMethodTile · the full set, idle + selected
Com que nota vais pagar?
PaymentMethodTile · pushed, confirmed, failed
Expira em
Comércio

Lugar, código e chamada

O ponto de referência é o título; a rua é metadado. O código de entrega tem o dobro do tamanho do corpo e lê-se em voz alta.

AddressCard · consumer
CasaPin guardado
Condomínio Jardim de RosasPortão 3 · depois da bomba Sonangol
Talatona, Luanda
+244 92* *** *18
Dizer ao guarda que é para a casa 14Nota de voz · 0:08
AddressCard · courier (actions first, 48px rows)
Pin guardado
Condomínio Jardim de RosasPortão 3 · depois da bomba Sonangol
Talatona, Luanda
+244 92* *** *18
Dizer ao guarda que é para a casa 14
AddressCard · compact · MapThumb
Condomínio Jardim de RosasTalatona · Luanda
+244 92* *** *18
OtpInput · idle, filled, error · OtpDisplay
Código de entrega4721

Mostra este código ao estafeta quando ele chegar.

Comércio

Mapa e acompanhamento

O mapa da demonstração é um SVG estático por mercado, pintado pelos tokens. O anel do estafeta é o único ciclo do ecrã.

MapSurface · consumer (route, store, pin, pulsing marker)
Estafeta a 650 m · 4 min
MapSurface · courier (no pulse, lite tile + landmark line)
Estafeta a 2,1 km · 9 min
MapSurface · ops (H3 overlay, courier lozenges, legend)
Célula 8a2a…00 · oferta/procura 0,35Célula 8a2a…01 · oferta/procura 1,41Célula 8a2a…02 · oferta/procura 0,42Célula 8a2a…03 · oferta/procura 0,99Célula 8a2a…04 · oferta/procura 0,78Célula 8a2a…05 · oferta/procura 0,87Célula 8a2a…06 · oferta/procura 1,07Célula 8a2a…07 · oferta/procura 0,54Célula 8a2a…08 · oferta/procura 1,12Célula 8a2a…09 · oferta/procura 0,88Célula 8a2a…0a · oferta/procura 0,56Célula 8a2a…0b · oferta/procura 0,65Célula 8a2a…0c · oferta/procura 0,85Célula 8a2a…0d · oferta/procura 0,98Célula 8a2a…0e · oferta/procura 1,19Célula 8a2a…0f · oferta/procura 0,55Célula 8a2a…10 · oferta/procura 0,63Célula 8a2a…11 · oferta/procura 0,92Célula 8a2a…12 · oferta/procura 0,90Célula 8a2a…13 · oferta/procura 0,95Célula 8a2a…14 · oferta/procura 1,47Célula 8a2a…15 · oferta/procura 1,42Célula 8a2a…16 · oferta/procura 0,77Célula 8a2a…17 · oferta/procura 0,74Célula 8a2a…18 · oferta/procura 1,43Célula 8a2a…19 · oferta/procura 0,97Célula 8a2a…1a · oferta/procura 1,00Célula 8a2a…1b · oferta/procura 1,00Célula 8a2a…1c · oferta/procura 1,01Célula 8a2a…1d · oferta/procura 0,85Célula 8a2a…1e · oferta/procura 0,66Célula 8a2a…1f · oferta/procura 0,83Célula 8a2a…20 · oferta/procura 0,69Célula 8a2a…21 · oferta/procura 0,46Célula 8a2a…22 · oferta/procura 0,79Célula 8a2a…23 · oferta/procura 0,46Célula 8a2a…24 · oferta/procura 0,71Célula 8a2a…25 · oferta/procura 1,36Célula 8a2a…26 · oferta/procura 0,53Célula 8a2a…27 · oferta/procura 1,43Célula 8a2a…28 · oferta/procura 1,26Célula 8a2a…29 · oferta/procura 0,55Célula 8a2a…2a · oferta/procura 0,88Célula 8a2a…2b · oferta/procura 0,39Célula 8a2a…2c · oferta/procura 0,47Célula 8a2a…2d · oferta/procura 0,66Célula 8a2a…2e · oferta/procura 1,47Célula 8a2a…2f · oferta/procura 0,84Célula 8a2a…30 · oferta/procura 0,35Célula 8a2a…31 · oferta/procura 0,92Célula 8a2a…32 · oferta/procura 0,41Célula 8a2a…33 · oferta/procura 0,53Célula 8a2a…34 · oferta/procura 0,48Célula 8a2a…35 · oferta/procura 1,28Célula 8a2a…36 · oferta/procura 1,27Célula 8a2a…37 · oferta/procura 1,28Célula 8a2a…38 · oferta/procura 0,72Célula 8a2a…39 · oferta/procura 0,43Célula 8a2a…3a · oferta/procura 0,73Célula 8a2a…3b · oferta/procura 0,38Célula 8a2a…3c · oferta/procura 0,38Célula 8a2a…3d · oferta/procura 0,56Célula 8a2a…3e · oferta/procura 1,46Célula 8a2a…3f · oferta/procura 1,47Célula 8a2a…40 · oferta/procura 0,55Célula 8a2a…41 · oferta/procura 0,45Célula 8a2a…42 · oferta/procura 0,65Célula 8a2a…43 · oferta/procura 0,51Célula 8a2a…44 · oferta/procura 1,12Célula 8a2a…45 · oferta/procura 0,83Célula 8a2a…46 · oferta/procura 0,49Célula 8a2a…47 · oferta/procura 0,47Célula 8a2a…48 · oferta/procura 1,39Célula 8a2a…49 · oferta/procura 0,97Célula 8a2a…4a · oferta/procura 1,26Célula 8a2a…4b · oferta/procura 0,79Célula 8a2a…4c · oferta/procura 0,64Célula 8a2a…4d · oferta/procura 1,43Célula 8a2a…4e · oferta/procura 0,54Célula 8a2a…4f · oferta/procura 0,42
Oferta chegaOferta curtaSem oferta
TrackingSheet · ARRIVING (over the map)
A chegar

O Nelson está a 4 minutos. Ele liga-te quando chegar.

Chega em4 min
Chega por volta das 12:50
Nelson Quissanga·moto

O estafeta vai pedir-te um documento de identificação: o pedido tem álcool.

  1. Aceite
  2. A preparar
  3. Recolhido
  4. A chegar
  5. Entregue
A pagar ao estafeta16 450 Kztroco para 20 000 Kz
Condomínio Jardim de RosasTalatona · Luanda
TrackingSheet · AT_DROPOFF (the code is shown)
Chegou

O Nelson chegou. Mostra-lhe o código 4 7 2 1.

Nelson Quissanga·moto

O estafeta vai pedir-te um documento de identificação: o pedido tem álcool.

  1. Aceite
  2. A preparar
  3. Recolhido
  4. A chegar
  5. Entregue
A pagar ao estafeta16 450 Kztroco para 20 000 Kz
Código de entrega4721

Mostra este código ao estafeta quando ele chegar.

Condomínio Jardim de RosasTalatona · Luanda
Comércio

Talão, oferta, entrega e caixa

As peças que tomam o ecrã todo: o talão do comerciante e a oferta do estafeta, aqui em linha para caberem na página.

Ticket · the merchant takeover (M04), inline
OfferTakeover · the courier offer (K03), inline

Nova oferta

2 500 Kz
4,2 km14 min
RecolhaKilamba Grill · KilambaPortão principal, junto ao mercado
EntregaTalatonaCondomínio Jardim de Rosas, portão 3, depois da bomba Sonangol
Dinheiro a receber16 450 KzDinheiro · leva troco para 20 000 Kz
DropoffChecklist (K06) · StoreOpenToggle
app bar
CashFloatCard (K10) · KycLevelCard
Dinheiro em mãos48 500 Kz
48 500 Kz de 150 000 Kz
Ponto de depósito mais próximo
Agência BFA da MaiangaMaianga · Luanda
CourierCallButton · secondary and promoted
ReasonSheet · mandatory on every reject
Torre de controlo

Decisões com política e um registo

Nenhuma sobreposição sem motivo; nenhuma aprovação sem limite, limiar e quem autoriza.

PolicyGateDialog · open, inline

surge.rain

Propor taxa de chuva de 10 % em Maputo até às 20:00.

Política
surge.rain
Limite
15 %
Limiar
10 %

Quem autoriza: Ops Luanda

PolicyGateDialog · above the threshold

refund.goodwill

Reembolsar 15 800 Kz ao cliente do pedido #2211.

Política
refund.goodwill
Limite
10 000 Kz
Limiar
10 000 Kz

Quem autoriza: Ops Luanda

Precisa de aprovação de Gestor de mercado

EventFeedRow · one opacity fade, no stagger
dispatch.supply_lowTalatona: 3 pedidos, 1 estafeta livre
merchant.call_neededKilamba Grill não aceitou em 180 s
order.delivered#2211 entregue por Nelson Quissanga
Cascos

As peças partilhadas dos cinco cascos

AppBar · address line, back + title, and the thread slot
Entregar emTalatona · Jardim de Rosas

Pedido #2211

BottomNav · consumer (thread under Pedidos) and courier
Sidebar (ops) · expanded and collapsed
DocsSidebar (partner) · CodeBlock
POST /v1/orders
POST /v1/orders {  "market": "ao-lad",  "currency": "AOA",  "amount_minor": 345000,  "payment_method": "cash"}

The five shells are rendered whole on their own routes: /, /merchant/pedidos, /courier, /ops and /partner.

Movimento

Os três momentos de assinatura

Carregue num botão para repetir cada um. Fora destes, nada se move por decoração — e há no máximo um ciclo por ecrã.

1 · the launch weave
2 · the add-to-cart beat
Muamba de galinha8 500 Kz
3 · arriving, then the sew
A chegar

O Nelson está a 2 minutos. Ele liga-te quando chegar.

90 %
Código de entrega4721

Mostra este código ao estafeta quando ele chegar.