Full Width 
Shortcuts 
Sign Up 
Log In 
Articles 
Reading List More from ramsés cabello
2020年に嵐の音楽に出会いました。それから嬉しい時も悲しい時も、嵐の素敵な曲がずっと僕のそばにいてくれました。心から感謝しています。 嵐の皆さん、スタッフの皆さん、本当にお疲れ様でした。 “忘れないでいよ” これからも、ずっと。 🌈
hola 〜 ૮ ˶ᵔ ᵕ ᵔ˶ ა ❄️ hope you’re having a nice december, wherever (and whenever) you’re reading this! hopefully not too cold nor warm 〜 christmas tree · november 2025 · iphone this year i listened to a lot of music and bought a handful of CDs some of my favorite highlights include the new album from asunojokei, the new works from fuji kaze, 小田和正, gen hoshino and my most recent favorite artist KANさん, which casually and light-hearted covered an idol song in the past: i also started listening to some classical music, and although i’m still exploring my taste in this genre, i’m loving some music from tjajkovskij ♫⋆｡♪ ₊˚♬ ﾟ please, let me know what you’ve been listening to recently <3 the site over the past days i’ve been updating things here and there on the site,and will probably continue to do so ( ˶°ㅁ°) !! let me know if something’s not looking right… 〜 site on the ipad · november 2025 · iphone the most notable change is the new photo on the front page taken by a friend ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧ thank you! i include additional information on the main page text both in english and japanese, and updated to the profile page. i also played around a bit with the navigation & i really like how it is looking at the moment. you can read most of the updates on the changelog page. i love the new subtle bg color too 〜 thank you before the end of the year, I just wanted to thank everyone who’s been around. thanks for all your support and for always cheering on me along the way. it means a lot to me and I really appreciate it. i’m excited and i look forward to continue journaling next year. i wish you a lovely and calm end of the year. if you want to reach out, you can send me an email, connect on bluesky or sign my guestbook 〜 thanks for visiting and reading this post <3 /rc
hola! 〜 ദ്ദി ( ᵔ ᗜ ᵔ ) i hope it is not very cold at the moment you’re reading this post 〜 although here is freezing and dark-ish, i wanted to write a few words about something i designed at sketch a while back and recently released + some other misc 〜 let’s start with a photo of warmer days ❄(ó﹏ò｡) ferris wheel · september 2025 · iphone nested folders in 2023 we released a feature called Collections (and i wrote case study about it), it was a feature that would let designers tidy up documents in sketch with an additional level of organization. it worked well and conceptually it was a fun project to design. fast forward to the end 2025 sketch is releasing a new feature in which i worked; that converts all projects and collection into folders and folders within folders within folders … nested folders · 2025 introducing nested folders brought a few additional set of challenges: moving documents and folders, flexible sidebar and improved breadcrumbs, and other bits that needed to be reworked to fit this concept (╭ರ_•́) moving documents and folders probably where i spent the most time on this project was designing a new flow for moving documents and folders. the new dialog is very compact but mighty powerful. we packed it with features including: moving within different workspaces visual overview of the entire workspace structure search folder creation additional document/folder info current location move dialog · 2025 · designed in sketch flexible sidebar this has been pending for a while and maybe the most obvious change but with the introduction of nested folders it made sense to include the ability resize the sidebar to explore more complex folder structures: flexible sidebar · 2025 · designed in sketch breadcrumbs overall this was a great opportunity to review navigation and breadcrumbs within the existing web views. with a more complex folder structure we made sure that breadcrumbs let people: navigate to the most immediate ascending level pick any of the ascending levels improved breadcrumbs · 2025 · designed in sketch listening to the feedback keeping an open eye into the feedback from people using sketch while working on this feature has been fun. we started by building foundations with collections and later continue to iterate to bring nested folders to sketch (*ˊᗜˋ*)/ᵗᑋᵃᐢᵏ ᵞᵒᵘ* the feature is part of the latest sketch release copenhagen, which you can read about on the changelog. — before i leave you for now 〜 please make sure to listen to my favorite album this year: Prema by Fuji Kaze. for now, you can send me an email, connect on bluesky or sign my guestbook 〜 thanks for visiting and reading this post <3 /rc
hi everyone 〜 ദ്ദി ( ᵔ ᗜ ᵔ ) we just launched a new version of sketch including awaited features such as stacks, frames, and graphics, along with a lot of other new features. while we prepared the inspector on the web app to display the new properties that come with these features, we also took the opportunity to add a few new functionalities that would make it easier inspect designs. in this journal entry, i’ll go through some of the changes and show you some behind-the-scenes materials of the project 〜 (▰˘◡˘▰) ⓘ click on the images to see them full size the new properties frames and stacks bring a bunch of new properties, so before starting to work on any UI, we created an inventory of the current/new properties to include in the inspector: the main focus was to give a simple overview of all the properties while keeping it in a similar language to the mac app, sharing the same name and icons whenever possible. bringing the new properties from the mac app to the web app was seamless, and it felt very straightforward to include them in the existing structure. box-model and css throughout this process, i had some time to explore bringing a few additional features to the inspector 〜 it seemed just right that with frames and stacks around the corner, we would make it easier for devs to copy CSS and have a better overview of the elements through a box-model diagram. when designing the box-model, i took into account all the other box-model diagrams developers would see during their work; browsers, other tools, inspectors… and used them as a reference to explore a box-model for the web app. i went through several iterations and kept refining together with the team: after a bunch of versions, we decided to go with one that felt simple yet informative enough for the web app inspector: the css preview followed a very similar process; started with the simplest version and kept iterating over time. one of the issues with having the css on the sidebar is that devs wanted a better overview. the css on the sidebar works great as a preview, but sometimes people want to look at the code in detail. we implemented an expanded version that opens in a dialog and shows the entire code without the constraints of the sidebar: towards the end of the implementation, i was not 100% convinced with the color scheme of the code, but after exploring for a while, i decided to stick to the original decision as it fit naturally with the rest of the UI. here’s a preview of all the explorations: moving things around while we introduced more sections and properties to the inspector we started to question how to organize the content – in the latest version of the web app we moved things around a little bit and created a structure that would make more sense. if you you want to play aorund with the inspector you can use this public document and you can also hear over to sketch.com/home to download and play around with the latest version of the app (୨୧ ❛ᴗ❛)✧ for now, you can send me an email, connect on bluesky or sign my guestbook 〜 thanks for visiting and reading this post <3 /rc
More in design
Four years ago, I wrote “How to pick the least wrong colors.” The gist is: picking a categorical color palette is an optimization problem. There’s no such thing as the right colors. But if you use the right cost function, and the right kind of hill climbing, you can at least get the least wrong ones. Since the original post I’ve been slowly picking away at improvements and new approaches. Now that we’re past the singularity, I’ve put a few coding robots on the job. It’s reassuring that many of my assumptions were good ones! The robots have been able to improve the code, bridging some of the gaps in my own knowledge. Today, I’m publishing an updated version of the algorithm as an npm package, along with a fancy GUI version. While there’s still more to do, I’m proud of how far I’ve been able to take it. What’s new New evaluators More controls The public API and a CLI What’s improved The annealing algorithm Configurable color space and distance metric The results One more thing Acknowledgements What’s new New evaluators Almost as soon as I published the first version, I realized that the cost function lends itself really well to modularity. Beyond my initial evaluation functions, I could design new ones, and provide a framework for anyone to plug in their own. As a recap, my original criteria for good categorical colors, mapped to evaluation functions: Similarity — a way of measuring the similarity of one palette to another, useful for providing art direction and getting brand alignment Energy — the colors should be different from each other so they aren’t liable to be confused from one another Range — the differences between the colors should be consistent so unintended groupings don’t appear Color vision deficiency — simulating the colors under different types of color blindness (red-green, blue-yellow, partial to full tritanopia) Here’s the new evaluators: JND — strongly reject palettes that have two or more colors that are too similar Avoid — the mirror image of the similarity evaluation, push colors away from a user-defined set Contrast — compares colors, keeping them above the WCAG AA color contrast floor. Can be used with a background color to maintain contrast on a chart’s background Saliency — uses color naming study data to prefer colors that are easy to name Name difference — the mirror image of saliency, avoiding colors that share names Each of these evaluators can be weighted, indicating the kinds of tradeoffs and priorities you’d like for your color palette. Additionally, the whole evaluator system is pluggable: you can define your own evaluators and have them drive the optimizer! More controls Colors can now be fixed in place, or pinned to a particular order, making it easier to load in existing palettes and optimize all or just some of the colors. Individual channels of each color can be locked, too, meaning you can keep the saturation or hue of a color fixed while optimizing its lightness. This works in any color space. The public API and a CLI The whole package is now a proper library, with a public API. This means: 1. the whole thing is now distributable through npm, with proper versioning, 2. there’s a CLI, making it much more ergonomic for both humans and agents. The API allows for full configuration of the algorithm, as well as loading in colors to optimize. Output can be in raw color values, CSS properties, or DTCG JSON. There’s also a new reportJndIssues endpoint that allows you to evaluate palettes without optimizing them, which is useful to compare a generated palette to commonly-used ones (like Observable, d3, IBM Carbon, and more). What’s improved The annealing algorithm When I wrote the initial algorithm in 2022, I had just learned about simulated annealing. I’ll be honest: I don’t know much more today than I did then. But with AI-assisted research, I was able to solve some questions I had about the initial implementation. Now, the algorithm picks the correct starting temperature based on some random initial samples. Mutation also happens in a scaled manner, so colors change less towards the end of the optimization schedule. Iterations can be capped to prevent very long runs, and the whole thing is much, much more performant. Configurable color space and distance metric The first version of the algorithm worked in RGB space. Now, it defaults to okhsl, but even this is configurable. Individual channels can be constrained to dial in the palette’s boundaries. Also, you can choose which color distance metric you’d like to use (but the library uses CIEDE2000 by default). This flexibility is powered largely by a move from chroma.js to culori. I’ve learned a ton about color spaces since 2022, so being able to mix and match color spaces with distance metrics has been extremely useful. The results The category-colors library reliably produces better results than other palette-generating tools and industry-standard color palettes. Compared to other palette-generating tools, category-colors has more control. Palettailor, for example, optimizes for pure color difference, without accounting for color vision deficiency. QualPal brings some of the optimization parameters, but doesn’t allow for steering towards or away from arbitrary colors. Scores at 8 colors ΔEMinimum ΔEworst of CVD Name differenceMinimum Uniformitylower is better category-colors 22.6 ±1.6 13.7 ±2.0 0.35 ±0.14 best in column 0.30 ±0.02 best in column QualPal 1.1.0 24.7 21.8 best in column 0.10 0.44 Palettailor 26.6 ±2.4 best in column 4.5 ±1.7 0.34 ±0.16 0.34 ±0.04 Colorgorical 15.8 ±3.3 4.1 ±1.6 0.09 ±0.06 0.42 ±0.03 All numbers are at 8 colors. Rows with ± are mean ± standard deviation over 10 palettes; rows without are deterministic and produce one palette. category-colors and Palettailor are 10 independent runs on the same seeds; Colorgorical’s row is 10 palettes from its authors’ own sampling script at equal criterion weights. QualPal was run with CVD on, matched bounds, and takes no seed. Name difference is Heer & Stone’s 1 − cosine; Colorgorical’s own interface reports a Hellinger distance instead. Shaded cells are the best value in their column. Compared to industry-standard palettes, category-colors can produce more optimal palettes, especially at high cardinality. Scores at 8 colors ΔEMinimum ΔEworst of CVD Name differenceMinimum Uniformitylower is better category-colors 22.6 ±1.6 best in column 13.7 ±2.0 best in column 0.35 ±0.14 0.30 ±0.02 best in column Okabe–Ito 21.3 8.8 0.06 0.34 Observable 10 18.4 0.6 0.40 0.34 Tableau 10 18.1 3.2 0.24 0.32 d3 category10 16.2 1.6 0.84 best in column 0.40 ColorBrewer Set3 13.7 1.9 0.16 0.32 IBM Carbon 12.8 5.0 0.11 0.34 Same run: 8 colors, 10 trials. Reference palettes are deterministic, so they're single values. Shaded cells are the best value in their column. One more thing I’ve built a UI that consumes the package and makes it easy to generate and optimize palettes. This has been the biggest request since I published the initial essay, so it’s the thing I’m excited to share. It’s ridiculously overengineered, but hey, what else are personal projects for? Acknowledgements Many measurements come from published research: Gaurav Sharma, Wencheng Wu and Edul Dalal for CIEDE2000; Gustavo Machado, Manuel Oliveira and Leandro Fernandes for the color vision deficiency simulation; Maureen Stone, Danielle Albers Szafir and Vidya Setlur for the size-dependent just-noticeable-difference result; Jeffrey Heer and Maureen Stone, whose color naming models and the c3 data from the Stanford Visualization Group power both the saliency and name-difference evaluators. Existing palettes: Masataka Okabe and Kei Ito’s Color Universal Design set; Matthew Petroff’s sequences; and Mark Harrower and Cynthia Brewer’s ColorBrewer. Other generators laid a lot of the groundwork: Kecheng Lu and colleagues (Palettailor), Connor Gramazio, David Laidlaw and Karen Schloss (Colorgorical), Johan Larsson (QualPal), and Chin Tseng, Arran Zeyu Wang, Ghulam Jilani Quadri and Danielle Albers Szafir (CatPAW). Andrew McNutt, Maureen Stone and Jeffrey Heer’s color-buddy has also been indispensable. Finally, Dan Burzo’s culori made it easy to make this library colorspace-agnostic.
This is part of a new experiment I started in an effort to document the process of making Niche design.
Weekly curated resources for designers — thinkers and makers.
Users parse a layout before they read its labels. Whitespace, borders, alignment, color, and motion determine what belongs together. When these cues fight the content, users attach the label, price, warning, status, or action to the wrong object. Proximity, similarity, enclosure, and the other Gestalt cues guide the eye, snapping visual chaos into clarity.
I miss this. Visiting a mill is such an enjoyable, often inspiring experience, yet I don’t do it as much as I used to. Perhaps because once you’d done one worsted weaver it’s hard to justify more. But we’ve never done silk. I did go to Vann... > Read more
