[{"data":1,"prerenderedAt":161},["ShallowReactive",2],{"$fTOPDb83PYjY71cgQ9E5vOgvE2_GuTbSvAZhX2XvxJXo":3},{"item":4,"meta":97},{"id":5,"title":6,"alt":7,"date":8,"design-phase":9,"designer":10,"era":11,"extension":12,"featured":13,"gallery":14,"image":16,"meta":42,"narrative":82,"project":83,"source-file":82,"stem":84,"subject":85,"tags":86,"tool":94,"type":95,"__hash__":96},"archive\u002Farchive\u002F2026-q4\u002F2026-10-01-c103-trend-variations.md","Now + Trend — Variations","The Now + Trend — Variations page: a sticky lever row (metric, subject, grouping, world, window, trend window, delta basis, state, gaps, volatility, ink, labels) over §0, the Teams page as shipped — Coverage 100 %, Spend $331 rolled down to four teams with a daily spark, and a Spend trend column of sparklines.","2026-10-01","1.0","mark","seed","md",false,[15,18,21,24,27,30,33,36,39],{"src":16,"alt":17},"\u002Fcycles\u002Fdesign\u002Fc103-trend.png","§0 Now (control): the Teams page replicated on the seed snapshot — Spend $331 (Payments $156.22 · Frontend $69.86 · Data $63.06 · Platform $42.30), sorted by spend, a Spend trend sparkline per team.",{"src":19,"alt":20},"\u002Fcycles\u002Fdesign\u002Fc103-trend-rolldowns.png","§2 Roll-downs with history: the Spend tile's team rows as bars only (R1), bar plus inline spark (R2) and bar plus DataMetricTrend (R3), each at card width, 200 px and a 160 × 14 row.",{"src":22,"alt":23},"\u002Fcycles\u002Fdesign\u002Fc103-trend-models.png","§4 Breakdown over time, grouped provider → model: stacked area, 100 % per week, small multiples and a bump chart of weekly rank — every drawing sums to the $10.5k window total.",{"src":25,"alt":26},"\u002Fcycles\u002Fdesign\u002Fc103-trend-gaps.png","The 1,500-person world at 30d with 40 % of days not collected and a spike day: Spend $30.3k over 40 teams, trend sparklines broken at the missing days rather than drawn through zero.",{"src":28,"alt":29},"\u002Fcycles\u002Fdesign\u002Fc103-trend-lab.png","§6 Degradation lab: forms as rows (number only, number + DataMetricTrend, number + % change) forced into the size ladder from a 520 × 200 card down to a 120 px table cell, each cell ticked for direction, magnitude and driver.",{"src":31,"alt":32},"\u002Fcycles\u002Fdesign\u002Fc103-trend-24h.png","§0 at 24h: one known day, so every Spend trend cell is an em-dash and the tile drops its spark — the honest empty state.",{"src":34,"alt":35},"\u002Fcycles\u002Fdesign\u002Fc103-trend-full.png","The whole page top to bottom: §0 control, §1 the F0–F21 form catalogue plus Activity's history row, §2–§5, the §6 lab and the §7 keep \u002F maybe \u002F kill ledger.",{"src":37,"alt":38},"\u002Fcycles\u002Fdesign\u002Fc103-trend-gaps-full.png","The whole page on the 1,500-person world with 40 % gaps — every form's handling of days that were never collected.",{"src":40,"alt":41},"\u002Fcycles\u002Fdesign\u002Fc103-trend-lab-full.png","The full degradation lab: every form at every size, with the auto-checks marking where each one breaks.",{"body":43},{"type":44,"value":45,"toc":78},"minimark",[46,60,63],[47,48,49,50,54,55,59],"p",{},"Mark's 2026-09-30 review asked how to show cost per team ",[51,52,53],"em",{},"over time",": \"'Now' we are currently doing this well\" — so explore trend and historical movement many ways, and slide the levers to see how the information degrades when it's forced into different places and sizes. Volume over perfection. ",[56,57,58],"code",{},"\u002Fpages\u002Fphase3\u002Flanding-trend-variations"," is the answer as a Phase 3 page beside c100's tile-map, matrix and lever-strip variations: twenty-two forms (number only, deltas, sparklines line \u002F area \u002F with markers, micro-bars, slope, heat strip, horizon, stacked area, 100 % weeks, small multiples, bump chart, nested ink, toggles, breakdown + chart) plus Activity's history row from the same day, set against today's Teams page as the control.",[47,61,62],{},"Every drawing reads one fixture: a dated snapshot of the real seed (81 served days to 2026-07-01, $331 at 7d) and synthetic worlds of 20, 200 and 1,500 people, with knobs for gaps (never drawn as zero), volatility and first-run history. Each stacked drawing sums to its tile's total. The §6 lab forces every form through the size ladder down to a glyph and marks where direction, magnitude or the driver stops reading; §7 is a first-pass keep \u002F maybe \u002F kill ledger for Mark to overrule.",[47,64,65,66,69,70,73,74,77],{},"Reviewed by Mark on 2026-10-01: \"we won't be integrating at this juncture (we will down the road)\". The page stays as the reference for that integration. What it surfaced for the layer: ",[56,67,68],{},"DataMetricSpark"," and ",[56,71,72],{},"DataHistoryGraph"," can't yet draw a not-collected day as a gap. Captured 2026-10-01 on the design dev server at 1440 (program ",[56,75,76],{},"scripts\u002Fshot-programs\u002Fc103-trend.json","); source c103 plan 03 Part B.",{"title":79,"searchDepth":80,"depth":80,"links":81},"",2,[],null,"dashboard","archive\u002F2026-q4\u002F2026-10-01-c103-trend-variations","product",[87,88,89,90,91,92,93],"c103","c100","trend","teams","qdash","phase3","exploration","Playwright capture","screengrab","qCnLyZkd2kj02Z0WXiFwDIrxokLFrVbJbwcEGo6POs8",{"eras":98,"designers":121,"subjects":129,"projects":149},[99,106,113,116],{"id":100,"name":101,"description":102,"startDate":103,"endDate":104,"order":105},"ideation","Ideation","First dashboard and site mockups, pre-brand.","2022-01","2025-09",0,{"id":107,"name":108,"description":109,"startDate":110,"endDate":111,"order":112},"pre-seed","Pre-Seed","Establishing identity, voice, and visual language.","2025-10","2026-01",1,{"id":11,"name":114,"description":115,"startDate":111,"order":80},"Seed","Building the product and its interface.",{"id":117,"name":118,"description":119,"order":120},"post-seed","Post-Seed","Scaling the product and expanding reach.",3,[122,125],{"id":10,"name":123,"role":124},"Mark","Founder \u002F Design",{"id":126,"name":127,"role":128},"sarah","Sarah Parson","Illustration \u002F Design",[130,134,138,141,145],{"id":131,"label":132,"description":133},"front-site","Front Site","Public website and marketing pages.",{"id":135,"label":136,"description":137},"pitch-deck","Pitch Deck","Investor and partner presentations.",{"id":85,"label":139,"description":140},"Product","Application UI and dashboard.",{"id":142,"label":143,"description":144},"cli","Command Line Tools","Terminal interfaces and output.",{"id":146,"label":147,"description":148},"brand-system","Brand System","Style guide, brand documents, MCP server.",[150,154,157],{"id":151,"label":152,"description":153},"brochure-site","Brochure Site","Public marketing website — messaging, landing pages, campaigns.",{"id":83,"label":155,"description":156},"Dashboard","Product application UI — the tool customers use.",{"id":158,"label":159,"description":160},"brand","Brand","Brand system, style guides, design tokens, and tooling.",1794599288277]