[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"example-src-sundial-studio":3},"\u003Cgui version=\"0.2\" name=\"Sundial Studio\">\n  \u003Ctokens>\n    \u003Ccolor name=\"bg\"            value=\"#F1EFE9\" \u002F>\n    \u003Ccolor name=\"bg-2\"          value=\"#E7E3D8\" \u002F>\n    \u003Ccolor name=\"surface\"       value=\"#FBFAF6\" \u002F>\n    \u003Ccolor name=\"ink\"           value=\"#16140F\" \u002F>\n    \u003Ccolor name=\"text\"          value=\"#16140F\" \u002F>\n    \u003Ccolor name=\"text-2\"        value=\"#57534A\" \u002F>\n    \u003Ccolor name=\"text-3\"        value=\"#8A857A\" \u002F>\n    \u003Ccolor name=\"border\"        value=\"#D8D3C6\" \u002F>\n    \u003Ccolor name=\"accent\"        value=\"#E8401F\" \u002F>\n    \u003Ccolor name=\"on-accent\"     value=\"#16140F\" \u002F>\n    \u003Ccolor name=\"inv-text\"      value=\"#EDEAE0\" \u002F>\n    \u003Ccolor name=\"inv-text-2\"    value=\"#A39E92\" \u002F>\n    \u003Ccolor name=\"inv-border\"    value=\"#322E26\" \u002F>\n  \u003C\u002Ftokens>\n\n  \u003Cstyles>\n    \u003Ctext-style name=\"Display\u002FMega\"    font-family=\"Bricolage Grotesque\" font-size=\"150\" font-weight=\"700\" line-height=\"138\" letter-spacing=\"-3\" \u002F>\n    \u003Ctext-style name=\"Display\u002FH1\"      font-family=\"Bricolage Grotesque\" font-size=\"96\"  font-weight=\"700\" line-height=\"94\"  letter-spacing=\"-2\" \u002F>\n    \u003Ctext-style name=\"Display\u002FH2\"      font-family=\"Bricolage Grotesque\" font-size=\"58\"  font-weight=\"600\" line-height=\"62\"  letter-spacing=\"-1\" \u002F>\n    \u003Ctext-style name=\"Display\u002FService\" font-family=\"Bricolage Grotesque\" font-size=\"40\"  font-weight=\"600\" line-height=\"46\"  letter-spacing=\"-0.5\" \u002F>\n    \u003Ctext-style name=\"Display\u002FCard\"    font-family=\"Bricolage Grotesque\" font-size=\"30\"  font-weight=\"600\" line-height=\"34\" \u002F>\n    \u003Ctext-style name=\"Stat\u002FNumeral\"    font-family=\"Bricolage Grotesque\" font-size=\"84\"  font-weight=\"700\" line-height=\"84\"  letter-spacing=\"-2\" \u002F>\n    \u003Ctext-style name=\"Lead\"            font-family=\"Geist\" font-size=\"24\" font-weight=\"400\" line-height=\"36\" \u002F>\n    \u003Ctext-style name=\"Body\u002FBase\"       font-family=\"Geist\" font-size=\"17\" font-weight=\"400\" line-height=\"28\" \u002F>\n    \u003Ctext-style name=\"Body\u002FSm\"         font-family=\"Geist\" font-size=\"15\" font-weight=\"400\" line-height=\"23\" \u002F>\n    \u003Ctext-style name=\"Nav\"             font-family=\"Geist\" font-size=\"15\" font-weight=\"500\" line-height=\"20\" \u002F>\n    \u003Ctext-style name=\"Label\u002FUI\"        font-family=\"Geist\" font-size=\"14\" font-weight=\"600\" line-height=\"18\" letter-spacing=\"0.3\" \u002F>\n    \u003Ctext-style name=\"Mono\u002FEyebrow\"    font-family=\"JetBrains Mono\" font-size=\"12\" font-weight=\"500\" line-height=\"16\" letter-spacing=\"2.5\" \u002F>\n    \u003Ctext-style name=\"Mono\u002FIndex\"      font-family=\"JetBrains Mono\" font-size=\"14\" font-weight=\"500\" line-height=\"20\" letter-spacing=\"1\" \u002F>\n    \u003Ctext-style name=\"Mono\u002FTag\"        font-family=\"JetBrains Mono\" font-size=\"12\" font-weight=\"500\" line-height=\"16\" letter-spacing=\"0.5\" \u002F>\n  \u003C\u002Fstyles>\n\n  \u003Cfonts>\n    \u003Cfont family=\"Bricolage Grotesque\" source=\"google\" weights=\"400 500 600 700 800\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"Geist\" source=\"google\" weights=\"400 500 600 700\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"JetBrains Mono\" source=\"google\" weights=\"400 500\" styles=\"normal\" \u002F>\n  \u003C\u002Ffonts>\n\n  \u003Ccol w=\"1440\" fill=\"$bg\">\n\n    \u003C!-- ============================ NAV ============================ -->\n    \u003Crow role=\"top-navigation-bar\" w=\"fill\" p=\"26 64\" gap=\"auto\" align=\"middle-center\" border-bottom=\"1 $border\">\n      \u003Crow gap=\"10\" align=\"middle-center\">\n        \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"22\" font-weight=\"700\" letter-spacing=\"-0.5\" value=\"Sundial\" color=\"$text\" \u002F>\n        \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"20\" font-weight=\"700\" value=\"✸\" color=\"$accent\" \u002F>\n      \u003C\u002Frow>\n      \u003Crow gap=\"40\" align=\"middle-center\">\n        \u003Ctext text-style=\"Nav\" value=\"Work\" color=\"$text\" \u002F>\n        \u003Ctext text-style=\"Nav\" value=\"Services\" color=\"$text-2\" \u002F>\n        \u003Ctext text-style=\"Nav\" value=\"Studio\" color=\"$text-2\" \u002F>\n        \u003Ctext text-style=\"Nav\" value=\"Journal\" color=\"$text-2\" \u002F>\n      \u003C\u002Frow>\n      \u003Crow p=\"12 22\" fill=\"$accent\" radius=\"999\" align=\"middle-center\">\n        \u003Ctext text-style=\"Label\u002FUI\" value=\"Start a project\" color=\"$on-accent\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Frow>\n\n    \u003C!-- ============================ HERO (auto-layout \u002F flex) ============================ -->\n    \u003Ccol w=\"fill\" p=\"64 64 88\" gap=\"44\" fill=\"$bg\" align=\"top-left\">\n\n      \u003C!-- eyebrow -->\n      \u003Crow w=\"fill\" gap=\"16\" align=\"middle-left\">\n        \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"Product design studio\" color=\"$accent\" \u002F>\n        \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"·  San Francisco \u002F New York  ·  Est. 2014\" color=\"$text-3\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- two columns: headline + CTA on the left, studio photograph on the right -->\n      \u003Crow w=\"fill\" gap=\"56\" align=\"top-left\">\n\n        \u003Ccol w=\"740\" gap=\"36\" align=\"top-left\">\n          \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"100\" font-weight=\"700\" line-height=\"96\" letter-spacing=\"-3\" w=\"fill\" value=\"We make software worth keeping.\" color=\"$text\" \u002F>\n          \u003Ctext text-style=\"Lead\" w=\"560\" value=\"Sundial partners with founders and product teams to turn ambitious ideas into interfaces that ship, scale, and earn a permanent spot on the home screen.\" color=\"$text-2\" \u002F>\n          \u003Crow gap=\"14\" align=\"middle-left\" pt=\"8\">\n            \u003Crow role=\"button\" p=\"16 30\" fill=\"$ink\" radius=\"999\" align=\"middle-center\">\n              \u003Ctext text-style=\"Label\u002FUI\" value=\"Start a project\" color=\"$inv-text\" \u002F>\n            \u003C\u002Frow>\n            \u003Crow role=\"button\" p=\"16 28\" fill=\"none\" border=\"1 $text\" radius=\"999\" align=\"middle-center\">\n              \u003Ctext text-style=\"Label\u002FUI\" value=\"See selected work  →\" color=\"$text\" \u002F>\n            \u003C\u002Frow>\n          \u003C\u002Frow>\n        \u003C\u002Fcol>\n\n        \u003Ccol w=\"fill\" gap=\"0\" align=\"top-left\">\n          \u003Crow p=\"9 16\" fill=\"$accent\" align=\"middle-center\">\n            \u003Ctext text-style=\"Mono\u002FTag\" text-case=\"uppercase\" value=\"Inside the studio\" color=\"$on-accent\" \u002F>\n          \u003C\u002Frow>\n          \u003Cimg w=\"fill\" h=\"512\" fit=\"cover\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1716703742354-c3c45ecc3b27?w=1400&q=80&auto=format&fit=crop\" \u002F>\n        \u003C\u002Fcol>\n\n      \u003C\u002Frow>\n\n      \u003C!-- scroll cue -->\n      \u003Crow w=\"fill\" gap=\"10\" align=\"middle-left\" pt=\"8\">\n        \u003Ctext text-style=\"Mono\u002FIndex\" value=\"(01)\" color=\"$accent\" \u002F>\n        \u003Ctext text-style=\"Mono\u002FIndex\" value=\"Scroll to explore the work\" color=\"$text-3\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcol>\n\n    \u003C!-- ============================ CLIENTS ============================ -->\n    \u003Ccol w=\"fill\" p=\"44 64\" gap=\"28\" fill=\"$bg\" border-top=\"1 $border\" border-bottom=\"1 $border\">\n      \u003Crow w=\"fill\" gap=\"auto\" align=\"middle-center\">\n        \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"Trusted by product teams at\" color=\"$text-3\" \u002F>\n        \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"12 products shipped this year\" color=\"$text-3\" \u002F>\n      \u003C\u002Frow>\n      \u003Crow w=\"fill\" gap=\"auto\" align=\"middle-center\">\n        \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"34\" font-weight=\"600\" letter-spacing=\"-1\" value=\"Monzo\" color=\"$text\" \u002F>\n        \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"34\" font-weight=\"600\" letter-spacing=\"-1\" value=\"Notion\" color=\"$text\" \u002F>\n        \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"34\" font-weight=\"600\" letter-spacing=\"-1\" value=\"Linear\" color=\"$text\" \u002F>\n        \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"34\" font-weight=\"600\" letter-spacing=\"-1\" value=\"Vercel\" color=\"$text\" \u002F>\n        \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"34\" font-weight=\"600\" letter-spacing=\"-1\" value=\"Figma\" color=\"$text\" \u002F>\n        \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"34\" font-weight=\"600\" letter-spacing=\"-1\" value=\"Duolingo\" color=\"$text\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcol>\n\n    \u003C!-- ============================ SERVICES (dark) ============================ -->\n    \u003Ccol w=\"fill\" p=\"116 64\" gap=\"64\" fill=\"$ink\">\n      \u003Crow w=\"fill\" gap=\"auto\" align=\"bottom-left\">\n        \u003Ccol w=\"640\" gap=\"22\">\n          \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"What we do  \u002F  02\" color=\"$accent\" \u002F>\n          \u003Ctext text-style=\"Display\u002FH2\" value=\"Five ways we move the needle.\" color=\"$inv-text\" \u002F>\n        \u003C\u002Fcol>\n        \u003Ctext text-style=\"Body\u002FBase\" w=\"360\" value=\"A senior, embedded team. No handoffs to juniors, no endless decks. We work inside your product and your repo.\" color=\"$inv-text-2\" \u002F>\n      \u003C\u002Frow>\n\n      \u003Ccol w=\"fill\" gap=\"0\">\n        \u003C!-- 01 -->\n        \u003Crow w=\"fill\" gap=\"32\" p=\"36 0\" border-top=\"1 $inv-border\" align=\"top-left\">\n          \u003Ctext text-style=\"Mono\u002FIndex\" w=\"64\" value=\"01\" color=\"$accent\" \u002F>\n          \u003Ctext text-style=\"Display\u002FService\" w=\"420\" value=\"Product Strategy\" color=\"$inv-text\" \u002F>\n          \u003Ctext text-style=\"Body\u002FBase\" w=\"fill\" value=\"Research, positioning, and roadmap shaping so the right thing gets built before a single pixel is drawn.\" color=\"$inv-text-2\" \u002F>\n          \u003Ctext text-style=\"Mono\u002FTag\" w=\"120\" value=\"Research \u002F Roadmap\" color=\"$text-3\" align=\"right\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- 02 -->\n        \u003Crow w=\"fill\" gap=\"32\" p=\"36 0\" border-top=\"1 $inv-border\" align=\"top-left\">\n          \u003Ctext text-style=\"Mono\u002FIndex\" w=\"64\" value=\"02\" color=\"$accent\" \u002F>\n          \u003Ctext text-style=\"Display\u002FService\" w=\"420\" value=\"Interface Design\" color=\"$inv-text\" \u002F>\n          \u003Ctext text-style=\"Body\u002FBase\" w=\"fill\" value=\"End-to-end UX and UI for web and native apps, from flows and states to the final, pixel-honest screen.\" color=\"$inv-text-2\" \u002F>\n          \u003Ctext text-style=\"Mono\u002FTag\" w=\"120\" value=\"UX \u002F UI \u002F iOS\" color=\"$text-3\" align=\"right\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- 03 -->\n        \u003Crow w=\"fill\" gap=\"32\" p=\"36 0\" border-top=\"1 $inv-border\" align=\"top-left\">\n          \u003Ctext text-style=\"Mono\u002FIndex\" w=\"64\" value=\"03\" color=\"$accent\" \u002F>\n          \u003Ctext text-style=\"Display\u002FService\" w=\"420\" value=\"Brand & Identity\" color=\"$inv-text\" \u002F>\n          \u003Ctext text-style=\"Body\u002FBase\" w=\"fill\" value=\"Naming, logo, type, and the full visual system that makes a product feel unmistakably like itself.\" color=\"$inv-text-2\" \u002F>\n          \u003Ctext text-style=\"Mono\u002FTag\" w=\"120\" value=\"Brand \u002F Type\" color=\"$text-3\" align=\"right\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- 04 -->\n        \u003Crow w=\"fill\" gap=\"32\" p=\"36 0\" border-top=\"1 $inv-border\" align=\"top-left\">\n          \u003Ctext text-style=\"Mono\u002FIndex\" w=\"64\" value=\"04\" color=\"$accent\" \u002F>\n          \u003Ctext text-style=\"Display\u002FService\" w=\"420\" value=\"Design Systems\" color=\"$inv-text\" \u002F>\n          \u003Ctext text-style=\"Body\u002FBase\" w=\"fill\" value=\"Component libraries and tokens that keep fast-moving teams consistent, from Figma straight through to code.\" color=\"$inv-text-2\" \u002F>\n          \u003Ctext text-style=\"Mono\u002FTag\" w=\"120\" value=\"Tokens \u002F Libraries\" color=\"$text-3\" align=\"right\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- 05 -->\n        \u003Crow w=\"fill\" gap=\"32\" p=\"36 0\" border-top=\"1 $inv-border\" border-bottom=\"1 $inv-border\" align=\"top-left\">\n          \u003Ctext text-style=\"Mono\u002FIndex\" w=\"64\" value=\"05\" color=\"$accent\" \u002F>\n          \u003Ctext text-style=\"Display\u002FService\" w=\"420\" value=\"Prototyping & Motion\" color=\"$inv-text\" \u002F>\n          \u003Ctext text-style=\"Body\u002FBase\" w=\"fill\" value=\"High-fidelity prototypes and motion specs that make ideas testable, fundable, and ready to hand to engineering.\" color=\"$inv-text-2\" \u002F>\n          \u003Ctext text-style=\"Mono\u002FTag\" w=\"120\" value=\"Proto \u002F Motion\" color=\"$text-3\" align=\"right\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Fcol>\n    \u003C\u002Fcol>\n\n    \u003C!-- ============================ SELECTED WORK (unit grid, broken) ============================ -->\n    \u003Ccol w=\"fill\" p=\"116 64 40\" gap=\"56\" fill=\"$bg\">\n      \u003Crow w=\"fill\" gap=\"auto\" align=\"bottom-left\">\n        \u003Ccol gap=\"22\">\n          \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"Selected work  \u002F  03\" color=\"$accent\" \u002F>\n          \u003Ctext text-style=\"Display\u002FH2\" value=\"A few things we shipped.\" color=\"$text\" \u002F>\n        \u003C\u002Fcol>\n        \u003Ctext text-style=\"Label\u002FUI\" value=\"All case studies  →\" color=\"$text\" \u002F>\n      \u003C\u002Frow>\n\n      \u003Cgrid role=\"gallery\" unit=\"8\" w=\"1312\" h=\"1040\" align=\"top-left\">\n        \u003C!-- 01 featured photo (left) -->\n        \u003Cimg gc=\"1\u002F82\" gr=\"1\u002F60\" fit=\"cover\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1609921133942-9e485ac26bc8?w=1400&q=80&auto=format&fit=crop\" \u002F>\n        \u003Ccol gc=\"1\u002F78\" gr=\"63\u002F82\" gap=\"8\" align=\"top-left\">\n          \u003Crow gap=\"12\" align=\"middle-left\">\n            \u003Ctext text-style=\"Mono\u002FIndex\" value=\"(01)\" color=\"$accent\" \u002F>\n            \u003Ctext text-style=\"Mono\u002FTag\" text-case=\"uppercase\" value=\"Product design · iOS · 2024\" color=\"$text-3\" \u002F>\n          \u003C\u002Frow>\n          \u003Ctext text-style=\"Display\u002FCard\" value=\"Northwind, mobile banking rebuilt\" color=\"$text\" \u002F>\n          \u003Ctext text-style=\"Body\u002FSm\" w=\"560\" value=\"A ground-up redesign of the flagship banking app: new account model, faster payments flow, and a system that scaled to 40 screens.\" color=\"$text-2\" \u002F>\n        \u003C\u002Fcol>\n\n        \u003C!-- 02 tall photo (right) -->\n        \u003Cimg gc=\"90\u002F164\" gr=\"1\u002F86\" fit=\"cover\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1661246626039-5429b8f7488a?w=1200&q=80&auto=format&fit=crop\" \u002F>\n        \u003Ccol gc=\"90\u002F164\" gr=\"89\u002F107\" gap=\"8\" align=\"top-left\">\n          \u003Crow gap=\"12\" align=\"middle-left\">\n            \u003Ctext text-style=\"Mono\u002FIndex\" value=\"(02)\" color=\"$accent\" \u002F>\n            \u003Ctext text-style=\"Mono\u002FTag\" text-case=\"uppercase\" value=\"UX \u002F UI · iOS · 2023\" color=\"$text-3\" \u002F>\n          \u003C\u002Frow>\n          \u003Ctext text-style=\"Display\u002FCard\" value=\"Lumen, AI photo editor\" color=\"$text\" \u002F>\n          \u003Ctext text-style=\"Body\u002FSm\" w=\"540\" value=\"A gesture-first editing surface and a backgrounds engine that turned a weekend prototype into a top-10 app.\" color=\"$text-2\" \u002F>\n        \u003C\u002Fcol>\n\n        \u003C!-- 03 dark text tile (left, lower) -->\n        \u003Ccol gc=\"1\u002F82\" gr=\"90\u002F127\" h=\"fill\" p=\"44\" gap=\"auto\" fill=\"$ink\" align=\"top-left\">\n          \u003Ccol gap=\"14\" align=\"top-left\">\n            \u003Crow gap=\"12\" align=\"middle-left\">\n              \u003Ctext text-style=\"Mono\u002FIndex\" value=\"(03)\" color=\"$accent\" \u002F>\n              \u003Ctext text-style=\"Mono\u002FTag\" text-case=\"uppercase\" value=\"Brand & identity · 2025\" color=\"$inv-text-2\" \u002F>\n            \u003C\u002Frow>\n            \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"44\" font-weight=\"600\" line-height=\"48\" letter-spacing=\"-1\" w=\"540\" value=\"Halo, a brand and design system\" color=\"$inv-text\" \u002F>\n          \u003C\u002Fcol>\n          \u003Crow w=\"fill\" gap=\"auto\" align=\"middle-left\">\n            \u003Ctext text-style=\"Body\u002FSm\" w=\"440\" value=\"Naming, identity, and a 200-component library that took the team from scattered Figma files to one source of truth.\" color=\"$inv-text-2\" \u002F>\n            \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"32\" font-weight=\"600\" value=\"→\" color=\"$accent\" \u002F>\n          \u003C\u002Frow>\n        \u003C\u002Fcol>\n      \u003C\u002Fgrid>\n    \u003C\u002Fcol>\n\n    \u003C!-- ============================ APPROACH (split) ============================ -->\n    \u003Crow w=\"fill\" p=\"104 64\" gap=\"72\" fill=\"$bg-2\" align=\"top-left\">\n      \u003Ccol w=\"600\" gap=\"28\" align=\"top-left\">\n        \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"How we work  \u002F  04\" color=\"$accent\" \u002F>\n        \u003Ctext text-style=\"Display\u002FH2\" value=\"Less deck. More product.\" color=\"$text\" \u002F>\n        \u003Ctext text-style=\"Body\u002FBase\" w=\"540\" value=\"We embed with your team for a focused engagement, design in the open, and leave you with something real, not a 60-slide PDF nobody opens twice.\" color=\"$text-2\" \u002F>\n        \u003Ccol w=\"fill\" gap=\"0\" pt=\"12\">\n          \u003Crow w=\"fill\" gap=\"20\" p=\"22 0\" border-top=\"1 $border\" align=\"top-left\">\n            \u003Ctext text-style=\"Mono\u002FIndex\" w=\"48\" value=\"01\" color=\"$accent\" \u002F>\n            \u003Ccol gap=\"4\">\n              \u003Ctext text-style=\"Label\u002FUI\" value=\"Discover\" color=\"$text\" \u002F>\n              \u003Ctext text-style=\"Body\u002FSm\" w=\"420\" value=\"Two weeks to map the problem, the users, and the constraints worth fighting.\" color=\"$text-2\" \u002F>\n            \u003C\u002Fcol>\n          \u003C\u002Frow>\n          \u003Crow w=\"fill\" gap=\"20\" p=\"22 0\" border-top=\"1 $border\" align=\"top-left\">\n            \u003Ctext text-style=\"Mono\u002FIndex\" w=\"48\" value=\"02\" color=\"$accent\" \u002F>\n            \u003Ccol gap=\"4\">\n              \u003Ctext text-style=\"Label\u002FUI\" value=\"Design\" color=\"$text\" \u002F>\n              \u003Ctext text-style=\"Body\u002FSm\" w=\"420\" value=\"Tight loops of flows, screens, and clickable prototypes, reviewed live every week.\" color=\"$text-2\" \u002F>\n            \u003C\u002Fcol>\n          \u003C\u002Frow>\n          \u003Crow w=\"fill\" gap=\"20\" p=\"22 0\" border-top=\"1 $border\" border-bottom=\"1 $border\" align=\"top-left\">\n            \u003Ctext text-style=\"Mono\u002FIndex\" w=\"48\" value=\"03\" color=\"$accent\" \u002F>\n            \u003Ccol gap=\"4\">\n              \u003Ctext text-style=\"Label\u002FUI\" value=\"Ship\" color=\"$text\" \u002F>\n              \u003Ctext text-style=\"Body\u002FSm\" w=\"420\" value=\"Production-ready files, a living system, and pairing with your engineers until it lands.\" color=\"$text-2\" \u002F>\n            \u003C\u002Fcol>\n          \u003C\u002Frow>\n        \u003C\u002Fcol>\n      \u003C\u002Fcol>\n      \u003Cimg w=\"600\" h=\"600\" fit=\"cover\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1572021335469-31706a17aaef?w=1200&q=80&auto=format&fit=crop\" \u002F>\n    \u003C\u002Frow>\n\n    \u003C!-- ============================ STATS ============================ -->\n    \u003Crow w=\"fill\" p=\"80 64\" gap=\"auto\" fill=\"$bg\" align=\"top-left\" border-bottom=\"1 $border\">\n      \u003Ccol gap=\"10\">\n        \u003Crow gap=\"2\" align=\"bottom-left\">\n          \u003Ctext text-style=\"Stat\u002FNumeral\" value=\"120\" color=\"$text\" \u002F>\n          \u003Ctext text-style=\"Stat\u002FNumeral\" value=\"+\" color=\"$accent\" \u002F>\n        \u003C\u002Frow>\n        \u003Ctext text-style=\"Body\u002FSm\" value=\"Products shipped\" color=\"$text-3\" \u002F>\n      \u003C\u002Fcol>\n      \u003Ccol gap=\"10\">\n        \u003Ctext text-style=\"Stat\u002FNumeral\" value=\"9 yrs\" color=\"$text\" \u002F>\n        \u003Ctext text-style=\"Body\u002FSm\" value=\"In practice\" color=\"$text-3\" \u002F>\n      \u003C\u002Fcol>\n      \u003Ccol gap=\"10\">\n        \u003Ctext text-style=\"Stat\u002FNumeral\" value=\"14\" color=\"$text\" \u002F>\n        \u003Ctext text-style=\"Body\u002FSm\" value=\"Design awards\" color=\"$text-3\" \u002F>\n      \u003C\u002Fcol>\n      \u003Ccol gap=\"10\">\n        \u003Crow gap=\"2\" align=\"bottom-left\">\n          \u003Ctext text-style=\"Stat\u002FNumeral\" value=\"$400M\" color=\"$text\" \u002F>\n          \u003Ctext text-style=\"Stat\u002FNumeral\" value=\"+\" color=\"$accent\" \u002F>\n        \u003C\u002Frow>\n        \u003Ctext text-style=\"Body\u002FSm\" value=\"Raised by our clients\" color=\"$text-3\" \u002F>\n      \u003C\u002Fcol>\n    \u003C\u002Frow>\n\n    \u003C!-- ============================ CTA (accent) ============================ -->\n    \u003Ccol w=\"fill\" p=\"128 64\" gap=\"40\" fill=\"$accent\" align=\"top-left\">\n      \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"Let's talk  \u002F  05\" color=\"$on-accent\" \u002F>\n      \u003Ctext text-style=\"Display\u002FH1\" w=\"1040\" value=\"Have something worth building? Let's make it durable.\" color=\"$on-accent\" \u002F>\n      \u003Crow gap=\"14\" align=\"middle-left\" pt=\"8\">\n        \u003Crow p=\"18 32\" fill=\"$ink\" radius=\"999\" align=\"middle-center\">\n          \u003Ctext text-style=\"Label\u002FUI\" value=\"hello@sundial.studio\" color=\"$inv-text\" \u002F>\n        \u003C\u002Frow>\n        \u003Crow p=\"18 30\" fill=\"none\" border=\"1 $ink\" radius=\"999\" align=\"middle-center\">\n          \u003Ctext text-style=\"Label\u002FUI\" value=\"Book a 30-min intro  →\" color=\"$on-accent\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n    \u003C\u002Fcol>\n\n    \u003C!-- ============================ FOOTER (dark) ============================ -->\n    \u003Ccol w=\"fill\" p=\"80 64 40\" gap=\"64\" fill=\"$ink\">\n      \u003Crow w=\"fill\" gap=\"auto\" align=\"top-left\">\n        \u003Ccol w=\"420\" gap=\"18\" align=\"top-left\">\n          \u003Crow gap=\"10\" align=\"middle-center\">\n            \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"26\" font-weight=\"700\" letter-spacing=\"-0.5\" value=\"Sundial\" color=\"$inv-text\" \u002F>\n            \u003Ctext font-family=\"Bricolage Grotesque\" font-size=\"24\" font-weight=\"700\" value=\"✸\" color=\"$accent\" \u002F>\n          \u003C\u002Frow>\n          \u003Ctext text-style=\"Body\u002FSm\" w=\"360\" value=\"A product design studio for teams who care how the thing actually works, not just how it photographs.\" color=\"$inv-text-2\" \u002F>\n        \u003C\u002Fcol>\n        \u003Crow gap=\"72\" align=\"top-left\">\n          \u003Ccol gap=\"14\" align=\"top-left\">\n            \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"Studio\" color=\"$text-3\" \u002F>\n            \u003Ctext text-style=\"Nav\" value=\"About\" color=\"$inv-text\" \u002F>\n            \u003Ctext text-style=\"Nav\" value=\"Careers\" color=\"$inv-text\" \u002F>\n            \u003Ctext text-style=\"Nav\" value=\"Journal\" color=\"$inv-text\" \u002F>\n          \u003C\u002Fcol>\n          \u003Ccol gap=\"14\" align=\"top-left\">\n            \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"Services\" color=\"$text-3\" \u002F>\n            \u003Ctext text-style=\"Nav\" value=\"Strategy\" color=\"$inv-text\" \u002F>\n            \u003Ctext text-style=\"Nav\" value=\"Interface\" color=\"$inv-text\" \u002F>\n            \u003Ctext text-style=\"Nav\" value=\"Systems\" color=\"$inv-text\" \u002F>\n          \u003C\u002Fcol>\n          \u003Ccol gap=\"14\" align=\"top-left\">\n            \u003Ctext text-style=\"Mono\u002FEyebrow\" text-case=\"uppercase\" value=\"Elsewhere\" color=\"$text-3\" \u002F>\n            \u003Ctext text-style=\"Nav\" value=\"Twitter \u002F X\" color=\"$inv-text\" \u002F>\n            \u003Ctext text-style=\"Nav\" value=\"Dribbble\" color=\"$inv-text\" \u002F>\n            \u003Ctext text-style=\"Nav\" value=\"LinkedIn\" color=\"$inv-text\" \u002F>\n          \u003C\u002Fcol>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n      \u003Crow w=\"fill\" gap=\"auto\" align=\"middle-left\" pt=\"32\" border-top=\"1 $inv-border\">\n        \u003Ctext text-style=\"Mono\u002FTag\" value=\"© 2026 Sundial Studio  ·  Designed in San Francisco\" color=\"$text-3\" \u002F>\n        \u003Ctext text-style=\"Mono\u002FTag\" value=\"hello@sundial.studio\" color=\"$inv-text-2\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Fcol>\n\n  \u003C\u002Fcol>\n\u003C\u002Fgui>\n",1784753173035]