#816 Color scheme and icons for Docs admonitions
Opened 2 years ago by likeanushkaa. Modified 2 years ago

In Fedora docs, there are 5 technical admonitions used:

Note- blue
Tip- green
Important- red
Warning- yellow
Caution- purple

(Image attached)

I felt the colour coding is a bit off, say why should a warning be yellow and important be red ( red gives an impression of some error- it could be driving attention but in the wrong way)

Further, we could sort all of our admonitions into notes, tips, and warnings. Important and caution seem superfluous.

So, I created some new ones for the upcoming style guidelines. (Image attached)

Although I have decided on the colours and icons, we would like to shift towards a more "fedora tint" as you can see in the discussion-

https://discussion.fedoraproject.org/t/classification-of-all-the-content-on-the-docs-website-contribute-if-you-can/38398/18?u=likeanushkaa

Please help:)


In Fedora docs, there are 5 technical admonitions used:

Note- blue
Tip- green
Important- red
Warning- yellow
Caution- purple

(Image attached)

I felt the colour coding is a bit off, say why should a warning be yellow and important be red ( red gives an impression of some error- it could be driving attention but in the wrong way)

We could sort all of our admonitions into notes, tips, and warnings. Important and caution seem superfluous.

So, I created some new ones for the upcoming style guidelines. (Image attached)

Although I have decided on the colours and icons, we would like to shift towards a more "fedora tint" as you can see in the discussion-

https://discussion.fedoraproject.org/t/classification-of-all-the-content-on-the-docs-website-contribute-if-you-can/38398/18?u=likeanushkaa

Please help:)

Fedora_Docs-_Outreachy_Contribution_Phase.png
Fedora_Docs-_Outreachy_Contribution_Phase-1.png

This is what I'd suggest:
https://design.penpot.app/#/view/7612f3d0-393b-11ec-a516-23056af0be2f?page-id=903c5230-c584-11ec-a1db-afdeb91faac2&section=interactions&index=0&share-id=f860d510-c594-11ec-ab9e-75f6b8214121

Screenshot:

Screenshot_from_2022-04-26_15-15-24.png

These colors come from the Fedora core palette. I tried to order them based on severity from the examples of content for each I could find in the docs. The labels also seem to be used inconsistently (and in some books, not at all) in the Fedora docs.

I think this color palette holds even if we dropped to 3 of the 5 types:

Screenshot_from_2022-04-26_15-17-27.png

I looked through designs for a number of these type of doc admonitions, some citations for what I reviewed:
- https://stackoverflow.com/questions/58737436/how-to-create-a-good-looking-notification-or-warning-box-in-github-flavoured-mar
- https://paligo.net/docs/en/admonition-styles--html-.html
- https://diziana-arcturus.zendesk.com/hc/en-us/articles/360006856519-Admonitions-note-warning-caution-etc-Support-in-Diziana-Themes
- https://developers.google.com/style/notices
- https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingReST/Admonitions.html
- https://confluence.atlassian.com/doc/info-tip-note-and-warning-macros-51872369.html
- https://github.com/RickStrahl/MarkdownMonster/issues/367
- https://www.madcapsoftware.com/blog/css-tip-creating-styled-boxes-notes-warnings-examples-tips/

I think it's preferable to have a unique symbol per type as relying on color alone is not a good practice and can cause confusion / lack of distinction for color-blind readers. So caution and important are using the same symbol - this is the main weakness here, we need to figure out a unique symbol or decide if we're dropping down to the three (note / tip / warning) in which case it isn't needed.

I like the proposed designs you made and have pretty much kept to them with a bit more simplification (we don't generally do lighter / pastel tones in Fedora designs.) Headline is meant to be Montserrat, body font Open Sans as is the current website standard.

Login to comment on this ticket.

Metadata