Design System — Software Factory

CSS Custom Properties — Dark

--bg-primary

dark: #0f0a1a

--bg-secondary

dark: #1a1225

--bg-tertiary

dark: #251d33

--border

dark: #352d45

--text-primary

dark: #e6edf3

--text-secondary

dark: #9e95b0

--radius

10px

--sidebar-width

56px

CSS Custom Properties — Light

--bg-primary

light: #f8f6fb

--bg-secondary

light: #ffffff

--bg-tertiary

light: #f0ecf5

--border

light: #d8d0e5

--text-primary

light: #1a1225

--text-secondary

light: #5c5470

Palette

Accent

--accent · #f78166

Accent Hover

--accent-hover · #ffa28b

Purple

--purple · #bc8cff

Blue

--blue · #7c8aff

Green

--green · #3fb950

Red

--red · #f85149

Yellow

--yellow · #d29922

User Bubble

--user-bubble · #1d4a2a

Sémantique

success

Success

badge-green

error

Error

badge-red

warning

Warning

badge-yellow

info

Info

badge-blue

feature

Feature

badge-purple

Type Scale

h1 / page-title — 16px / 600

The quick brown fox jumps over the lazy dog

h2 / section-title — 0.82rem / 700 / uppercase

Section Title Example

h3 / card-title — 1rem / 700

Card Title Example

body — 0.85rem / 400

Corps de texte principal utilisé dans les zones de contenu des cartes et panneaux.

body-sm — 0.78rem / 400

Texte secondaire plus petit pour les métadonnées et descriptions.

caption — 0.72rem / 400

Légendes, timestamps, labels de formulaire.

micro — 0.68rem / 400

Pills, badges, tags très petits.

code / mono — 'JetBrains Mono', 'SF Mono', monospace

const x = await fetch('/api/v1/agents')

Font Stack

font-family (system)

-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif

font-family (code)

'JetBrains Mono', 'SF Mono', monospace

Spacing Scale

0.25rem 4px

gap-xs

0.5rem 8px

gap-sm / mt-sm

0.75rem 12px

gap-md / mt-md

1rem 16px

gap-lg / padding

1.25rem 20px

mt-lg

1.5rem 24px

main-area padding

2.5rem 40px

section margin

Border Radius

4px

pill, badge

6px

btn, input

8px

dropdown

10px

--radius (card)

12px

bubble

50%

avatar

SVG Sprite Icons (86)

sun

moon

macaron

home

grid

bot

target

chart

settings

rocket

briefcase

clipboard

hardhat

code

flask

lock

building

palette

filetext

shield

check

refresh

pause

stop

plus

send

git-branch

git-commit

git-pull-request

file-text

folder

terminal

play

activity

layers

arrow-right

circle

zap

database

eye

workflow

plug

brain

edit

trash

copy

user

users

wrench

smartphone

map-pin

heart

cpu

mail

trending-up

pen-tool

microscope

compass

globe

package

award

alert-triangle

message-circle

save

crosshair

server

leaf

lightning

clock

alert-circle

trophy

kanban

lightbulb

loader

git-merge

calendar

arrow-left

book-open

check-circle

columns

list

refresh-cw

skip-forward

Buttons

Default / Primary / Danger / Ghost

.btn, .btn-primary, .btn-danger, .btn-ghost

Badges & Pills

Badges

.badge, .badge-{color}

Default Success Error Warning Info Feature

Pills (tags)

.pill, .pill--{type}

Default Skill Tool MCP Domain Feature Fix Refactor Test Security

Status Dots

Agent / Task Status

.dot, .dot--{state} | .status-dot

Active Idle Thinking Error Completed Blocked

Avatars

Sizes

.avatar, .avatar--{xs|sm|md|lg|xl}

Progress Bar

Fill variants

.progress > .progress__fill

25%

60%

100%

Form Elements

Input / Textarea / Select

.form-group > label + input|textarea|select

Text input

Select

Inline Form

.inline-form > .inline-form__input + .inline-form__btn

Cards

Base Card

.card > .card__header + .card__body + .card__footer

Sprint 1 — Authentification et setup

Metric Card

.metric > .metric__value + .metric__label

Agents

94%

Coverage

7.2

Score

Tabs

Tab Bar

.tabs > .tab.active

Popover

Agent Detail Popover

.popover > .popover__header + .popover__section

Kanban

Board

.kanban > .kanban__col > .kanban__item

Backlog 2

Setup CI

DevOps

Auth API

Backend

In Progress 1

DB Schema

Active

Review 1

