favilla 0.0.0-stage → 1.2.17

package/dist/assets/design/app.json

@@ -0,0 +1,584 @@
+[
+ {
+  "id": "achromatic-ledger",
+  "name": "Achromatic ledger",
+  "theme": "light",
+  "idea": "The chrome holds no colour at all; money and counts are set in ink, the one chart hue marks the screen's main data element, and the only other hue is a small signal where a figure changed.",
+  "colourBudget": "under 1% coloured pixels; the chrome is ink, the one chart hue goes on the main data element, and the only other hue is a small change signal",
+  "signature": "No brand colour anywhere in the chrome: the one primary action is near-black (a grey pill, #e5e5e5, is the secondary), the main data element (today's series, the booked bars, the current period) takes the one chart hue, #1d5fbf, and everything else is drawn in ink with the comparison or the part after the cursor in grey, zero balances are set in grey, and the only hue on the screen is a small triangle or a short coloured number where a figure changed.",
+  "tokens": {
+   "ground": "#f8f8f8",
+   "surface": "#ffffff",
+   "raised": "#eeeeee",
+   "border": "#e6e6e6",
+   "rule": "#f0f0f0",
+   "control": "#d4d4d4",
+   "text": "#0a0a0a",
+   "muted": "#6b6b6b",
+   "accent": "#141414",
+   "positive": "#2e7d32",
+   "negative": "#c4242a",
+   "warning": "#92400e",
+   "chart": [
+    "#141414",
+    "#8a8a8a",
+    "#1d5fbf"
+   ],
+   "pills": {
+    "positive": [
+     "#dcfae5",
+     "#04250e"
+    ],
+    "negative": [
+     "#ffedea",
+     "#831c1e"
+    ],
+    "warning": [
+     "#fffbeb",
+     "#92400e"
+    ],
+    "neutral": [
+     "#eeeeee",
+     "#3d3d3d"
+    ]
+   },
+   "radius": {
+    "card": 8,
+    "control": 6
+   },
+   "font": {
+    "family": "Geist",
+    "second": "Geist Mono, for IDs and keys only",
+    "fallback": "Inter, system-ui, sans-serif",
+    "sizes": {
+     "title": 24,
+     "section": 16,
+     "kpi": 30,
+     "body": 14,
+     "small": 12
+    },
+    "weights": [
+     400,
+     500,
+     700
+    ],
+    "note": "700 is for money figures only; every other number is 400-500."
+   },
+   "density": "sparse",
+   "rowHeight": 44,
+   "sidebarWidth": 256,
+   "gap": 12,
+   "pad": 24,
+   "controlHeight": 36
+  },
+  "avoid": [
+   "a brand-coloured primary button",
+   "tinted cards or tinted KPI tiles",
+   "a coloured chart where one series in ink says it",
+   "bold on anything but money",
+   "a chart with no y-scale (the study's one example of this look hid magnitude behind hover and was flagged)",
+   "a grey pill as the only button for the screen's main job: in testing an Approve repeated in grey on every row left the screen without a primary"
+  ]
+ },
+ {
+  "id": "framed-sheet",
+  "name": "Framed sheet",
+  "theme": "light",
+  "idea": "The app chrome is one tinted L-shaped frame; the work sits on a white sheet with a hairline edge and soft corners, so depth comes from a single tone step and no shadow.",
+  "colourBudget": "under 3%; the brand shrinks to the logo and a 2px tab underline, the data carries the chroma",
+  "signature": "One tinted frame holds the sidebar and the 48px top bar with no rule between them; the page is a white sheet inset 8px from the window's right and bottom edges, with a 1px edge, 16px corners and no shadow. The active tab is a 2px underline in ink or the accent; everything else in the chrome is grey.",
+  "tokens": {
+   "ground": "#f9fbfc",
+   "surface": "#ffffff",
+   "raised": "#f4f6f8",
+   "active": "#ebedee",
+   "border": "#e8eaec",
+   "rule": "#f0f1f2",
+   "control": "#cdced1",
+   "text": "#131416",
+   "muted": "#5d5f60",
+   "accent": "#1b6c80",
+   "positive": "#1e7b4f",
+   "negative": "#c4242a",
+   "warning": "#92400e",
+   "chart": [
+    "#1b6c80",
+    "#2f70bb",
+    "#a86f0c"
+   ],
+   "pills": {
+    "positive": [
+     "#dcfae5",
+     "#04250e"
+    ],
+    "negative": [
+     "#ffedea",
+     "#831c1e"
+    ],
+    "warning": [
+     "#fffbeb",
+     "#92400e"
+    ],
+    "neutral": [
+     "#ebedee",
+     "#353736"
+    ]
+   },
+   "radius": {
+    "card": 8,
+    "control": 6,
+    "sheet": 16
+   },
+   "sheetInset": 8,
+   "font": {
+    "family": "IBM Plex Sans",
+    "second": "IBM Plex Mono, for IDs and keys only",
+    "fallback": "Inter, system-ui, sans-serif",
+    "sizes": {
+     "title": 22,
+     "section": 16,
+     "kpi": 28,
+     "body": 14,
+     "small": 12
+    },
+    "weights": [
+     400,
+     500,
+     600
+    ],
+    "note": "KPI values at 400; the semibold goes on the label and the active tab."
+   },
+   "density": "medium",
+   "rowHeight": 48,
+   "sidebarWidth": 228,
+   "gap": 24,
+   "pad": 24,
+   "controlHeight": 32
+  },
+  "avoid": [
+   "a border between the sidebar and the top bar",
+   "a shadow under the sheet",
+   "cards whose border is heavier than the sheet's (#cdcfcf on cards read as heavy in the study)",
+   "a fourth nesting level: frame, sheet and card are enough",
+   "different gutters for the KPI row and the chart row (20 against 24 was flagged)"
+  ]
+ },
+ {
+  "id": "accent-ladder",
+  "name": "Accent ladder",
+  "theme": "light",
+  "idea": "One brand hue at full strength only on small marks, and its pale tints doing all the area work: the active nav row, a plan card, badges and progress tracks.",
+  "colourBudget": "3-10%, nearly all of it as pale tints of the one hue",
+  "signature": "The full hue goes only on small marks: the one filled-button style, the data series and the active nav icon. Its 50-200 tints carry every area: the active nav row (tint fill with the dark ink of the hue), the plan or trial card, badges and progress tracks. The primary action may instead be near-black, as on the study's newsletter home.",
+  "tokens": {
+   "ground": "#f9fafb",
+   "surface": "#ffffff",
+   "raised": "#f3f4f6",
+   "border": "#e5e7eb",
+   "rule": "#f2f2f2",
+   "control": "#d1d5db",
+   "text": "#111827",
+   "muted": "#5f6672",
+   "accent": "#b8336a",
+   "accentSoft": "#fdf2f7",
+   "accentTrack": "#f8dbe8",
+   "accentInk": "#6b1d3e",
+   "positive": "#247b50",
+   "negative": "#c4242a",
+   "warning": "#92400e",
+   "chart": [
+    "#b8336a",
+    "#6b7280",
+    "#d4618f"
+   ],
+   "pills": {
+    "positive": [
+     "#dcfce7",
+     "#14532d"
+    ],
+    "negative": [
+     "#ffedea",
+     "#831c1e"
+    ],
+    "warning": [
+     "#fffbeb",
+     "#92400e"
+    ],
+    "neutral": [
+     "#f3f4f6",
+     "#374151"
+    ],
+    "accent": [
+     "#fdf2f7",
+     "#6b1d3e"
+    ]
+   },
+   "radius": {
+    "card": 8,
+    "control": 6
+   },
+   "font": {
+    "family": "DM Sans",
+    "second": null,
+    "fallback": "Inter, system-ui, sans-serif",
+    "sizes": {
+     "title": 32,
+     "section": 18,
+     "kpi": 24,
+     "body": 14,
+     "small": 12
+    },
+    "weights": [
+     400,
+     500,
+     600,
+     700
+    ],
+    "note": "700 for the page title only."
+   },
+   "density": "sparse",
+   "rowHeight": 45,
+   "sidebarWidth": 230,
+   "gap": 24,
+   "pad": 24,
+   "controlHeight": 32
+  },
+  "avoid": [
+   "the full hue on large areas",
+   "a second accent family (four families on one screen was flagged in the study)",
+   "a gradient on the trial chip or upgrade button",
+   "a left accent bar on the active nav row on top of the tint (seen once in 23 screens)",
+   "violet or indigo"
+  ]
+ },
+ {
+  "id": "editorial-greeting",
+  "name": "Editorial greeting",
+  "theme": "light",
+  "idea": "A personal or team home that opens with a typeset greeting in a centred column; every number below it is set at regular weight on tonal panels.",
+  "colourBudget": "under 2% for the accent; tonal panels carry the structure",
+  "signature": "The greeting is the h1, in a centred 1100px column on a real 12-column grid (77px columns, 16px gutters), with spans that change by row but share column lines (3/3/3/3, then 9/3, then 6/6, so every internal edge meets one above it). Every figure below is set at regular weight on tonal panels, one layer each: a panel one step off white holds its title and its content directly; a white inner card is used once, for the main chart.",
+  "tokens": {
+   "ground": "#ffffff",
+   "surface": "#f9f9f9",
+   "raised": "#ffffff",
+   "border": "#eaeaea",
+   "rule": "#f3f3f3",
+   "control": "#d9d9d6",
+   "text": "#1f201d",
+   "muted": "#636361",
+   "accent": "#1b6e66",
+   "positive": "#2e7d32",
+   "negative": "#b42318",
+   "warning": "#92400e",
+   "chart": [
+    "#1f201d",
+    "#1b6e66",
+    "#8c8c88"
+   ],
+   "pills": {
+    "positive": [
+     "#dcfae5",
+     "#04250e"
+    ],
+    "negative": [
+     "#fdecea",
+     "#7a1d14"
+    ],
+    "warning": [
+     "#fffbeb",
+     "#92400e"
+    ],
+    "neutral": [
+     "#f3f3f3",
+     "#3d3d3a"
+    ]
+   },
+   "radius": {
+    "card": 22,
+    "control": 999
+   },
+   "font": {
+    "family": "Instrument Sans",
+    "second": "Instrument Serif, for the greeting only",
+    "fallback": "Inter, system-ui, sans-serif",
+    "sizes": {
+     "title": 48,
+     "section": 14,
+     "kpi": 32,
+     "body": 14,
+     "small": 12
+    },
+    "weights": [
+     400,
+     500,
+     600
+    ],
+    "note": "The 48px title is the serif greeting; set in the sans it is 24/400. Every figure is 400."
+   },
+   "density": "sparse",
+   "rowHeight": 63,
+   "sidebarWidth": 224,
+   "gap": 16,
+   "pad": 20,
+   "controlHeight": 38
+  },
+  "avoid": [
+   "an emoji in the greeting",
+   "a tracked uppercase date above the greeting (put the date after it or in the grey line below)",
+   "a 624-864px column on a desktop screen (both were flagged as wasted width)",
+   "a tray around every card (a grey panel with a white card 6px inside it, on every block, read as a bento template in testing)",
+   "red as the accent: in testing red marked a record week of upgrades and read as an alarm; red is for the failing fact only"
+  ]
+ },
+ {
+  "id": "pastel-consumer",
+  "name": "Pastel consumer",
+  "theme": "light",
+  "idea": "Categories are coded by pale tints whose ink is the dark of the same hue, all under one large radius, and each headline sum sits inside the card that explains it.",
+  "colourBudget": "5-8%, as pale tiles and data marks",
+  "signature": "Pale category tiles with the dark of their own hue as ink (#dcf1ff with #0a3a80), one large radius (20px on cards, stepping down to 10, 8 and 5 inside), and quiet money polarity: income green with a plus sign, spending in ink, no red on ordinary outgoings. Tints go on small tiles, avatars and chips; a panel that holds a list stays white. When the product has people (two partners, a family), each gets one hue, at least 60 degrees from the next.",
+  "tokens": {
+   "ground": "#f3f5f7",
+   "surface": "#ffffff",
+   "raised": "#f2f8fd",
+   "border": "#e6e6e6",
+   "rule": "#f4f4f4",
+   "control": "#d6d9dd",
+   "text": "#1b1d1f",
+   "muted": "#5c6064",
+   "accent": "#1d5fd6",
+   "accentSoft": "#dcf1ff",
+   "accentInk": "#0a3a80",
+   "positive": "#2f7a45",
+   "negative": "#c41c29",
+   "warning": "#92400e",
+   "chart": [
+    "#1d5fd6",
+    "#b45309",
+    "#2a8798"
+   ],
+   "pills": {
+    "positive": [
+     "#dcfae5",
+     "#04250e"
+    ],
+    "negative": [
+     "#ffedea",
+     "#831c1e"
+    ],
+    "warning": [
+     "#fffbeb",
+     "#92400e"
+    ],
+    "neutral": [
+     "#eef1f4",
+     "#3a3d40"
+    ],
+    "accent": [
+     "#dcf1ff",
+     "#0a3a80"
+    ]
+   },
+   "radius": {
+    "card": 20,
+    "control": 10
+   },
+   "font": {
+    "family": "Manrope",
+    "second": null,
+    "fallback": "Inter, system-ui, sans-serif",
+    "sizes": {
+     "title": 28,
+     "section": 20,
+     "kpi": 32,
+     "body": 16,
+     "small": 14
+    },
+    "weights": [
+     400,
+     500,
+     600
+    ],
+    "note": "Money at 24-32px; card titles regular; semibold for net worth, bill amounts and actions."
+   },
+   "density": "medium",
+   "rowHeight": 72,
+   "sidebarWidth": 240,
+   "gap": 24,
+   "pad": 24,
+   "controlHeight": 40
+  },
+  "avoid": [
+   "a gradient balance card",
+   "two data palettes on one page (flagged in the study)",
+   "red on every outgoing amount",
+   "a 624px phone-width column on a desktop screen (flagged as a stretched phone screen)",
+   "a KPI strip on top: the sums belong in their cards",
+   "whole panels tinted per person or category beside white cards (two surface languages on one screen)"
+  ]
+ },
+ {
+  "id": "true-black-flat",
+  "name": "True-black flat",
+  "theme": "dark",
+  "idea": "Night mode on true black: sidebar, top bar and page share one ground, elevation is a lightness step alone, and colour is confined to data marks.",
+  "colourBudget": "at or under 3%; the accent never touches buttons, tabs or nav",
+  "signature": "Elevation by lightness alone (#000 ground, #111 card, #2a2a2a nested panel) with no borders or shadows on cards; the active nav item is marked only by its label going from #bbb to #fff; the primary control is made primary by inversion, a white 36px pill with black text.",
+  "tokens": {
+   "ground": "#000000",
+   "surface": "#111111",
+   "raised": "#2a2a2a",
+   "border": "#1a1a1a",
+   "rule": "#161616",
+   "control": "#444444",
+   "text": "#ffffff",
+   "muted": "#b4b4b4",
+   "faint": "#949494",
+   "accent": "#c6f24e",
+   "positive": "#c6f24e",
+   "negative": "#e5484d",
+   "warning": "#e5a93b",
+   "chart": [
+    "#c6f24e",
+    "#e6e6e6",
+    "#6b6b6b"
+   ],
+   "pills": {
+    "positive": [
+     "#222a10",
+     "#c6f24e"
+    ],
+    "negative": [
+     "#2c1a20",
+     "#e5566f"
+    ],
+    "warning": [
+     "#2b2414",
+     "#e5a93b"
+    ],
+    "neutral": [
+     "#222222",
+     "#ffffff"
+    ]
+   },
+   "radius": {
+    "card": 20,
+    "control": 999
+   },
+   "font": {
+    "family": "Inter",
+    "second": null,
+    "fallback": "system-ui, sans-serif",
+    "sizes": {
+     "title": 20,
+     "section": 16,
+     "kpi": 24,
+     "body": 14,
+     "small": 12
+    },
+    "weights": [
+     400,
+     500,
+     600
+    ],
+    "note": "Nothing above 600; inactive nav labels #bbb, active #fff."
+   },
+   "density": "medium",
+   "rowHeight": 80,
+   "sidebarWidth": 210,
+   "gap": 14,
+   "pad": 22,
+   "controlHeight": 36
+  },
+  "avoid": [
+   "a navy or slate dark theme",
+   "glow, neon borders or shadows",
+   "a hue per chart (five hues across four charts was flagged)",
+   "the accent on buttons, tabs or nav",
+   "a 64px top bar left empty across most of its width (flagged twice)"
+  ]
+ },
+ {
+  "id": "data-terminal",
+  "name": "Data terminal",
+  "theme": "dark",
+  "idea": "A research or monitoring screen read in long sessions: cards darker than the ground, tabular digits that stack, signs instead of colour, and every selection marked by the same 1px accent line.",
+  "colourBudget": "under 3%; the accent is never more than a 1px line",
+  "signature": "Every selection (tab, toggle, range, nav item) is a 1px accent line exactly as wide as its label, placed on the nearest existing edge; numbers stay white or grey and carry their sign in the text ('+$24,000,000').",
+  "tokens": {
+   "ground": "#171719",
+   "surface": "#131217",
+   "raised": "#212023",
+   "border": "#222224",
+   "rule": "#1b1a1f",
+   "control": "#3a3a3e",
+   "text": "#ffffff",
+   "muted": "#8a8c92",
+   "accent": "#4a8ad6",
+   "positive": "#44a282",
+   "negative": "#e5566f",
+   "warning": "#d9a441",
+   "chart": [
+    "#f2f2f3",
+    "#e5566f",
+    "#4a8ad6"
+   ],
+   "pills": {
+    "positive": [
+     "#1b2828",
+     "#5fc39c"
+    ],
+    "negative": [
+     "#2c1a20",
+     "#e5566f"
+    ],
+    "warning": [
+     "#2a2416",
+     "#d9a441"
+    ],
+    "neutral": [
+     "#212023",
+     "#bdbdc0"
+    ]
+   },
+   "shadow": "0 12px 28px rgba(0,0,0,.2)",
+   "radius": {
+    "card": 6,
+    "control": 999
+   },
+   "font": {
+    "family": "Public Sans",
+    "second": null,
+    "fallback": "Inter, system-ui, sans-serif",
+    "sizes": {
+     "title": 26,
+     "section": 20,
+     "kpi": 20,
+     "body": 13,
+     "small": 12
+    },
+    "weights": [
+     400,
+     500,
+     600,
+     700
+    ],
+    "note": "Section titles 20/400 in the muted grey; card titles 16/600; tabular figures everywhere."
+   },
+   "density": "dense",
+   "rowHeight": 42,
+   "sidebarWidth": 50,
+   "gap": 24,
+   "pad": 32,
+   "controlHeight": 34
+  },
+  "avoid": [
+   "filled pill tabs or a coloured segmented control",
+   "a chart with no scale and no dates (the studied screen had none and was flagged)",
+   "tertiary text under 4.5:1 (#4c4c4f read at about 2:1 in the study)",
+   "lighter cards with borders and a glow",
+   "green and red on every number; the one column whose job is \"what moved today\" and a negative headline figure may carry the polarity colours"
+  ]
+ }
+]