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)
There is no design doc that I'm aware of, but I'd love to have one :)
as in website design for roc-lang.org?
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.
ahh gotcha
yeah it's definitely not consistent everywhere :big_smile:
I think the tutorial should be the reference point
that is, https://www.roc-lang.org/tutorial
it's the most recent and up-to-date
the builtins docs looks really nice imo
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:
as in you prefer them to the tutorial?
The builtins style is nice but also a tad boring
I think it is clean and has nicer colors than the tutorial.
Though not for code examples
The tutorial definitely has some code examples with real color
But color for headers and links and such. I think the tutorial itself has colors that are too pale for example.
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.
A) Apply tutorial colors and nav styles to docs.
B) Apply docs colors and nav styles to tutorial.
C) Merge them somehow? Fonts from tutorial etc.
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.
I'd be curious to see what the docs colors would look like in the tutorial
what do people think about 2 colors vs 1 in general? e.g. purple/teal vs all purple
I think either works fine as long as we good nice bold colors
Similar to Luke's proposal, I would suggest starting with B and look into spicing things up afterwards.
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 06 2025 at 12:14 UTC