Twitter | Search | |
Colm Tuite
Founder . Previously founded (acquired).
8,202
Tweets
581
Following
3,829
Followers
Tweets
Colm Tuite retweeted
Zack Schiller Aug 18
i'm working on a color thing inspired by & 's work () extremely rough rn but here ya go:
Reply Retweet Like
Colm Tuite 9h
Looks sweet! cc
Reply Retweet Like
Colm Tuite 16h
Replying to @lukedubert
Yep I find you need more granular control to fine tune everything.
Reply Retweet Like
Colm Tuite 16h
Replying to @yavorpunchev
I remember seeing this ages ago now actually. Gorgeous colors. I wish they had dark mode so I could just use this now instead 😄
Reply Retweet Like
Colm Tuite 16h
Replying to @colmtuite
The beginnings of dark mode 🌑
Reply Retweet Like
Colm Tuite retweeted
Stephen Haney Oct 20
Agreeing with Chance, I see an opportunity to give way more accessibility feedback during the creation phase than either drawing design tools or IDEs can give.
Reply Retweet Like
Colm Tuite Oct 20
Replying to @yeukang
Are you in dim mode?
Reply Retweet Like
Colm Tuite Oct 20
Replying to @yeukang
It’s pure black, too stark imo. But the darkest/lightest colors are not shown here, they’re in a separate scale.
Reply Retweet Like
Colm Tuite retweeted
Diana · #BlackLivesMatter Oct 20
When your design system has a new release, how do products get updated? Are product teams required to comply? Does the design systems team update the products or a core priority product, or do you push a release and just hope and pray folks update? Replies welcome.
Reply Retweet Like
Colm Tuite Oct 20
Replying to @yeukang
Only 900 should be used for text. Why is it weird? You need way more light values than dark, for most UIs.
Reply Retweet Like
Colm Tuite Oct 20
Replying to @itsdailyin
Of course! They’re intended to be used as background colors. They’re necessary for for components like Button, MenuItem, TreeItem, Code, Badge, CodeBlock, Alert etc. You need very subtle step increments for effects like :hover and :active.
Reply Retweet Like
Colm Tuite Oct 20
Replying to @yeukang
Do you have a use case in mind? Text is the darkest use case I’m aware of.
Reply Retweet Like
Colm Tuite Oct 20
It will work with Stitches, but it’s for a separate, upcoming product. Top secret 😛 🤫
Reply Retweet Like
Colm Tuite retweeted
Stephen Haney Oct 20
I've been using Colm's system in the new composer and it's fantastic.
Reply Retweet Like
Colm Tuite Oct 20
Replying to @MetalHaze
Is there a German word for concepts for which there is no German word?
Reply Retweet Like
Colm Tuite Oct 20
Replying to @esbenlorenzo
Only some of them are light. You want a good range from super light values for subtle backgrounds to darker values for text. Rather than a linear scale (which is no good imo), I took a practical approach to defining steps. Some increments are intended for hover/active effects.
Reply Retweet Like
Colm Tuite Oct 20
Replying to @MetalHaze
From there, I just reversed each palette, making a lot of manual tweaks to ensure everything worked well in practice.
Reply Retweet Like
Colm Tuite Oct 20
Replying to @MetalHaze
Then I set the high contrast text. In light mode, I used the $hiContrast off black color we just defined. In dark mode, you want something close to white, but not pure white because it's too stark. 83%–93% should work well.
Reply Retweet Like
Colm Tuite Oct 20
Replying to @MetalHaze
I started with the main background color, usually the <body> color. In light mode, that's white. In dark mode, it's almost black. I used a very slightly saturated blue hue, with lightness somewhere from 5%–8%. Pure black is too stark imo.
Reply Retweet Like
Colm Tuite Oct 20
Replying to @MetalHaze
Looks like it's just reversing the palette? I've found that doesn't work well in my experience.
Reply Retweet Like