About
Activity
27K followers
-
Brad Frost reposted thisBrad Frost reposted thisWith style queries now in all browsers, here's my take on the best way to do dynamic color theming with modern CSS: ✍ register a custom property 🌓 light-dark() to style based on color-scheme 🗞️ contrast-color() to auto-pick black or white for foreground text on any background 🎨 style queries to branch into custom color pallets based on contrast-color 🌳 optionally leverage relative color syntax for variants And these features are now available in all modern browsers! 🎉 Some other fun tricks in here too like using light-dark() with transparent to swap between shadows and glowy borders, and leveraging contrast-color() as a boolean to apply expanded color palettes. Read about it ⬇️⬇️ https://lnkd.in/eZmNEz57una.im | Modern CSS theming with light-dark(), contrast-color(), and style queriesuna.im | Modern CSS theming with light-dark(), contrast-color(), and style queries
-
Brad Frost reposted thisBrad Frost reposted thisMy "Poetic CSS" course goes live on Wednesday, with an Early Bird discount for the month of July! Here's another "side quest" on using shorthand properties: https://lnkd.in/gDsNyniU Sign up for email updates (and a drawing for a handmade – by me – OddBirdOddBird mug): https://lnkd.in/gkBTBgt2 #css
-
Brad Frost shared thisTo this day still one of the coolest and most eye-opening demonstrations of what AI & design systems could do together.Brad Frost shared thisonce again thinking about how when we invented sketch->code at Airbnb in 2017 we asked everyone within a 10 desk radius to draw wireframes for our entire design system and then trained an object detection model on them
-
Brad Frost reposted thisBrad Frost reposted thisI will be talking about design context for agentic workflows on the main stage at #Config2026 today at 2:15 PT. If you’re in person, come hang with TJ Pitre and I afterward in the commons for a design systems hang at 3:30! https://lnkd.in/gACxzaVS
-
Brad Frost posted thisIn case anyone needs to play with a bunch of drum machines and sequencers today: https://roland50.studio/
-
Brad Frost posted thisWe had a music session in our basement on Saturday, and improvised a whole bunch of stuff: Fly Like An Eagle, an old Fleetwood Mac Song, Amazing Grace
-
Brad Frost posted thisHope life is good to you this weekend! https://lnkd.in/eUvEwX3T
-
Brad Frost posted thisWhat presentation/talk have you delivered that you're most proud of?
-
Brad Frost posted thisJust watched a hawk swoop down and snag a bird from the bird feeder. I needed the reminder that my day could be going a lot worse.
-
Brad Frost reacted on thisBrad Frost reacted on this"Oh no! We forgot Timmy!" I know I'm on a tear right now with Automobile #UX but messages like this just have me scratching my head? Yes, I know, babies have been left in cars but two extremely obvious points: 1. It is a statistically insignificant number 2. This message wouldn't help anyway.
-
Brad Frost reacted on thisAbout last night. 🤩 I've been working on Undefined for six months leading all down to the first event; a wonderful room of support from people all over tech. From CEOs to ICs, from product marketing managers to conversational designers, and everyone in between. It was a small but mighty representation of our community. Once more I'm deeply thanking the folks who attended and hope this energy only grows from here. See you at the next one! Details coming soon. Subscribe to the calendar at undefined.ds.house for updates.Brad Frost reacted on thisSupport your friends. I don’t always trek back into Manhattan, but when I do, it’s for a dang good reason. You big Donnie, UNDEFINED was a smash. Greatest game show to have ever been vibe coded in the history of vibe coding. Forward to Extraordinary, my guy.
-
Brad Frost liked thisBrad Frost liked thisWith style queries now in all browsers, here's my take on the best way to do dynamic color theming with modern CSS: ✍ register a custom property 🌓 light-dark() to style based on color-scheme 🗞️ contrast-color() to auto-pick black or white for foreground text on any background 🎨 style queries to branch into custom color pallets based on contrast-color 🌳 optionally leverage relative color syntax for variants And these features are now available in all modern browsers! 🎉 Some other fun tricks in here too like using light-dark() with transparent to swap between shadows and glowy borders, and leveraging contrast-color() as a boolean to apply expanded color palettes. Read about it ⬇️⬇️ https://lnkd.in/eZmNEz57una.im | Modern CSS theming with light-dark(), contrast-color(), and style queriesuna.im | Modern CSS theming with light-dark(), contrast-color(), and style queries
-
Brad Frost liked thisBrad Frost liked thisSome predictions: - we pick our models today but as tokens and context management become more important, there will be more abstractions to automate and create efficiencies - TPUs will become cheaper over time (like all compute has historically) - People will be less all or nothing on AI- just as we individually have app and browsing preferences, we will have preferences around automation, cobrowse and normal human-driven tasks - Version control as we know it will be disrupted - Human communities and the value of the handmade in certain areas will become more important, not less - There will be more of a backlash against full hype or skepticism of AI and we’ll reach more of a reasonable middle ground, “normies” will start to adopt it but not the way VC/Tech Twitter imagines - The way we train juniors will focus more and more on system design
-
Brad Frost liked thisBrad Frost liked thisFan out a TS contract, state-aware CSS, a React scaffold, and Storybook stories for 50 components using specs generated from your Figma library, all in < 1 min and costing 0 tokens. From there, you'd orchestrate a pass of subagent-per-component to polish up to a Storybook that starts your prototype kit or code library journey. Then, when Figma changes, regenerate in <1 min to flow Figma-originated change everywhere. The commands are straight forward: 1. fetch (your files) 2. scan (for components marked READY_FOR_DEV) 3. generate (the specs) 4. transform (into css, contracts, scaffolds and stories). This is spec-driven development in the literal sense. Figma holds design intent — variant structure, token references, interactive states, layout relationships. Yet, spec is the stable hub, downstream from Figma and other origins-of-intent like designer prototypes built with HTML. Regenerate and reconcile from those sources as design evolves. But the pipeline? It stays out of your way once it's done its job so that human and agentic judgment — accessibility fixes, behavioral polish, extensions the spec can't (or doesn't yet) express — accumulates beyond it. Links in the comments.
Experience & Education
-
Brad Frost Web
View Brad’s full experience
See their title, tenure and more.
or
Licenses & Certifications
Publications
-
Atomic Design
Self Published
See publicationAtomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team's design and development workflow.
-
Creating a Mobile-First Responsive Web Design
Google's HTML5 Rocks
See publicationA step-by-step walkthrough of how to implement a mobile-first responsive web design for Google's HTML5 Rocks resource site.
-
For a Future Friendly Web
A List Apart
See publicationIt is time to move toward a future-friendly web. Our current device landscape is a plethora of desktops, laptops, netbooks, tablets, feature phones, smartphones, and more, but this is just the beginning. The rapid pace of technological change is accelerating, and our current processes, standards, and infrastructure are quickly reaching their breaking points. How can we deal with increasing device diversity and decreasing attention spans? Brad Frost of futurefriend.ly explains how, while this…
It is time to move toward a future-friendly web. Our current device landscape is a plethora of desktops, laptops, netbooks, tablets, feature phones, smartphones, and more, but this is just the beginning. The rapid pace of technological change is accelerating, and our current processes, standards, and infrastructure are quickly reaching their breaking points. How can we deal with increasing device diversity and decreasing attention spans? Brad Frost of futurefriend.ly explains how, while this era of ubiquitous connectivity creates new challenges, it also creates tremendous opportunities to reach people wherever they may be.
Projects
-
Subatomic: The Complete Guide To Design Tokens
Master design tokens to support your Multi-All-The-Things organization. This in-depth course teaches designers and developers core concepts, Figma architecture, code architecture, naming conventions, process, governance, and everything else involved in establishing a solid design token system for your organization's design system.
Other creators -
-
This Is Responsive
-
See projectPatterns, resources and news for creating responsive web experiences.
Recommendations received
5 people have recommended Brad
Join now to viewExplore more posts
-
James Cantrell
Is your website WCAG 2.1 Level AA Compliant? You can scan here to see what you may need to tackle before the April deadline! https://lnkd.in/gZuSSp9k What WCAG 2.1 Level AA Means? Web Content Accessibility Guidelines (WCAG) 2.1 WCAG 2.1 Level AA is an internationally recognized accessibility standard for digital content created by the World Wide Web Consortium. It ensures people with disabilities can access digital information. For emails and web pages, this includes things like: Readable text contrast (text vs background) Alt text for images so screen readers can describe them Accessible links (descriptive, not “click here”) Logical heading structure Readable fonts and spacing Keyboard navigability Accessible tables The goal is to support people using: screen readers voice navigation keyboard navigation magnification tools color-blind viewing
1 Comment -
Prax Cruz
One of the biggest improvements to your website doesn't come from adding features. It comes from not adding them. Removing sections helps because they may distract the user from the primary decision. The hardest part of UX isn’t knowing what to include. It’s knowing what to leave out. Constraint is often where clarity comes from. Features tell, but benefits sell.
1 Comment -
Michelle Ng
Many nonprofit & small business websites fail accessibility tests on this one thing: color contrast. Here's the fix: Aim for at least 4.5:1 contrast ratio for normal text. Quick test: Use the free tool Google PageSpeed Insights. Takes few seconds. https://pagespeed.web.dev/ Check for Accessibility score. Ideally, you should pass this test: Background and foreground colors have a sufficient contrast ratio. If your site fails this test, it may be excluding visitors who need you most. Try darkening the text color or lighten the background color (or vice versa) to increase the contrast. #Accessibility #WebDesign #Nonprofit #SmallBusiness
Explore top content on LinkedIn
Find curated posts and insights for relevant topics all in one place.
View top contentOthers named Brad Frost in United States
80 others named Brad Frost in United States are on LinkedIn
See others named Brad Frost