Georges Boris (Mar 04 2023 at 13:25): Georges Boris (Mar 04 2023 at 13:25):hey folks - I was just wondering. do we have any design doc available for Roc? when we worked on advent of code stuff last year I noticed there were discrepancies between some pages and the style they were going for. I wonder if this is something anyone is interested. I think it could be useful to agree upon a few things as a community to make new projects easier to work on design-wise instead of having multiple directions based on personal taste (for things like official website / guide / blog / package docs)
Anton (Mar 04 2023 at 13:31):There is no design doc that I'm aware of, but I'd love to have one :)
Richard Feldman (Mar 04 2023 at 16:10):as in website design for roc-lang.org?
Anton (Mar 04 2023 at 16:13):No, I think it is more like a style guide for the roc brand, so that we use a similar color palette and the same set of fonts everywhere.
Richard Feldman (Mar 04 2023 at 16:14):ahh gotcha
Richard Feldman (Mar 04 2023 at 16:14):yeah it's definitely not consistent everywhere :big_smile:
Richard Feldman (Mar 04 2023 at 16:14):I think the tutorial should be the reference point
Richard Feldman (Mar 04 2023 at 16:15):that is, https://www.roc-lang.org/tutorial
Richard Feldman (Mar 04 2023 at 16:15):it's the most recent and up-to-date
dank (Mar 04 2023 at 16:20):the builtins docs looks really nice imo
Georges Boris (Mar 04 2023 at 16:43):yeah I personally love the colors/fonts of the built-in docs. the difference between them and the tutorial is what motivated me to ask here :grinning_face_with_smiling_eyes:
Richard Feldman (Mar 04 2023 at 17:05):as in you prefer them to the tutorial?
Anton (Mar 04 2023 at 18:38):The builtins style is nice but also a tad boring
Brendan Hansknecht (Mar 04 2023 at 18:39):I think it is clean and has nicer colors than the tutorial.
Brendan Hansknecht (Mar 04 2023 at 18:40):Though not for code examples
Brendan Hansknecht (Mar 04 2023 at 18:40):The tutorial definitely has some code examples with real color
Brendan Hansknecht (Mar 04 2023 at 18:41):But color for headers and links and such. I think the tutorial itself has colors that are too pale for example.
Georges Boris (Mar 04 2023 at 21:28):yeah, I prefer the colors and fonts in the docs. the tutorial background is pure black (or almost), top header is missing roc's logo and the nice purple the docs has as well...
I have nothing against the edgier fonts on the tutorial - they remind me of Gleam's stuff which I really like. But I don't think personal taste should be discussed extensively since it is obviously subjective.
Maybe just a quick vote on which of the two directions to take? I can open a follow-up PR with proposed changes and short reference guide of colors to be discussed/approved.
Georges Boris (Mar 04 2023 at 21:29):A) Apply tutorial colors and nav styles to docs.
Georges Boris (Mar 04 2023 at 21:29):B) Apply docs colors and nav styles to tutorial.
Luke Boswell (Mar 04 2023 at 22:15):C) Merge them somehow? Fonts from tutorial etc.
Luke Boswell (Mar 04 2023 at 22:15):The relevant css is in www/build/site.css and www/build/styles.css. It looks like we are keeping www/build/homepage.css styled bare for now.
It would be nice to have a consistent styling applied everywhere. There was another issue/PR which someone had built design tokens for Roc, but I am having trouble finding it rn.
Richard Feldman (Mar 05 2023 at 01:54):I'd be curious to see what the docs colors would look like in the tutorial
Richard Feldman (Mar 05 2023 at 02:08):what do people think about 2 colors vs 1 in general? e.g. purple/teal vs all purple
Brendan Hansknecht (Mar 05 2023 at 02:41):I think either works fine as long as we good nice bold colors
Anton (Mar 05 2023 at 08:41):Similar to Luke's proposal, I would suggest starting with B and look into spicing things up afterwards.
Anton (Mar 05 2023 at 08:49):what do people think about 2 colors vs 1 in general? e.g. purple/teal vs all purple
I'm a fan of multiple primary colors, that sparks more joy :)
Last updated: Jul 26 2025 at 12:14 UTC