[{"data":1,"prerenderedAt":160},["ShallowReactive",2],{"project-21241202":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":33,"aspects":34,"strip":37,"post_text":29,"what":39,"said":51,"maker_in_thread":100,"shape":106,"grid":110,"attempts":123,"same_week":124,"maker_shows":151,"maker_hidden":152,"reader_version":153,"card":154},"21241202","Design System Playground","I created this as a tool for playing around with different font and color combinations then generating a theme object that meets the System UI Theme Specification for creating…","maker","Show HN: Design System Playground","https:\u002F\u002Fdesign-system-playground.netlify.com\u002F","design-system-playground.netlify.com","johnpolacek",1570983692,2019,85,5,568,2195,26,"notable","dev_tools","theme generator","web_app",[24,21,25,26,27],"design system","font pairing","color palette","system ui theme","quiet",null,{"positive":31,"neutral":32,"mixed":31,"critical":32},1,0,2,{"design":35,"docs":36},{"positive":31,"critical":32},{"positive":32,"critical":32},[32,15,32,32,38],3,{"problem":40,"audience":29,"pricing":29,"motivation":45,"time_to_build":29,"stack":49,"openness":50,"stage":50,"team_size":50},{"value":41,"source":7,"evidence":42},"Experimenting with font and color combinations and turning them into a reusable theme object.",[43],{"id":44,"by":11,"text":6},"21242476",{"value":46,"source":7,"evidence":47},"Tool for quickly experimenting with styles for component libraries.",[48],{"id":44,"by":11,"text":6},[],"unknown",{"praise":52,"objections":68,"requests":81,"questions":98,"alternatives":99},[53,61],{"value":54,"source":55,"evidence":56},"Intuitive and produces good results","commenter",[57],{"id":58,"by":59,"text":60},"21244513","tjwds","This is really, really great! Extremely intuitive and created great results for me. Here's a few suggestions — please feel free to take them with a grain of salt: * The \"theme\"…",{"value":62,"source":55,"evidence":63},"Helpful guidance for building a theme",[64],{"id":65,"by":66,"text":67},"21246441","marapuru","Great job in building this. I had some trouble wrapping my head around the steps I was making. Maybe a little more instructions on the side would be a good addition. Maybe start…",[69,73,77],{"value":70,"source":55,"evidence":71},"Body font step appears slowly and the page shifts",[72],{"id":58,"by":59,"text":60},{"value":74,"source":55,"evidence":75},"Default extra colors are weak; no color picker",[76],{"id":58,"by":59,"text":60},{"value":78,"source":55,"evidence":79},"Unclear steps and naming (theme vs design system)",[80],{"id":65,"by":66,"text":67},[82,86,90,94],{"value":83,"source":55,"evidence":84},"Add a back button",[85],{"id":58,"by":59,"text":60},{"value":87,"source":55,"evidence":88},"Add color pickers for generated colors",[89],{"id":58,"by":59,"text":60},{"value":91,"source":55,"evidence":92},"Link theme-ui docs in the theme section",[93],{"id":58,"by":59,"text":60},{"value":95,"source":55,"evidence":96},"Add instructions beside the steps and show a finished theme",[97],{"id":65,"by":66,"text":67},[],[],{"comments":33,"answered":31,"key":101},[102,103],{"id":44,"text":6},{"id":104,"text":105},"21244709","Glad you found it useful and thanks for the feedback!",{"commenters":107,"max_depth":33,"maker_replies":33,"first_comment_mins":108,"lifespan_hours":109},4,206,17,[111,113,115,117,121],[44,32,32,112,11,31],"project\u002Fneutral\u002Fidea",[58,31,15,114,59,32],"project\u002Fpositive\u002Fdesign",[104,31,32,116,11,31],"maker\u002Fpositive\u002Fnone",[118,31,32,119,120,32],"21245168","other\u002Fneutral\u002Fnone","sdrothrock",[65,33,38,122,66,32],"project\u002Fmixed\u002Fdocs",[],[125,130,134,138,142,146],{"id":126,"name":127,"points":128,"category":129},"21231208","Bel",1288,"languages",{"id":131,"name":132,"points":133,"category":20},"21215484","Spider Pro",391,{"id":135,"name":136,"points":137,"category":20},"21270424","Pipedream",245,{"id":139,"name":140,"points":141,"category":129},"21234891","dial",190,{"id":143,"name":144,"points":145,"category":20},"21268324","reloading",187,{"id":147,"name":148,"points":149,"category":150},"21253850","Alt-tab-macos",156,"productivity",9,false,"v2",{"id":155,"name":5,"line":156,"ai":152,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":29,"top":18,"kw":157,"maker":11,"domain":10,"tier":19,"attempts":32,"strip":158,"url":9,"mix":159,"praise":54,"objection":70,"sub":21},21241202,"I created this as a tool for playing around with different font and color combinations then generating a…",[24,21,25,26,27],"05003",[31,32,31,32],1794036581916]