Document colour roles in the brand baseline, and resolve the gradient and alpha restrictions it contradicts

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#376 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
72/100
Type d'issue
Documentation
Clarté
Clairement spécifiée
Activité
Active
Stack technique
css, markdown, typescript
Domaine
design, documentation

Piste de recherche

Lisez .agents/skills/brand-baseline/SKILL.md et comparez ses recommandations de palette aux commentaires sur les rôles et aux tokens du thème dans website/src/css/custom.css. Documentez les rôles des couleurs et suivez les teintes, puis clarifiez les restrictions indiquées pour les dégradés et les valeurs alpha, et consignez la règle du sélecteur du thème sombre. Le travail est terminé lorsque le guide correspond aux styles livrés et indique clairement le rôle de chaque couleur ainsi que son usage autorisé.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

documentation
Page or section

.agents/skills/brand-baseline/SKILL.md (the file that serves as the design system guide) and website/src/css/custom.css.

Issue description

The palette is documented, the way it is used is not, and two of the guide's own restrictions no longer match what the site ships.

The guide lists swatches by name and hex: Genie Blue #2353FF, Midnight #1D1D1B, Moon #F5F3EB, Vanilla Sunset #FEC104, Blazing Amber #FF4B11, Raspberry Blush #F8908F, Caramel Delight #FCE4C6, Rich Black, plus Shadow, Twilight, Winter Steel and Pure White.

What it does not say is what each colour is for. That knowledge currently exists only as comments in custom.css, and nowhere a person or an agent could find it before touching the stylesheet:

Role Colour Light Dark
Action, links, primary button Genie Blue #2353FF #4D91FF
Text and item rules Midnight #1D1D1B #F5F3EB
Scheduled, as a filled chip with midnight label Vanilla Sunset #FEC104 #FEC104
Careful (warning callouts), contributor hover ring Blazing Amber #C13A0B text, #FF4B11 mark #FF8F6B / #F0764F
Band surfaces White and Moon #FFFFFF / #F5F3EB #1D1D1B / #2C2B2B
Navbar and footer surfaces Genie Blue #2353FF #2353FF

On top of that, five track hues were added during the landing page work and are in no deck at all. Three are the languages' own colours, two are ours:

Track Hue Light Dark Contrast on the tab it sits on
dApp and smart contracts Genie Blue #2353FF #4D91FF 5.6 / 5.47
Infrastructure and DevOps Raspberry, darkened #C2185B #F8908F 5.87 / 7.54
Core protocol, Haskell Haskell purple #5D4E8C #A794DE 7.16 / 6.38
Core protocol, Rust Rust orange #CE422B #F0764F 4.73 / 5.96
Core protocol, Go Go cyan, darkened #0B87AD #45C4E6 4.13 / 8.27

Three points where the guide and the build disagree:

  1. "No gradients." Resolved in 3abd1f3: the footer is solid Shadow #2C2B2B, and the dead .hero gradient rule is deleted. custom.css now contains no linear-gradient at all.
  2. "No transparency or blend modes. Solid fills only." This one is open. custom.css now contains 29 rgba() declarations, after the footer rebuild in 8a5e4b8 removed the rgba(255, 255, 255, 0.8) copyright rule along with the old footer, and Infima's alert components ship an rgba highlight. The warning alert has been given a solid replacement, the other admonitions have not. The track tints use color-mix, which resolves to an opaque colour, so those are compliant in effect.
  3. Semantics are missing entirely. Nothing states that blue means "you can act on this", that midnight is structure, that vanilla is reserved for "scheduled", or that blazing now means "careful" and the footer. Without that, a future change can reuse vanilla for decoration and the chip stops meaning anything.

Not urgent and nothing is broken for a reader. The cost is drift: every colour decision of the last week exists in one stylesheet's comments, and the guide that governs them documents swatches without saying what any of them is for.

Proposed change
  • Add a ## Colour roles section to .agents/skills/brand-baseline/SKILL.md: one row per job, with the light and dark value and the contrast each clears, plus the rule that a colour carries at most three meanings before it becomes decoration.
  • Add the five track hues to the palette section, marked as language-derived except the two that are ours, with the note that they are marks and washes only, never text.
  • Decide the gradient question once: either drop the restriction and document the footer gradient as the sanctioned exception, or flatten the footer to a solid #1A202C and delete the dead .hero gradient rule.
  • Same for alpha: allow it for text at 80% on the dark footer, or convert those to solid values.
  • Note in the guide that dark-theme tokens must be declared on html[data-theme='dark'], because Infima declares its own dark tokens on that selector and a bare [data-theme='dark'] block loses every contested token silently. That bug was live until it was found: the warning callouts stayed Infima mustard while the brand values sat unused.

This is a concrete sub-item of #300, which proposes the token baseline and the brand assets page. The palette exists today; the roles and the conflict resolution are what is missing.

Checks
  • I searched existing issues and discussions
  • This is about documentation (not a feature request or bug)
Langage dominant
TypeScript
Étoiles
13
Forks
24
Merge moyen
1 j 15 h
PR mergées (30 j)
20

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de IntersectMBO/developer-experience

Toutes les issues de IntersectMBO/developer-experience

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.