— Design System · v1.0

Le style SIYA.

Tokens, typographie, composants, animations — l'ensemble du langage visuel SIYA, documenté pour permettre une implémentation directe en HTML/CSS/JS vanilla.

— 01

Marque & lockups

Le mot-symbole SIYA combine cercle vide et œil cyan central. Trois variantes pour trois surfaces.

SIYA Technology
SIYA Technology
SIYA mark
— Wordmark · ivory — Wordmark · navy — Mark seul
— 02

Couleurs

Trois primaires non négociables, deux neutres chauds, transparences fonctionnelles.

— Primaires

Navy
#0A1428
Cyan
#6EC4F5
Gold
#D4AD7C
Duo gradient
cyan → gold

— Neutres

Ivory
#F5F1EA
Paper
#FAF7F2
Navy-900
#050A17
Navy-600
#18274A
— 03

Typographie

Trois familles, trois rôles : Fraunces pour le titre éditorial, Inter pour l'UI, JetBrains Mono pour les balises et métriques.

Démocratiser le commerce.
DisplayFraunces 350 · -0.025em
opsz 144 · SOFT 50
Une trame, quatre services.
H1Fraunces 350 · -0.022em
clamp(40px, 5.5vw, 72px)
Le commerce africain mérite mieux que des modèles importés.
H2Fraunces 380 · -0.018em
clamp(30px, 3.6vw, 48px)
Discipline capital
H3Fraunces 400 · -0.012em
SIYA construit l'écosystème intégré qui digitalise le commerce en Afrique francophone : marketplace, livraison, paiement.
LedeInter 350 · -0.005em
clamp(17px, 1.4vw, 21px)
Texte courant — pour le contenu lu, les paragraphes longs, la documentation technique. Inter 400, taille 16px, line-height 1.6.
BodyInter 400 · 16px
— Service 01 · Marketplace
EyebrowJetBrains Mono 500
11px · 0.16em uppercase
12 500 FCFA · escrow:hold · tx_4218
MonoJetBrains Mono 400 · 12px
— 04

Grille responsive

12 colonnes desktop, 4 colonnes mobile. Gouttière fluide clamp(20px, 4vw, 56px). Max-width contenu 1320px.

— 05

Espacements & rythme

Échelle 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96. Sections paddings fluides via clamp().

4
xs · hairline gap
8
icon ↔ label
16
chip padding
24
grid gutter
32
card padding
48
component ↔ component
64
sub-section break
96+
section ↔ section (fluide)
— 06

Composants

Boutons, tags, formulaires, cartes, tuiles — primitives réutilisables.

— Boutons
— Tags Marketplace Bêta 2027 — Service 01
— Inputs
Email
a.tchamba@siya-tech.com
— Service tile
— 01 / Marketplace

SOKO

Marketplace no‑cash avec escrow.
— Hairline
— 07

Mouvement

Animations subtiles, jamais bloquantes. Transform & opacity uniquement. Durée 200—900ms.

Fade-up
Entrée de section au scroll.
.9s · ease-out · 18px
Stagger
Cascade d'enfants à 80ms.
+ delay 80ms × n
Parallax
Translation transform Y subtile.
speed: 0.04 — 0.08
— Easing
--ease-outcubic-bezier(.16,.84,.34,1)
--ease-in-outcubic-bezier(.65,.05,.36,1)
— 08

Accessibilité

Quatre règles non négociables — déjà respectées par la palette.

  1. Contraste AAA pour le texte courant.

    Navy #0a1428 sur Paper #faf7f2 : ratio 17.8:1. Ivory sur Navy : 16.9:1.

  2. Focus visible, contour cyan 2px.

    Pas de outline: none sans alternative. Skip-link en haut de chaque page.

  3. prefers-reduced-motion respecté.

    Animations désactivées si l'utilisateur le demande au système. Animations CSS-only quand possible.

  4. SVG décoratif → aria-hidden, SVG signifiant → role + title.

    Schéma écosystème : role=img + aria-label descriptif. Glow et orbits : aria-hidden.