Tests E2E

Done 0

No item

Empty State

Placeholder vide

.empty > .empty__title + .empty__subtitle

No results

Lancez une epic pour voir les agents collaborer ici.

Layout Patterns

Split Layout (main + sidebar)

.split.split--sidebar-right > .split__main + .split__aside

.split__main

.split__aside

Metrics Grid

.metrics-grid > .metric × N

Epics

87%

Success

3.2h

Cycle Time

Blocked

Cards Grid

.cards-grid > .card × N

Auth Module

JWT + refresh tokens

API Gateway

Rate limiting + routing

CI Pipeline

GitHub Actions + Docker

Message Components (.mu)

Thread / Chat / Compact modes

.mu--thread | .mu--chat | .mu--compact

Thomas Dubois Lead Dev → all hierarchical

Voici mon analyse de l'architecture proposée…

Camille DurandBA

Analyse métier terminée…

Utilities

.flex

display:flex

.flex-col

flex-direction:column

.flex-wrap

flex-wrap:wrap

.items-center

align-items:center

.justify-between

justify-content:space-between

.gap-xs

gap:0.25rem

.gap-sm

gap:0.5rem

.gap-md

gap:0.75rem

.gap-lg

gap:1rem

.text-xs

font-size:0.68rem

.text-sm

font-size:0.78rem

.text-muted

color:--text-secondary

.text-purple

color:--purple

.truncate

text-overflow:ellipsis

.font-bold

font-weight:700

.font-mono

JetBrains Mono

Conversation Thread

Template complet d'un fil de discussion multi-agents avec les differents types de messages.

Sprint Planning - Auth Module network

Session demarree -- 5 agents actifs

Alexandre Faure CDP → all brief

Objectif sprint : Implementer le module d'authentification JWT avec refresh token, RBAC et integration LDAP.

Priorite WSJF : 85 -- Bloque 3 epics downstream. Deadline PI 14.2.

Pierre Duval Architecte → Alexandre

Proposition d'architecture : service auth isole, token store Redis, middleware axum pour validation.

POST /auth/login → JWT (15min) + refresh (7d)
POST /auth/refresh → new JWT
GET /auth/me → user profile + roles

Nadia Benali Securite VETO

Risque : Le refresh token en Redis sans rotation expose a du token replay. Exigence : rotation obligatoire a chaque refresh + blacklist du token precedent.

Thomas Dubois Lead Dev APPROVE

Agree avec le veto de Nadia. J'integre la rotation dans le design.

auth-service token-rotation rbac-middleware

> code_edit src/auth/middleware.rs -- Added RBAC extraction layer

> git_commit feat(auth): add JWT middleware with role extraction

Agent Graph

Graphe SVG interactif montrant les agents, leurs connexions et etats en temps reel.

sequential hierarchical network

Memoire

architecture

JWT + Redis token store, rotation on refresh

securite

Token replay attack mitige par rotation obligatoire

decision

RBAC middleware dans axum, roles en claims JWT

convention

Rust error types dans crates/auth-error/

4 entrees -- mis a jour il y a 1 min

Kanban Board

Board 4 colonnes avec cartes de taches, assignation agents et indicateurs de statut.

Backlog

securite WSJF 72

Audit dependances

refactor WSJF 45

Refactor token store

feature WSJF 30

Documentation API

En cours

feature WSJF 85

Auth middleware RBAC

feature WSJF 80

Review

test WSJF 78

E2E tests auth flow

Done

feature WSJF 90

Schema migration users

feature WSJF 88

JWT signing service

Backlog Table

Vue tabulaire du backlog avec tri, filtres, priorite WSJF et assignation.

WSJF	Tache	Type	Status	Agent	Domaine
90	Schema migration users table	feature	done	JP Julien Petit	backend
88	JWT signing service + key rotation	feature	done	JP Julien Petit	backend
85	Auth middleware RBAC extraction	feature	active	TD Thomas Dubois	backend
80	Login page + form validation	feature	active	LM Lucas Moreau	frontend
78	E2E tests auth flow complet	test	review	YO Yassine El Ouardi	qa
72	Audit dependances securite	security	pending	NB Nadia Benali	securite
65	Rate limiting login endpoint	feature	pending	Non assigne	backend
45	Refactor token store interface	refactor	pending	PD Pierre Duval	backend
30	Documentation API auth endpoints	feature	pending	Non assigne	docs
25	Smoke tests pages protegees	test	pending	Non assigne	qa

10 taches -- 4 types -- 5 agents Tri : WSJF decroissant