{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "bash", "homepage": "https://bash-ui-registry.vercel.app", "items": [ { "name": "theme-180connect", "type": "registry:theme", "title": "The Meridian (180Connect)", "description": "A contemporary take on professional services, retaining clarity and credibility while making room for character, expression, and a little more ambition.", "cssVars": { "theme": { "color-ground": "var(--ground)", "color-background": "var(--background)", "color-card": "var(--card)", "color-popover": "var(--popover)", "color-paper": "var(--paper)", "color-paper-sunk": "var(--paper-sunk)", "color-muted": "var(--muted)", "color-secondary": "var(--secondary)", "color-switch-track-off": "var(--switch-track-off)", "color-switch-track-on": "var(--switch-track-on)", "color-switch-thumb-off": "var(--switch-thumb-off)", "color-switch-thumb-on": "var(--switch-thumb-on)", "color-rule": "var(--rule)", "color-rule-soft": "var(--rule-soft)", "color-border": "var(--border)", "color-input": "var(--input)", "color-ring": "var(--ring)", "color-ink": "var(--ink)", "color-foreground": "var(--foreground)", "color-dim": "var(--dim)", "color-faint": "var(--faint)", "color-muted-foreground": "var(--muted-foreground)", "color-card-foreground": "var(--card-foreground)", "color-popover-foreground": "var(--popover-foreground)", "color-secondary-foreground": "var(--secondary-foreground)", "color-on-solid": "var(--on-solid)", "color-lead": "var(--lead)", "color-lead-mid": "var(--lead-mid)", "color-lead-wash": "var(--lead-wash)", "color-primary": "var(--primary)", "color-primary-foreground": "var(--primary-foreground)", "color-accent": "var(--accent)", "color-accent-foreground": "var(--accent-foreground)", "color-go": "var(--go)", "color-go-wash": "var(--go-wash)", "color-hold": "var(--hold)", "color-hold-wash": "var(--hold-wash)", "color-stop": "var(--stop)", "color-stop-wash": "var(--stop-wash)", "color-destructive": "var(--destructive)", "color-ramp-orange": "var(--ramp-orange)", "color-milestone-yellow": "var(--milestone-yellow)", "color-go-pale": "var(--go-pale)", "color-slider-handle": "var(--slider-handle)", "color-activity-0": "var(--activity-0)", "color-activity-1": "var(--activity-1)", "color-activity-2": "var(--activity-2)", "color-activity-3": "var(--activity-3)", "color-activity-4": "var(--activity-4)", "color-brand": "var(--brand)", "color-brand-hover": "var(--brand-hover)", "color-lime": "var(--lime)", "color-lime-hover": "var(--lime-hover)", "color-on-lime": "var(--on-lime)", "color-tonal": "var(--tonal)", "color-on-tonal": "var(--on-tonal)", "color-media-fill": "var(--media-fill)", "color-on-media": "var(--on-media)", "color-media-rest-fill": "var(--media-rest-fill)", "color-media-rest-ink": "var(--media-rest-ink)", "color-scramble-strike": "var(--scramble-strike)", "color-ff-plate": "var(--ff-plate)", "color-ff-plate-edge": "var(--ff-plate-edge)", "color-ff-ink": "var(--ff-ink)", "color-ff-dim": "var(--ff-dim)", "color-ff-faint": "var(--ff-faint)", "color-ff-rule": "var(--ff-rule)", "color-ff-residual": "var(--ff-residual)", "color-ff-in-0": "var(--ff-in-0)", "color-ff-in-1": "var(--ff-in-1)", "color-ff-in-2": "var(--ff-in-2)", "color-ff-in-3": "var(--ff-in-3)", "color-ff-in-4": "var(--ff-in-4)", "color-ff-in-5": "var(--ff-in-5)", "color-ff-out-0": "var(--ff-out-0)", "color-ff-out-1": "var(--ff-out-1)", "color-ff-out-2": "var(--ff-out-2)", "color-ff-out-3": "var(--ff-out-3)", "color-ff-out-4": "var(--ff-out-4)", "color-ff-out-5": "var(--ff-out-5)", "color-collection-landlord": "var(--collection-landlord)", "color-collection-platform": "var(--collection-platform)", "color-collection-processing": "var(--collection-processing)", "color-menu-surface": "var(--menu-surface)", "color-menu-ink": "var(--menu-ink)", "color-menu-dim": "var(--menu-dim)", "color-menu-rule": "var(--menu-rule)", "color-menu-sheen": "var(--menu-sheen)", "color-menu-symbol": "var(--menu-symbol)", "color-menu-shadow": "var(--menu-shadow)", "color-menu-sheen-mid": "var(--menu-sheen-mid)", "color-menu-footer-rule": "var(--menu-footer-rule)", "radius-panel": "var(--panel-radius)", "radius-inset": "var(--inset-radius)", "font-body": "var(--body-font)", "font-heading": "var(--heading-font)", "font-mono": "var(--code-font)", "font-interface": "var(--interface-font)" }, "light": { "ground": "#ebedf0", "background": "#ffffff", "card": "#ffffff", "popover": "#ffffff", "paper": "#ebedf0", "paper-sunk": "#e2e5ea", "muted": "#f1f1ef", "secondary": "#ebedf0", "switch-track-off": "var(--faint)", "switch-track-on": "var(--lead)", "switch-thumb-off": "var(--slider-handle)", "switch-thumb-on": "var(--on-solid)", "rule": "#d4d8df", "rule-soft": "#e4e7ec", "border": "#e6e6e7", "input": "#e6e6e7", "ring": "#72b744", "ink": "#141a22", "foreground": "#414042", "dim": "#667080", "faint": "#8b94a1", "muted-foreground": "#8a898b", "card-foreground": "#414042", "popover-foreground": "#414042", "secondary-foreground": "#141a22", "on-solid": "#ffffff", "lead": "#23407a", "lead-mid": "#35589b", "lead-wash": "#e3e9f5", "primary": "#72b744", "primary-foreground": "#ffffff", "accent": "#eef6e9", "accent-foreground": "#2e3c2f", "go": "#3d7a2e", "go-wash": "#e6f0e2", "hold": "#8a5a00", "hold-wash": "#f6eedd", "stop": "#a32020", "stop-wash": "#f7e5e5", "destructive": "#b91c1c", "ramp-orange": "#e07a1f", "milestone-yellow": "#e2b714", "go-pale": "#a6d196", "slider-handle": "#ffffff", "activity-0": "#e2e5ea", "activity-1": "#cfdecb", "activity-2": "#9ebd97", "activity-3": "#6e9b62", "activity-4": "#3d7a2e", "brand": "#72b744", "brand-hover": "#2e3c2f", "lime": "#e6f5c0", "lime-hover": "#d4e5a0", "on-lime": "#1a1a1a", "tonal": "#ebedf0", "on-tonal": "#141a22", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#8b94a1", "ff-plate": "#ffffff", "ff-plate-edge": "#e3ded1", "ff-ink": "#2a2722", "ff-dim": "#6c665c", "ff-faint": "#9c9488", "ff-rule": "#dad3c4", "ff-residual": "#8695a3", "ff-in-0": "#204a3e", "ff-in-1": "#356b58", "ff-in-2": "#557f70", "ff-in-3": "#83a597", "ff-in-4": "#adc5b9", "ff-in-5": "#cfded6", "ff-out-0": "#8c3a2b", "ff-out-1": "#b05840", "ff-out-2": "#c67c5c", "ff-out-3": "#d8a07d", "ff-out-4": "#e6be9e", "ff-out-5": "#f0d7be", "collection-landlord": "var(--go)", "collection-platform": "var(--hold)", "collection-processing": "var(--stop)", "menu-surface": "rgb(23 23 23 / 0.65)", "menu-ink": "#ffffff", "menu-dim": "#a3a3a3", "menu-rule": "rgb(255 255 255 / 0.15)", "menu-sheen": "rgb(255 255 255 / 0.15)", "menu-symbol": "#e5e5e5", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(255 255 255 / 0.04)", "menu-footer-rule": "rgb(255 255 255 / 0.1)", "radius": "10px", "panel-radius": "10px", "inset-radius": "6px", "body-font": "var(--font-lato), Arial, Helvetica, sans-serif", "heading-font": "var(--font-geist-sans), Arial, Helvetica, sans-serif", "heading-weight": "600", "code-font": "var(--font-geist-mono), ui-monospace, monospace", "interface-font": "var(--font-lato), Arial, Helvetica, sans-serif" }, "dark": { "ground": "#0f1216", "background": "#171b21", "card": "#171b21", "popover": "#1e232a", "paper": "#1e232a", "paper-sunk": "#252b33", "muted": "#1e232a", "secondary": "#1e232a", "switch-track-off": "var(--faint)", "switch-track-on": "var(--lead)", "switch-thumb-off": "var(--slider-handle)", "switch-thumb-on": "var(--on-solid)", "rule": "#313843", "rule-soft": "#262c35", "border": "#313843", "input": "#313843", "ring": "#72b744", "ink": "#e8ecf1", "foreground": "#d5d9df", "dim": "#9aa4b2", "faint": "#737d8b", "muted-foreground": "#8b94a1", "card-foreground": "#d5d9df", "popover-foreground": "#d5d9df", "secondary-foreground": "#e8ecf1", "on-solid": "#0f1216", "lead": "#8fb0ee", "lead-mid": "#a9c2f2", "lead-wash": "#1c2940", "primary": "#72b744", "primary-foreground": "#0f1216", "accent": "#1b2a1c", "accent-foreground": "#b9dca2", "go": "#7cc36a", "go-wash": "#16261a", "hold": "#e0b25a", "hold-wash": "#2a2214", "stop": "#f08a8a", "stop-wash": "#2e1818", "destructive": "#f07878", "ramp-orange": "#f0913a", "milestone-yellow": "#f2cd3f", "go-pale": "#bfe0af", "slider-handle": "#ffffff", "activity-0": "#252b33", "activity-1": "#304533", "activity-2": "#4a6f46", "activity-3": "#639958", "activity-4": "#7cc36a", "brand": "#72b744", "brand-hover": "#8fcf63", "lime": "#e6f5c0", "lime-hover": "#d4e5a0", "on-lime": "#1a1a1a", "tonal": "#1e232a", "on-tonal": "#e8ecf1", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#737d8b", "ff-plate": "transparent", "ff-plate-edge": "#2e291c", "ff-ink": "#dddad5", "ff-dim": "#a39d93", "ff-faint": "#776f63", "ff-rule": "#3b3425", "ff-residual": "#5c6b79", "ff-in-0": "#b5dfd3", "ff-in-1": "#94cab7", "ff-in-2": "#80aa9b", "ff-in-3": "#5a7c6e", "ff-in-4": "#3a5246", "ff-in-5": "#213028", "ff-out-0": "#d48273", "ff-out-1": "#bf674f", "ff-out-2": "#a35939", "ff-out-3": "#824a27", "ff-out-4": "#613919", "ff-out-5": "#41280f", "collection-landlord": "var(--go)", "collection-platform": "var(--hold)", "collection-processing": "var(--stop)", "menu-surface": "rgb(23 23 23 / 0.65)", "menu-ink": "#ffffff", "menu-dim": "#a3a3a3", "menu-rule": "rgb(255 255 255 / 0.15)", "menu-sheen": "rgb(255 255 255 / 0.15)", "menu-symbol": "#e5e5e5", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(255 255 255 / 0.04)", "menu-footer-rule": "rgb(255 255 255 / 0.1)" } }, "docs": "Load the fonts with next/font: Lato({ weight: [\"300\", \"400\", \"700\"], variable: \"--font-lato\" }); Geist({ variable: \"--font-geist-sans\" }); Geist_Mono({ variable: \"--font-geist-mono\" }). Rules: https://bash-ui-registry.vercel.app/systems/180connect", "meta": { "project": "180Connect", "rules": [ { "title": "The card is a border, not a shadow", "body": "border border-rule bg-card rounded-panel. Shadows are only for things that float: popovers, dialogs, menus." }, { "title": "10px reads as a document", "body": "rounded-panel (10px) for cards, rounded-inset (6px) for controls and chips inside them. Never rounded-2xl." }, { "title": "Insets are paper, not another white card", "body": "Recessed content sits on bg-paper with rounded-inset. A border inside a border is noise." }, { "title": "Three inks, by meaning", "body": "ink is content, dim is context about content, faint is furniture. Never set text with opacity." }, { "title": "The accent says where you are; states say what is true", "body": "lead appears in four places only: active tab, links, focus ring, register keys. Buttons are ink. go / hold / stop each carry a dot as well as a colour." }, { "title": "Uppercase is for codes only", "body": "Mono, 10.5px, tracked, faint — for things that really are codes (UK CHARITY, PRIORITY). Never a heading style." }, { "title": "Content arrives in reading order", "body": "Blur-up entrances, staggered by section, never all at once. Reduced motion is honoured everywhere." } ] } }, { "name": "theme-ledge", "type": "registry:theme", "title": "Frontier (Ledge)", "description": "An overdue departure from the expected, where expressive design and thoughtful restraint come together to make innovation feel natural, credible, and assured.", "cssVars": { "theme": { "color-ground": "var(--ground)", "color-background": "var(--background)", "color-card": "var(--card)", "color-popover": "var(--popover)", "color-paper": "var(--paper)", "color-paper-sunk": "var(--paper-sunk)", "color-muted": "var(--muted)", "color-secondary": "var(--secondary)", "color-switch-track-off": "var(--switch-track-off)", "color-switch-track-on": "var(--switch-track-on)", "color-switch-thumb-off": "var(--switch-thumb-off)", "color-switch-thumb-on": "var(--switch-thumb-on)", "color-rule": "var(--rule)", "color-rule-soft": "var(--rule-soft)", "color-border": "var(--border)", "color-input": "var(--input)", "color-ring": "var(--ring)", "color-ink": "var(--ink)", "color-foreground": "var(--foreground)", "color-dim": "var(--dim)", "color-faint": "var(--faint)", "color-muted-foreground": "var(--muted-foreground)", "color-card-foreground": "var(--card-foreground)", "color-popover-foreground": "var(--popover-foreground)", "color-secondary-foreground": "var(--secondary-foreground)", "color-on-solid": "var(--on-solid)", "color-lead": "var(--lead)", "color-lead-mid": "var(--lead-mid)", "color-lead-wash": "var(--lead-wash)", "color-primary": "var(--primary)", "color-primary-foreground": "var(--primary-foreground)", "color-accent": "var(--accent)", "color-accent-foreground": "var(--accent-foreground)", "color-go": "var(--go)", "color-go-wash": "var(--go-wash)", "color-hold": "var(--hold)", "color-hold-wash": "var(--hold-wash)", "color-stop": "var(--stop)", "color-stop-wash": "var(--stop-wash)", "color-destructive": "var(--destructive)", "color-ramp-orange": "var(--ramp-orange)", "color-milestone-yellow": "var(--milestone-yellow)", "color-go-pale": "var(--go-pale)", "color-slider-handle": "var(--slider-handle)", "color-activity-0": "var(--activity-0)", "color-activity-1": "var(--activity-1)", "color-activity-2": "var(--activity-2)", "color-activity-3": "var(--activity-3)", "color-activity-4": "var(--activity-4)", "color-brand": "var(--brand)", "color-brand-hover": "var(--brand-hover)", "color-lime": "var(--lime)", "color-lime-hover": "var(--lime-hover)", "color-on-lime": "var(--on-lime)", "color-tonal": "var(--tonal)", "color-on-tonal": "var(--on-tonal)", "color-media-fill": "var(--media-fill)", "color-on-media": "var(--on-media)", "color-media-rest-fill": "var(--media-rest-fill)", "color-media-rest-ink": "var(--media-rest-ink)", "color-scramble-strike": "var(--scramble-strike)", "color-ff-plate": "var(--ff-plate)", "color-ff-plate-edge": "var(--ff-plate-edge)", "color-ff-ink": "var(--ff-ink)", "color-ff-dim": "var(--ff-dim)", "color-ff-faint": "var(--ff-faint)", "color-ff-rule": "var(--ff-rule)", "color-ff-residual": "var(--ff-residual)", "color-ff-in-0": "var(--ff-in-0)", "color-ff-in-1": "var(--ff-in-1)", "color-ff-in-2": "var(--ff-in-2)", "color-ff-in-3": "var(--ff-in-3)", "color-ff-in-4": "var(--ff-in-4)", "color-ff-in-5": "var(--ff-in-5)", "color-ff-out-0": "var(--ff-out-0)", "color-ff-out-1": "var(--ff-out-1)", "color-ff-out-2": "var(--ff-out-2)", "color-ff-out-3": "var(--ff-out-3)", "color-ff-out-4": "var(--ff-out-4)", "color-ff-out-5": "var(--ff-out-5)", "color-collection-landlord": "var(--collection-landlord)", "color-collection-platform": "var(--collection-platform)", "color-collection-processing": "var(--collection-processing)", "color-menu-surface": "var(--menu-surface)", "color-menu-ink": "var(--menu-ink)", "color-menu-dim": "var(--menu-dim)", "color-menu-rule": "var(--menu-rule)", "color-menu-sheen": "var(--menu-sheen)", "color-menu-symbol": "var(--menu-symbol)", "color-menu-shadow": "var(--menu-shadow)", "color-menu-sheen-mid": "var(--menu-sheen-mid)", "color-menu-footer-rule": "var(--menu-footer-rule)", "radius-panel": "var(--panel-radius)", "radius-inset": "var(--inset-radius)", "font-body": "var(--body-font)", "font-heading": "var(--heading-font)", "font-mono": "var(--code-font)", "font-interface": "var(--interface-font)" }, "light": { "ground": "#fdfefd", "background": "#fdfefd", "card": "#ffffff", "popover": "#ffffff", "paper": "#eef3f8", "paper-sunk": "#e3eaf0", "muted": "#f4f8fc", "secondary": "#eef3f8", "switch-track-off": "var(--faint)", "switch-track-on": "var(--lead)", "switch-thumb-off": "var(--slider-handle)", "switch-thumb-on": "var(--on-solid)", "rule": "#e8e9eb", "rule-soft": "#edeeef", "border": "#e8e9eb", "input": "#e8e9eb", "ring": "#1e392b", "ink": "#1b2733", "foreground": "#1b2733", "dim": "#5b6976", "faint": "#98a1a7", "muted-foreground": "#5b6976", "card-foreground": "#1b2733", "popover-foreground": "#1b2733", "secondary-foreground": "#1b2733", "on-solid": "#fdfefd", "lead": "#1e392b", "lead-mid": "#14271d", "lead-wash": "#e4e7e6", "primary": "#1e392b", "primary-foreground": "#ffffff", "accent": "#eef3f8", "accent-foreground": "#1e392b", "go": "#154d39", "go-wash": "#e0eae6", "hold": "#8a5a1e", "hold-wash": "#f5ece1", "stop": "#9a2c2c", "stop-wash": "#f6e5e5", "destructive": "#9a2c2c", "ramp-orange": "#a23b26", "milestone-yellow": "#b4762b", "go-pale": "#a9c8b9", "slider-handle": "#ffffff", "activity-0": "#e3eaf0", "activity-1": "#c5d3ce", "activity-2": "#8aa69c", "activity-3": "#507a6b", "activity-4": "#154d39", "brand": "#1e392b", "brand-hover": "#14271d", "lime": "#e0eae6", "lime-hover": "#ccded5", "on-lime": "#14271d", "tonal": "#eef3f8", "on-tonal": "#1b2733", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#98a1a7", "ff-plate": "#ffffff", "ff-plate-edge": "#e8e9eb", "ff-ink": "#1b2733", "ff-dim": "#5b6976", "ff-faint": "#98a1a7", "ff-rule": "#e8e9eb", "ff-residual": "#98a1a7", "ff-in-0": "#127a52", "ff-in-1": "#418f74", "ff-in-2": "#71af97", "ff-in-3": "#a0cab9", "ff-in-4": "#c4dfd3", "ff-in-5": "#e0eae6", "ff-out-0": "#a23b26", "ff-out-1": "#b56251", "ff-out-2": "#c78a7d", "ff-out-3": "#dab1a8", "ff-out-4": "#e9d0cb", "ff-out-5": "#f5e7e4", "collection-landlord": "#127a52", "collection-platform": "#b4762b", "collection-processing": "#a23b26", "menu-surface": "rgb(23 23 23 / 0.65)", "menu-ink": "#ffffff", "menu-dim": "#a3a3a3", "menu-rule": "rgb(255 255 255 / 0.15)", "menu-sheen": "rgb(255 255 255 / 0.15)", "menu-symbol": "#e5e5e5", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(255 255 255 / 0.04)", "menu-footer-rule": "rgb(255 255 255 / 0.1)", "radius": "16px", "panel-radius": "16px", "inset-radius": "10px", "body-font": "var(--font-lora), Georgia, serif", "heading-font": "var(--font-instrument-serif), Georgia, serif", "heading-weight": "400", "code-font": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", "interface-font": "var(--font-lora), Georgia, serif" }, "dark": { "ground": "#10171c", "background": "#10171c", "card": "#172128", "popover": "#202d35", "paper": "#202d35", "paper-sunk": "#293942", "muted": "#202d35", "secondary": "#202d35", "switch-track-off": "var(--faint)", "switch-track-on": "var(--lead)", "switch-thumb-off": "var(--slider-handle)", "switch-thumb-on": "var(--on-solid)", "rule": "#35454e", "rule-soft": "#293942", "border": "#35454e", "input": "#35454e", "ring": "#a9c8b9", "ink": "#edf3f5", "foreground": "#dce5e9", "dim": "#afbec7", "faint": "#8799a4", "muted-foreground": "#afbec7", "card-foreground": "#dce5e9", "popover-foreground": "#dce5e9", "secondary-foreground": "#edf3f5", "on-solid": "#10171c", "lead": "#a9c8b9", "lead-mid": "#ccded5", "lead-wash": "#203c30", "primary": "#a9c8b9", "primary-foreground": "#10171c", "accent": "#203c30", "accent-foreground": "#ccded5", "go": "#91c7ac", "go-wash": "#1b3529", "hold": "#e0b77e", "hold-wash": "#382b1c", "stop": "#e6a39b", "stop-wash": "#3c2425", "destructive": "#e6a39b", "ramp-orange": "#cf8c77", "milestone-yellow": "#e0b77e", "go-pale": "#ccded5", "slider-handle": "#ffffff", "activity-0": "#293942", "activity-1": "#364b49", "activity-2": "#54746a", "activity-3": "#739e8b", "activity-4": "#91c7ac", "brand": "#a9c8b9", "brand-hover": "#ccded5", "lime": "#e0eae6", "lime-hover": "#ccded5", "on-lime": "#14271d", "tonal": "#202d35", "on-tonal": "#edf3f5", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#8799a4", "ff-plate": "#172128", "ff-plate-edge": "#35454e", "ff-ink": "#edf3f5", "ff-dim": "#afbec7", "ff-faint": "#8799a4", "ff-rule": "#35454e", "ff-residual": "#8799a4", "ff-in-0": "#a9d8c2", "ff-in-1": "#91c7ac", "ff-in-2": "#6d9f87", "ff-in-3": "#4c765f", "ff-in-4": "#33503e", "ff-in-5": "#1b3529", "ff-out-0": "#e6b8ab", "ff-out-1": "#cf9988", "ff-out-2": "#ac7564", "ff-out-3": "#855443", "ff-out-4": "#603a2f", "ff-out-5": "#3c2425", "collection-landlord": "#65cda5", "collection-platform": "#e2b066", "collection-processing": "#e58973", "menu-surface": "rgb(23 23 23 / 0.65)", "menu-ink": "#ffffff", "menu-dim": "#a3a3a3", "menu-rule": "rgb(255 255 255 / 0.15)", "menu-sheen": "rgb(255 255 255 / 0.15)", "menu-symbol": "#e5e5e5", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(255 255 255 / 0.04)", "menu-footer-rule": "rgb(255 255 255 / 0.1)" } }, "docs": "Load the fonts with next/font: Lora({ variable: \"--font-lora\", subsets: [\"latin\"] }); Instrument_Serif({ weight: \"400\", variable: \"--font-instrument-serif\", subsets: [\"latin\"] }). Rules: https://bash-ui-registry.vercel.app/systems/ledge", "meta": { "project": "Ledge", "rules": [ { "title": "Two serifs, two jobs", "body": "Instrument Serif (400) gives headings and key financial figures their editorial character. Lora carries body text, labels and controls. Use tabular numerals for aligned amounts; monospace is a registry fallback for code, not the app's financial typeface." }, { "title": "Use the current cool app surface", "body": "Near-white ground, white cards, cool blue-grey insets and slate ink. The landlord, tenant and admin apps all use ledge-cool. Its 16px panels and 10px inputs supersede the older 4px base styles." }, { "title": "Hairlines first, shadows lightly", "body": "Cards use border-rule with rounded-panel and generous padding. A very faint shadow can lift an interactive card; stronger shadows belong to floating dialogs and menus. Use paper for recessed content." }, { "title": "Green actions are pills", "body": "Primary actions use bg-primary text-primary-foreground and rounded-full; hover deepens the green. Secondary actions are outlined pills. Reserve rounded-inset for inputs and inner surfaces. Links, selected dates and the brand's terminal dot use lead." }, { "title": "Labels whisper; headings read naturally", "body": "Small section eyebrows and field labels may be uppercase with 0.08–0.25em tracking. Headings stay in sentence case with tight leading. Use dim for explanatory copy and faint for quiet labels and furniture." }, { "title": "Financial colour has a meaning", "body": "Green marks collected or paid, gold marks pending or outstanding, and red marks overdue or failed. Pair each colour with a label. Charts distinguish landlord funds in emerald, Ledge revenue in gold and processing fees in clay; avoid decorative rainbow series." }, { "title": "Leave room to read", "body": "Use a centred reading column (48rem tenant, 56rem landlord, 64rem admin), roughly 24px side gutters and 48px main vertical padding. Separate sections generously; group related ledger rows with fine dividers. Subtle ruled lines and dotted leaders are optional ledger details." }, { "title": "Motion follows the ledger", "body": "Sections rise and fade in reading order; chart bars grow from their baseline and arcs draw on. Keep hover changes near 200ms and entrances around 700–900ms. Honour reduced motion with useReducedMotionConfig() when implementing registry components." }, { "title": "Dark mode is a bash-ui adaptation", "body": "Ledge's app supplies the light palette only. This entry derives dark slate surfaces, pale ink, lifted green actions and brighter state colours for the gallery's dark mode. Additional contract colours and ranked chart ramps are palette extensions rather than original Ledge tokens." } ] } }, { "name": "theme-portfolio", "type": "registry:theme", "title": "Understated (Portfolio)", "description": "Minimal by intention, expressive by nature. Considered typography, generous white space, and subtle artistic details create a distinctive visual identity that lets the work speak for itself.", "cssVars": { "theme": { "color-ground": "var(--ground)", "color-background": "var(--background)", "color-card": "var(--card)", "color-popover": "var(--popover)", "color-paper": "var(--paper)", "color-paper-sunk": "var(--paper-sunk)", "color-muted": "var(--muted)", "color-secondary": "var(--secondary)", "color-switch-track-off": "var(--switch-track-off)", "color-switch-track-on": "var(--switch-track-on)", "color-switch-thumb-off": "var(--switch-thumb-off)", "color-switch-thumb-on": "var(--switch-thumb-on)", "color-rule": "var(--rule)", "color-rule-soft": "var(--rule-soft)", "color-border": "var(--border)", "color-input": "var(--input)", "color-ring": "var(--ring)", "color-ink": "var(--ink)", "color-foreground": "var(--foreground)", "color-dim": "var(--dim)", "color-faint": "var(--faint)", "color-muted-foreground": "var(--muted-foreground)", "color-card-foreground": "var(--card-foreground)", "color-popover-foreground": "var(--popover-foreground)", "color-secondary-foreground": "var(--secondary-foreground)", "color-on-solid": "var(--on-solid)", "color-lead": "var(--lead)", "color-lead-mid": "var(--lead-mid)", "color-lead-wash": "var(--lead-wash)", "color-primary": "var(--primary)", "color-primary-foreground": "var(--primary-foreground)", "color-accent": "var(--accent)", "color-accent-foreground": "var(--accent-foreground)", "color-go": "var(--go)", "color-go-wash": "var(--go-wash)", "color-hold": "var(--hold)", "color-hold-wash": "var(--hold-wash)", "color-stop": "var(--stop)", "color-stop-wash": "var(--stop-wash)", "color-destructive": "var(--destructive)", "color-ramp-orange": "var(--ramp-orange)", "color-milestone-yellow": "var(--milestone-yellow)", "color-go-pale": "var(--go-pale)", "color-slider-handle": "var(--slider-handle)", "color-activity-0": "var(--activity-0)", "color-activity-1": "var(--activity-1)", "color-activity-2": "var(--activity-2)", "color-activity-3": "var(--activity-3)", "color-activity-4": "var(--activity-4)", "color-brand": "var(--brand)", "color-brand-hover": "var(--brand-hover)", "color-lime": "var(--lime)", "color-lime-hover": "var(--lime-hover)", "color-on-lime": "var(--on-lime)", "color-tonal": "var(--tonal)", "color-on-tonal": "var(--on-tonal)", "color-media-fill": "var(--media-fill)", "color-on-media": "var(--on-media)", "color-media-rest-fill": "var(--media-rest-fill)", "color-media-rest-ink": "var(--media-rest-ink)", "color-scramble-strike": "var(--scramble-strike)", "color-ff-plate": "var(--ff-plate)", "color-ff-plate-edge": "var(--ff-plate-edge)", "color-ff-ink": "var(--ff-ink)", "color-ff-dim": "var(--ff-dim)", "color-ff-faint": "var(--ff-faint)", "color-ff-rule": "var(--ff-rule)", "color-ff-residual": "var(--ff-residual)", "color-ff-in-0": "var(--ff-in-0)", "color-ff-in-1": "var(--ff-in-1)", "color-ff-in-2": "var(--ff-in-2)", "color-ff-in-3": "var(--ff-in-3)", "color-ff-in-4": "var(--ff-in-4)", "color-ff-in-5": "var(--ff-in-5)", "color-ff-out-0": "var(--ff-out-0)", "color-ff-out-1": "var(--ff-out-1)", "color-ff-out-2": "var(--ff-out-2)", "color-ff-out-3": "var(--ff-out-3)", "color-ff-out-4": "var(--ff-out-4)", "color-ff-out-5": "var(--ff-out-5)", "color-collection-landlord": "var(--collection-landlord)", "color-collection-platform": "var(--collection-platform)", "color-collection-processing": "var(--collection-processing)", "color-menu-surface": "var(--menu-surface)", "color-menu-ink": "var(--menu-ink)", "color-menu-dim": "var(--menu-dim)", "color-menu-rule": "var(--menu-rule)", "color-menu-sheen": "var(--menu-sheen)", "color-menu-symbol": "var(--menu-symbol)", "color-menu-shadow": "var(--menu-shadow)", "color-menu-sheen-mid": "var(--menu-sheen-mid)", "color-menu-footer-rule": "var(--menu-footer-rule)", "radius-panel": "var(--panel-radius)", "radius-inset": "var(--inset-radius)", "font-body": "var(--body-font)", "font-heading": "var(--heading-font)", "font-mono": "var(--code-font)", "font-interface": "var(--interface-font)" }, "light": { "ground": "#ffffff", "background": "#ffffff", "card": "#ffffff", "popover": "#ffffff", "paper": "#fbf6ec", "paper-sunk": "#f3e9d7", "muted": "#f5f5f5", "secondary": "#f5f5f5", "switch-track-off": "var(--faint)", "switch-track-on": "var(--lead)", "switch-thumb-off": "var(--slider-handle)", "switch-thumb-on": "var(--on-solid)", "rule": "#e5e5e5", "rule-soft": "#f4f4f5", "border": "#e5e5e5", "input": "#e5e5e5", "ring": "#a1a1a1", "ink": "#000000", "foreground": "#0a0a0a", "dim": "#71717a", "faint": "#a1a1aa", "muted-foreground": "#737373", "card-foreground": "#0a0a0a", "popover-foreground": "#0a0a0a", "secondary-foreground": "#171717", "on-solid": "#ffffff", "lead": "#171717", "lead-mid": "#404040", "lead-wash": "#f5f5f5", "primary": "#171717", "primary-foreground": "#fafafa", "accent": "#f5f5f5", "accent-foreground": "#171717", "go": "#216e39", "go-wash": "#ebf8ee", "hold": "#946200", "hold-wash": "#fbf6ec", "stop": "#b91c1c", "stop-wash": "#fee2e2", "destructive": "#e7000b", "ramp-orange": "#b88b56", "milestone-yellow": "#dec398", "go-pale": "#9be9a8", "slider-handle": "#ffffff", "activity-0": "#ebedf0", "activity-1": "#9be9a8", "activity-2": "#40c463", "activity-3": "#30a14e", "activity-4": "#216e39", "brand": "#000000", "brand-hover": "#27272a", "lime": "#fbf6ec", "lime-hover": "#f3e9d7", "on-lime": "#171717", "tonal": "#f5f5f5", "on-tonal": "#171717", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#a1a1aa", "ff-plate": "#ffffff", "ff-plate-edge": "#e5e5e5", "ff-ink": "#000000", "ff-dim": "#71717a", "ff-faint": "#a1a1aa", "ff-rule": "#e5e5e5", "ff-residual": "#a3a3a3", "ff-in-0": "#171717", "ff-in-1": "#404040", "ff-in-2": "#737373", "ff-in-3": "#a3a3a3", "ff-in-4": "#d4d4d4", "ff-in-5": "#e5e5e5", "ff-out-0": "#27272a", "ff-out-1": "#52525b", "ff-out-2": "#71717a", "ff-out-3": "#a1a1aa", "ff-out-4": "#d4d4d8", "ff-out-5": "#e4e4e7", "collection-landlord": "#404040", "collection-platform": "#737373", "collection-processing": "#a3a3a3", "menu-surface": "rgb(23 23 23 / 0.65)", "menu-ink": "#171717", "menu-dim": "#71717a", "menu-rule": "rgb(255 255 255 / 0.15)", "menu-sheen": "rgb(255 255 255 / 0.15)", "menu-symbol": "#e5e5e5", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(255 255 255 / 0.04)", "menu-footer-rule": "rgb(255 255 255 / 0.1)", "radius": "18px", "panel-radius": "18px", "inset-radius": "10px", "body-font": "var(--font-open-runde), Arial, sans-serif", "heading-font": "var(--font-viaoda-libre), Georgia, serif", "heading-weight": "400", "code-font": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", "interface-font": "var(--font-open-runde), Arial, sans-serif" }, "dark": { "ground": "#0a0a0a", "background": "#0a0a0a", "card": "#171717", "popover": "#171717", "paper": "#29251f", "paper-sunk": "#211e19", "muted": "#262626", "secondary": "#262626", "switch-track-off": "var(--faint)", "switch-track-on": "var(--lead)", "switch-thumb-off": "var(--slider-handle)", "switch-thumb-on": "var(--on-solid)", "rule": "#2e2e2e", "rule-soft": "#262626", "border": "#2e2e2e", "input": "#3a3a3a", "ring": "#737373", "ink": "#fafafa", "foreground": "#fafafa", "dim": "#a1a1a1", "faint": "#71717a", "muted-foreground": "#a1a1a1", "card-foreground": "#fafafa", "popover-foreground": "#fafafa", "secondary-foreground": "#fafafa", "on-solid": "#171717", "lead": "#e5e5e5", "lead-mid": "#fafafa", "lead-wash": "#262626", "primary": "#e5e5e5", "primary-foreground": "#171717", "accent": "#262626", "accent-foreground": "#fafafa", "go": "#9be9a8", "go-wash": "#16291b", "hold": "#dec398", "hold-wash": "#29251f", "stop": "#ff6467", "stop-wash": "#35191c", "destructive": "#ff6467", "ramp-orange": "#c99b69", "milestone-yellow": "#dec398", "go-pale": "#9be9a8", "slider-handle": "#ffffff", "activity-0": "#262626", "activity-1": "#0e4429", "activity-2": "#006d32", "activity-3": "#26a641", "activity-4": "#39d353", "brand": "#fafafa", "brand-hover": "#d4d4d4", "lime": "#fbf6ec", "lime-hover": "#f3e9d7", "on-lime": "#171717", "tonal": "#262626", "on-tonal": "#fafafa", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#71717a", "ff-plate": "#171717", "ff-plate-edge": "#2e2e2e", "ff-ink": "#fafafa", "ff-dim": "#a3a3a3", "ff-faint": "#71717a", "ff-rule": "#2e2e2e", "ff-residual": "#737373", "ff-in-0": "#e5e5e5", "ff-in-1": "#d4d4d4", "ff-in-2": "#a3a3a3", "ff-in-3": "#737373", "ff-in-4": "#404040", "ff-in-5": "#262626", "ff-out-0": "#e4e4e7", "ff-out-1": "#d4d4d8", "ff-out-2": "#a1a1aa", "ff-out-3": "#71717a", "ff-out-4": "#52525b", "ff-out-5": "#27272a", "collection-landlord": "#e5e5e5", "collection-platform": "#a3a3a3", "collection-processing": "#737373", "menu-surface": "rgb(23 23 23 / 0.65)", "menu-ink": "#fafafa", "menu-dim": "#a3a3a3", "menu-rule": "rgb(255 255 255 / 0.15)", "menu-sheen": "rgb(255 255 255 / 0.15)", "menu-symbol": "#e5e5e5", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(255 255 255 / 0.04)", "menu-footer-rule": "rgb(255 255 255 / 0.1)" } }, "docs": "Load the fonts with next/font: // Save these files beside layout.tsx in ./fonts/ (retain LICENSE.txt):\n// https://bash-ui-registry.vercel.app/fonts/open-runde/OpenRunde-Regular.woff2\n// https://bash-ui-registry.vercel.app/fonts/open-runde/OpenRunde-Medium.woff2\n// https://bash-ui-registry.vercel.app/fonts/open-runde/OpenRunde-Semibold.woff2\n// https://bash-ui-registry.vercel.app/fonts/open-runde/OpenRunde-Bold.woff2\n// https://bash-ui-registry.vercel.app/fonts/open-runde/LICENSE.txt\nimport localFont from \"next/font/local\";\nconst openRunde = localFont({\n src: [\n { path: \"./fonts/OpenRunde-Regular.woff2\", weight: \"400\" },\n { path: \"./fonts/OpenRunde-Medium.woff2\", weight: \"500\" },\n { path: \"./fonts/OpenRunde-Semibold.woff2\", weight: \"600\" },\n { path: \"./fonts/OpenRunde-Bold.woff2\", weight: \"700\" },\n ],\n variable: \"--font-open-runde\",\n display: \"swap\",\n});\n// Add openRunde.variable to the root html className.; Viaoda_Libre({ weight: \"400\", variable: \"--font-viaoda-libre\", subsets: [\"latin\"] }). Rules: https://bash-ui-registry.vercel.app/systems/portfolio", "meta": { "project": "Portfolio", "rules": [ { "title": "Expressive headings, rounded copy", "body": "Use Viaoda Libre for the introductory statement and section headings, and Open Runde for paragraphs, metadata, project captions and controls. The original Viaoda font ships at 400; keep its distinctive silhouette rather than substituting a generic serif. Geist is the source's default UI fallback; monospace is a registry fallback for technical content." }, { "title": "Let the work carry the colour", "body": "Keep the page white, main copy black and supporting information zinc grey. Primary actions and navigation are monochrome. Project imagery, technology marks and the GitHub activity chart supply colour; do not invent a saturated structural accent." }, { "title": "Space is the main separator", "body": "Use broad gutters (8% on small screens, 18% on desktop), generous section gaps and alternating image-and-text rows. Centre the introduction on mobile and align it to the left on desktop. Most text sections sit directly on the page rather than inside cards." }, { "title": "Rounded frames, circular actions", "body": "The source's base radius is 10px. Project media uses rounded-2xl, which resolves to 18px through its radius scale; use rounded-panel for those frames and rounded-inset (10px) for controls. Navigation, collaboration buttons and arrow badges use fully rounded pills or circles." }, { "title": "A warm wash is an occasional material", "body": "Certification panels use a pale warm wash with irregular, layered watercolour edges. Use paper for this warmth and keep the main page neutral. Hand-drawn marks, small image rotations and tiny raised icon tiles are accents, not a treatment for every surface." }, { "title": "Hierarchy comes from type and tone", "body": "Keep headings in sentence case. Use black for names and emphasis, dim for supporting descriptions and faint for incidental furniture. Introductory text grows from roughly 14px to 20px; major headings reach roughly 48px. Use italics sparingly for roles and qualifications." }, { "title": "Motion lives in the controls", "body": "Calls to action slide their circular arrow across the pill over about 500ms. Navigation expands with damped springs; small tooltips fade around 200ms. When extracting components later, use motion/react and honour useReducedMotionConfig(); the source's motion does not consistently provide reduced-motion handling." }, { "title": "Distinguish source tokens from extensions", "body": "The source defines neutral light and dark UI tokens, but its portfolio sections keep fixed white backgrounds and black text. This entry applies those dark tokens consistently for the gallery and derives a dark warm inset. Positive, waiting, financial and frosted-menu slots extend the contract; they are not evidence of additional Portfolio components or an original financial palette." } ] } }, { "name": "theme-steeze", "type": "registry:theme", "title": "Curated (Steeze)", "description": "A refined visual identity that feels elevated without feeling exclusive. Thoughtful design gives it a distinctive presence while keeping it welcoming and approachable.", "cssVars": { "theme": { "color-ground": "var(--ground)", "color-background": "var(--background)", "color-card": "var(--card)", "color-popover": "var(--popover)", "color-paper": "var(--paper)", "color-paper-sunk": "var(--paper-sunk)", "color-muted": "var(--muted)", "color-secondary": "var(--secondary)", "color-switch-track-off": "var(--switch-track-off)", "color-switch-track-on": "var(--switch-track-on)", "color-switch-thumb-off": "var(--switch-thumb-off)", "color-switch-thumb-on": "var(--switch-thumb-on)", "color-rule": "var(--rule)", "color-rule-soft": "var(--rule-soft)", "color-border": "var(--border)", "color-input": "var(--input)", "color-ring": "var(--ring)", "color-ink": "var(--ink)", "color-foreground": "var(--foreground)", "color-dim": "var(--dim)", "color-faint": "var(--faint)", "color-muted-foreground": "var(--muted-foreground)", "color-card-foreground": "var(--card-foreground)", "color-popover-foreground": "var(--popover-foreground)", "color-secondary-foreground": "var(--secondary-foreground)", "color-on-solid": "var(--on-solid)", "color-lead": "var(--lead)", "color-lead-mid": "var(--lead-mid)", "color-lead-wash": "var(--lead-wash)", "color-primary": "var(--primary)", "color-primary-foreground": "var(--primary-foreground)", "color-accent": "var(--accent)", "color-accent-foreground": "var(--accent-foreground)", "color-go": "var(--go)", "color-go-wash": "var(--go-wash)", "color-hold": "var(--hold)", "color-hold-wash": "var(--hold-wash)", "color-stop": "var(--stop)", "color-stop-wash": "var(--stop-wash)", "color-destructive": "var(--destructive)", "color-ramp-orange": "var(--ramp-orange)", "color-milestone-yellow": "var(--milestone-yellow)", "color-go-pale": "var(--go-pale)", "color-slider-handle": "var(--slider-handle)", "color-activity-0": "var(--activity-0)", "color-activity-1": "var(--activity-1)", "color-activity-2": "var(--activity-2)", "color-activity-3": "var(--activity-3)", "color-activity-4": "var(--activity-4)", "color-brand": "var(--brand)", "color-brand-hover": "var(--brand-hover)", "color-lime": "var(--lime)", "color-lime-hover": "var(--lime-hover)", "color-on-lime": "var(--on-lime)", "color-tonal": "var(--tonal)", "color-on-tonal": "var(--on-tonal)", "color-media-fill": "var(--media-fill)", "color-on-media": "var(--on-media)", "color-media-rest-fill": "var(--media-rest-fill)", "color-media-rest-ink": "var(--media-rest-ink)", "color-scramble-strike": "var(--scramble-strike)", "color-ff-plate": "var(--ff-plate)", "color-ff-plate-edge": "var(--ff-plate-edge)", "color-ff-ink": "var(--ff-ink)", "color-ff-dim": "var(--ff-dim)", "color-ff-faint": "var(--ff-faint)", "color-ff-rule": "var(--ff-rule)", "color-ff-residual": "var(--ff-residual)", "color-ff-in-0": "var(--ff-in-0)", "color-ff-in-1": "var(--ff-in-1)", "color-ff-in-2": "var(--ff-in-2)", "color-ff-in-3": "var(--ff-in-3)", "color-ff-in-4": "var(--ff-in-4)", "color-ff-in-5": "var(--ff-in-5)", "color-ff-out-0": "var(--ff-out-0)", "color-ff-out-1": "var(--ff-out-1)", "color-ff-out-2": "var(--ff-out-2)", "color-ff-out-3": "var(--ff-out-3)", "color-ff-out-4": "var(--ff-out-4)", "color-ff-out-5": "var(--ff-out-5)", "color-collection-landlord": "var(--collection-landlord)", "color-collection-platform": "var(--collection-platform)", "color-collection-processing": "var(--collection-processing)", "color-menu-surface": "var(--menu-surface)", "color-menu-ink": "var(--menu-ink)", "color-menu-dim": "var(--menu-dim)", "color-menu-rule": "var(--menu-rule)", "color-menu-sheen": "var(--menu-sheen)", "color-menu-symbol": "var(--menu-symbol)", "color-menu-shadow": "var(--menu-shadow)", "color-menu-sheen-mid": "var(--menu-sheen-mid)", "color-menu-footer-rule": "var(--menu-footer-rule)", "radius-panel": "var(--panel-radius)", "radius-inset": "var(--inset-radius)", "font-body": "var(--body-font)", "font-heading": "var(--heading-font)", "font-mono": "var(--code-font)", "font-interface": "var(--interface-font)" }, "light": { "ground": "#f1efe0", "background": "#f1efe0", "card": "#f7f5ec", "popover": "#f9f9f3", "paper": "#e7e5d7", "paper-sunk": "#e0dfd1", "muted": "#ebe9da", "secondary": "#5e5e5e", "switch-track-off": "#666666", "switch-track-on": "#bda5d8", "switch-thumb-off": "#f4f3f4", "switch-thumb-on": "#222222", "rule": "#dcdbcd", "rule-soft": "#e5e3d5", "border": "#dcdbcd", "input": "#c8c6ba", "ring": "#75746e", "ink": "#222222", "foreground": "#222222", "dim": "#60605b", "faint": "#8a8981", "muted-foreground": "#60605b", "card-foreground": "#222222", "popover-foreground": "#222222", "secondary-foreground": "#ffffff", "on-solid": "#f1efe0", "lead": "#6a5294", "lead-mid": "#584678", "lead-wash": "#e5dde6", "primary": "#222222", "primary-foreground": "#f1efe0", "accent": "#e5e3d5", "accent-foreground": "#222222", "go": "#2c6b44", "go-wash": "#d4e9d0", "hold": "#7f5a12", "hold-wash": "#f3dfb1", "stop": "#93353a", "stop-wash": "#f3d6ce", "destructive": "#93353a", "ramp-orange": "#b07440", "milestone-yellow": "#d9a441", "go-pale": "#8cc79d", "slider-handle": "#ffffff", "activity-0": "#e5e3d5", "activity-1": "#d8cddc", "activity-2": "#baa4d8", "activity-3": "#927bb6", "activity-4": "#6a5294", "brand": "#6a5294", "brand-hover": "#584678", "lime": "#f1efe0", "lime-hover": "#ffffff", "on-lime": "#222222", "tonal": "#323743", "on-tonal": "#f3f4f6", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#9095a1", "ff-plate": "#f7f5ec", "ff-plate-edge": "#dcdbcd", "ff-ink": "#222222", "ff-dim": "#60605b", "ff-faint": "#8a8981", "ff-rule": "#dcdbcd", "ff-residual": "#8a8981", "ff-in-0": "#2c6b44", "ff-in-1": "#538563", "ff-in-2": "#7ba082", "ff-in-3": "#a2baa2", "ff-in-4": "#cad5c1", "ff-in-5": "#dde2d0", "ff-out-0": "#9a5a2e", "ff-out-1": "#ab7852", "ff-out-2": "#bd9675", "ff-out-3": "#ceb399", "ff-out-4": "#e0d1bc", "ff-out-5": "#e8e0ce", "collection-landlord": "#2c6b44", "collection-platform": "#6a5294", "collection-processing": "#9a5a2e", "menu-surface": "rgb(34 34 34 / 0.8)", "menu-ink": "#f1efe0", "menu-dim": "rgb(241 239 224 / 0.6)", "menu-rule": "rgb(241 239 224 / 0.15)", "menu-sheen": "rgb(241 239 224 / 0.1)", "menu-symbol": "#f1efe0", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(241 239 224 / 0.04)", "menu-footer-rule": "rgb(241 239 224 / 0.1)", "radius": "12px", "panel-radius": "12px", "inset-radius": "8px", "body-font": "var(--font-dm-sans), Arial, sans-serif", "heading-font": "var(--font-playfair-display), Georgia, serif", "heading-weight": "400", "code-font": "var(--font-orbitron), ui-monospace, monospace", "interface-font": "var(--font-outfit), ui-sans-serif, system-ui, sans-serif" }, "dark": { "ground": "#222222", "background": "#222222", "card": "#262626", "popover": "#131316", "paper": "#2c2c2c", "paper-sunk": "#333231", "muted": "#282828", "secondary": "#5e5e5e", "switch-track-off": "#666666", "switch-track-on": "#bda5d8", "switch-thumb-off": "#f4f3f4", "switch-thumb-on": "#222222", "rule": "#41413f", "rule-soft": "#373735", "border": "#41413f", "input": "#4b4b48", "ring": "#8a8981", "ink": "#f1efe0", "foreground": "#f1efe0", "dim": "#9e9d94", "faint": "#75746e", "muted-foreground": "#9e9d94", "card-foreground": "#f1efe0", "popover-foreground": "#f1efe0", "secondary-foreground": "#ffffff", "on-solid": "#222222", "lead": "#baa4d8", "lead-mid": "#cbbbe2", "lead-wash": "#3a373f", "primary": "#f1efe0", "primary-foreground": "#222222", "accent": "#373735", "accent-foreground": "#f1efe0", "go": "#a8e0b8", "go-wash": "#353d37", "hold": "#f5c66b", "hold-wash": "#40392c", "stop": "#f5b8b8", "stop-wash": "#403737", "destructive": "#ef4444", "ramp-orange": "#c98a5b", "milestone-yellow": "#f5c66b", "go-pale": "#cfd392", "slider-handle": "#ffffff", "activity-0": "#2e2e2d", "activity-1": "#4a464f", "activity-2": "#6d637a", "activity-3": "#9081a5", "activity-4": "#baa4d8", "brand": "#baa4d8", "brand-hover": "#cbbbe2", "lime": "#f1efe0", "lime-hover": "#ffffff", "on-lime": "#222222", "tonal": "#323743", "on-tonal": "#f3f4f6", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#ffffff", "media-rest-ink": "#000000", "scramble-strike": "#9095a1", "ff-plate": "#262626", "ff-plate-edge": "#41413f", "ff-ink": "#f1efe0", "ff-dim": "#9e9d94", "ff-faint": "#75746e", "ff-rule": "#41413f", "ff-residual": "#75746e", "ff-in-0": "#a8e0b8", "ff-in-1": "#8dba9a", "ff-in-2": "#72947c", "ff-in-3": "#586e5e", "ff-in-4": "#3d4840", "ff-in-5": "#2f3531", "ff-out-0": "#c98a5b", "ff-out-1": "#a87550", "ff-out-2": "#866044", "ff-out-3": "#654c39", "ff-out-4": "#43372d", "ff-out-5": "#332c28", "collection-landlord": "#a8e0b8", "collection-platform": "#baa4d8", "collection-processing": "#c98a5b", "menu-surface": "rgb(34 34 34 / 0.8)", "menu-ink": "#f1efe0", "menu-dim": "rgb(241 239 224 / 0.6)", "menu-rule": "rgb(241 239 224 / 0.15)", "menu-sheen": "rgb(241 239 224 / 0.1)", "menu-symbol": "#f1efe0", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(241 239 224 / 0.04)", "menu-footer-rule": "rgb(241 239 224 / 0.1)" } }, "docs": "Load the fonts with next/font: DM_Sans({ variable: \"--font-dm-sans\", subsets: [\"latin\"] }); Playfair_Display({ variable: \"--font-playfair-display\", subsets: [\"latin\"], style: [\"normal\", \"italic\"] }); Orbitron({ variable: \"--font-orbitron\", subsets: [\"latin\"] }); Outfit({ variable: \"--font-outfit\", subsets: [\"latin\"] }). Rules: https://bash-ui-registry.vercel.app/systems/steeze", "meta": { "project": "Steeze", "rules": [ { "title": "Playfair speaks, DM Sans explains", "body": "Playfair Display is the page's root face: wordmark, headings, navigation and button labels. DM Sans carries paragraphs, answers, form copy and the footer. Section headings request weight 300, which renders as Playfair's lightest available weight (400); the hero uses 500 and small card titles 600 in uppercase. Body copy often sits at DM Sans 300 with 1.5–1.6 line height." }, { "title": "Charcoal and cream, nothing else neutral", "body": "The ground is #222222 and the ink is #f1efe0; light mode swaps them, as the landing's cream sections do. Derive every other neutral from those two at reduced strength: borders at 10–15%, quiet fills at 2–5%, supporting text at 60–70%. Never use pure white text or a grey from another scale." }, { "title": "Tight serifs, spaced labels", "body": "Large headings pull in tracking (about −1 to −2px at 32–64px) with 1.1–1.2 leading and stay in sentence case. Italicise one phrase for emphasis, as in \"Join the culture\". Small eyebrows, numbering (01, 02…) and footer captions go uppercase with +0.05em to 1px tracking." }, { "title": "Actions are pills", "body": "Primary calls to action are rounded-full pills in Playfair: cream fill with charcoal label, or a cream outline in the navigation. On hover, a small dot expands to fill the pill and the label gives way to an up-right arrow over about 300ms. Inputs and inner controls use rounded-inset (8px), cards rounded-panel (12px) and full-screen dialogs about 16px." }, { "title": "Hairlines, not boxes", "body": "Cards barely lift from the ground: a near-invisible fill with a border-rule hairline. Lists and accordions separate items with bottom borders only. Reserve deep, soft black shadows for floating media such as phone mock-ups; do not add decorative shadows to cards." }, { "title": "Lilac is a glow, used sparingly", "body": "Lead is the lilac from the page glow and the app's on-switches, spinners and default-address badges. Use it for links, focus, selection and small marks, never for large fills or body text. Primary buttons stay cream on charcoal (or charcoal on cream). In light mode, lead deepens so it reads as text on cream." }, { "title": "Status in soft pastels", "body": "Steeze's internal dashboards mark good in mint, warning in gold and bad in rose, and rank in gold, silver and bronze. Pair each with a label. On charcoal the pastels are used as-is; on cream this entry deepens them so they pass as text." }, { "title": "Slow, confident motion", "body": "Entrances rise 20–50px and fade over 0.8–1s on cubic-bezier(0.22, 1, 0.36, 1), staggered 0.1–0.2s. The hero's slide uses 2.8s on cubic-bezier(0.19, 1, 0.22, 1). Hover changes take about 300ms, card washes about 500ms. Honour reduced motion with useReducedMotionConfig()." }, { "title": "Outfit belongs to the tools", "body": "The admin dashboard uses Outfit (variable, 100–900) for everything; it is the interface font here (font-interface). Use it for dense screens such as tables, dashboards and the app's earnings figures. Customer-facing copy stays Playfair and DM Sans. The admin's own colours are not part of this system, and nor is the app's Montserrat." }, { "title": "Orbitron is for card numbers", "body": "The app sets payment-card digits in Orbitron with wide tracking; it is the mono face here (font-mono). Keep it to short technical strings such as card numbers and codes, never paragraphs or labels." }, { "title": "Two quiet button fills", "body": "Beside a primary action, the app uses two filled buttons with rounded-inset corners and DM Sans semibold labels: tonal, a blue-slate (#323743) with off-white text, for things like Earnings; and secondary, a mid grey (#5E5E5E) with white text, for things like Edit Profile. Both hold their colour in light and dark." } ] } }, { "name": "theme-studio", "type": "registry:theme", "title": "Studio (bash-ui)", "description": "A composed frame for expressive detail. Layered dark surfaces, softly lit controls and quiet typography create depth while giving colour, shape and movement room to be noticed.", "cssVars": { "theme": { "color-ground": "var(--ground)", "color-background": "var(--background)", "color-card": "var(--card)", "color-popover": "var(--popover)", "color-paper": "var(--paper)", "color-paper-sunk": "var(--paper-sunk)", "color-muted": "var(--muted)", "color-secondary": "var(--secondary)", "color-switch-track-off": "var(--switch-track-off)", "color-switch-track-on": "var(--switch-track-on)", "color-switch-thumb-off": "var(--switch-thumb-off)", "color-switch-thumb-on": "var(--switch-thumb-on)", "color-rule": "var(--rule)", "color-rule-soft": "var(--rule-soft)", "color-border": "var(--border)", "color-input": "var(--input)", "color-ring": "var(--ring)", "color-ink": "var(--ink)", "color-foreground": "var(--foreground)", "color-dim": "var(--dim)", "color-faint": "var(--faint)", "color-muted-foreground": "var(--muted-foreground)", "color-card-foreground": "var(--card-foreground)", "color-popover-foreground": "var(--popover-foreground)", "color-secondary-foreground": "var(--secondary-foreground)", "color-on-solid": "var(--on-solid)", "color-lead": "var(--lead)", "color-lead-mid": "var(--lead-mid)", "color-lead-wash": "var(--lead-wash)", "color-primary": "var(--primary)", "color-primary-foreground": "var(--primary-foreground)", "color-accent": "var(--accent)", "color-accent-foreground": "var(--accent-foreground)", "color-go": "var(--go)", "color-go-wash": "var(--go-wash)", "color-hold": "var(--hold)", "color-hold-wash": "var(--hold-wash)", "color-stop": "var(--stop)", "color-stop-wash": "var(--stop-wash)", "color-destructive": "var(--destructive)", "color-ramp-orange": "var(--ramp-orange)", "color-milestone-yellow": "var(--milestone-yellow)", "color-go-pale": "var(--go-pale)", "color-slider-handle": "var(--slider-handle)", "color-activity-0": "var(--activity-0)", "color-activity-1": "var(--activity-1)", "color-activity-2": "var(--activity-2)", "color-activity-3": "var(--activity-3)", "color-activity-4": "var(--activity-4)", "color-brand": "var(--brand)", "color-brand-hover": "var(--brand-hover)", "color-lime": "var(--lime)", "color-lime-hover": "var(--lime-hover)", "color-on-lime": "var(--on-lime)", "color-tonal": "var(--tonal)", "color-on-tonal": "var(--on-tonal)", "color-media-fill": "var(--media-fill)", "color-on-media": "var(--on-media)", "color-media-rest-fill": "var(--media-rest-fill)", "color-media-rest-ink": "var(--media-rest-ink)", "color-scramble-strike": "var(--scramble-strike)", "color-ff-plate": "var(--ff-plate)", "color-ff-plate-edge": "var(--ff-plate-edge)", "color-ff-ink": "var(--ff-ink)", "color-ff-dim": "var(--ff-dim)", "color-ff-faint": "var(--ff-faint)", "color-ff-rule": "var(--ff-rule)", "color-ff-residual": "var(--ff-residual)", "color-ff-in-0": "var(--ff-in-0)", "color-ff-in-1": "var(--ff-in-1)", "color-ff-in-2": "var(--ff-in-2)", "color-ff-in-3": "var(--ff-in-3)", "color-ff-in-4": "var(--ff-in-4)", "color-ff-in-5": "var(--ff-in-5)", "color-ff-out-0": "var(--ff-out-0)", "color-ff-out-1": "var(--ff-out-1)", "color-ff-out-2": "var(--ff-out-2)", "color-ff-out-3": "var(--ff-out-3)", "color-ff-out-4": "var(--ff-out-4)", "color-ff-out-5": "var(--ff-out-5)", "color-collection-landlord": "var(--collection-landlord)", "color-collection-platform": "var(--collection-platform)", "color-collection-processing": "var(--collection-processing)", "color-menu-surface": "var(--menu-surface)", "color-menu-ink": "var(--menu-ink)", "color-menu-dim": "var(--menu-dim)", "color-menu-rule": "var(--menu-rule)", "color-menu-sheen": "var(--menu-sheen)", "color-menu-symbol": "var(--menu-symbol)", "color-menu-shadow": "var(--menu-shadow)", "color-menu-sheen-mid": "var(--menu-sheen-mid)", "color-menu-footer-rule": "var(--menu-footer-rule)", "radius-panel": "var(--panel-radius)", "radius-inset": "var(--inset-radius)", "font-body": "var(--body-font)", "font-heading": "var(--heading-font)", "font-mono": "var(--code-font)", "font-interface": "var(--interface-font)" }, "light": { "ground": "#f9f9f9", "background": "#fdfdfd", "card": "#ffffff", "popover": "#ffffff", "paper": "#f4f4f4", "paper-sunk": "#eae9e9", "muted": "#f4f4f4", "secondary": "#f4f4f4", "switch-track-off": "var(--faint)", "switch-track-on": "var(--lead)", "switch-thumb-off": "var(--slider-handle)", "switch-thumb-on": "var(--on-solid)", "rule": "#ebebeb", "rule-soft": "#f1f1f1", "border": "#ebebeb", "input": "#e5e5e5", "ring": "#0073e5", "ink": "#0d0d0d", "foreground": "#3f3f3f", "dim": "#6c6c6c", "faint": "#8f8f8f", "muted-foreground": "#6d6d6d", "card-foreground": "#3f3f3f", "popover-foreground": "#3f3f3f", "secondary-foreground": "#0d0d0d", "on-solid": "#ffffff", "lead": "#0062d6", "lead-mid": "#0073e5", "lead-wash": "#e6f0fe", "primary": "#0d0d0d", "primary-foreground": "#ffffff", "accent": "#f4f4f4", "accent-foreground": "#0d0d0d", "go": "#1f8a4c", "go-wash": "#e8f5ec", "hold": "#a16207", "hold-wash": "#fbf3e2", "stop": "#c62828", "stop-wash": "#fbeaea", "destructive": "#dc2626", "ramp-orange": "#ea7a2a", "milestone-yellow": "#e0b520", "go-pale": "#9ed3a8", "slider-handle": "#ffffff", "activity-0": "#eae9e9", "activity-1": "#c7e2d2", "activity-2": "#8fc5a6", "activity-3": "#57a779", "activity-4": "#1f8a4c", "brand": "#0073e5", "brand-hover": "#0064c8", "lime": "#ecfccb", "lime-hover": "#d9f99d", "on-lime": "#1a1a1a", "tonal": "#f4f4f4", "on-tonal": "#0d0d0d", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#8f8f8f", "ff-plate": "var(--card)", "ff-plate-edge": "var(--rule)", "ff-ink": "var(--ink)", "ff-dim": "var(--dim)", "ff-faint": "var(--faint)", "ff-rule": "var(--rule)", "ff-residual": "var(--dim)", "ff-in-0": "color-mix(in oklab, var(--go) 100%, var(--card))", "ff-in-1": "color-mix(in oklab, var(--go) 88%, var(--card))", "ff-in-2": "color-mix(in oklab, var(--go) 76%, var(--card))", "ff-in-3": "color-mix(in oklab, var(--go) 64%, var(--card))", "ff-in-4": "color-mix(in oklab, var(--go) 52%, var(--card))", "ff-in-5": "color-mix(in oklab, var(--go) 40%, var(--card))", "ff-out-0": "color-mix(in oklab, var(--ramp-orange) 100%, var(--card))", "ff-out-1": "color-mix(in oklab, var(--ramp-orange) 88%, var(--card))", "ff-out-2": "color-mix(in oklab, var(--ramp-orange) 76%, var(--card))", "ff-out-3": "color-mix(in oklab, var(--ramp-orange) 64%, var(--card))", "ff-out-4": "color-mix(in oklab, var(--ramp-orange) 52%, var(--card))", "ff-out-5": "color-mix(in oklab, var(--ramp-orange) 40%, var(--card))", "collection-landlord": "var(--go)", "collection-platform": "var(--hold)", "collection-processing": "var(--stop)", "menu-surface": "rgb(23 23 23 / 0.65)", "menu-ink": "#ffffff", "menu-dim": "#a3a3a3", "menu-rule": "rgb(255 255 255 / 0.15)", "menu-sheen": "rgb(255 255 255 / 0.15)", "menu-symbol": "#e5e5e5", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(255 255 255 / 0.04)", "menu-footer-rule": "rgb(255 255 255 / 0.1)", "radius": "16px", "panel-radius": "16px", "inset-radius": "12px", "body-font": "var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif", "heading-font": "var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif", "heading-weight": "600", "code-font": "var(--font-roboto-mono), ui-monospace, monospace", "interface-font": "var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif" }, "dark": { "ground": "#171717", "background": "#121212", "card": "#1c1c1c", "popover": "#1b1b1b", "paper": "#222222", "paper-sunk": "#2a2a2a", "muted": "#222222", "secondary": "#222222", "switch-track-off": "var(--faint)", "switch-track-on": "var(--lead)", "switch-thumb-off": "var(--slider-handle)", "switch-thumb-on": "var(--on-solid)", "rule": "#2a2a2a", "rule-soft": "#222222", "border": "#2a2a2a", "input": "#2e2e2e", "ring": "#7db4ff", "ink": "#fbfbfb", "foreground": "#cdcdcd", "dim": "#979797", "faint": "#767676", "muted-foreground": "#979797", "card-foreground": "#cdcdcd", "popover-foreground": "#cdcdcd", "secondary-foreground": "#fbfbfb", "on-solid": "#121212", "lead": "#7db4ff", "lead-mid": "#a3c9ff", "lead-wash": "#10233d", "primary": "#fbfbfb", "primary-foreground": "#121212", "accent": "#222222", "accent-foreground": "#fbfbfb", "go": "#6fcf8e", "go-wash": "#14261b", "hold": "#e8b660", "hold-wash": "#2a2215", "stop": "#f28b82", "stop-wash": "#2d1716", "destructive": "#f28b82", "ramp-orange": "#f0913a", "milestone-yellow": "#f2cd3f", "go-pale": "#a7dcb4", "slider-handle": "#ffffff", "activity-0": "#2a2a2a", "activity-1": "#314939", "activity-2": "#467655", "activity-3": "#5aa272", "activity-4": "#6fcf8e", "brand": "#0073e5", "brand-hover": "#3b8ff0", "lime": "#e6f5c0", "lime-hover": "#d4e5a0", "on-lime": "#1a1a1a", "tonal": "#222222", "on-tonal": "#fbfbfb", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#767676", "ff-plate": "var(--card)", "ff-plate-edge": "var(--rule)", "ff-ink": "var(--ink)", "ff-dim": "var(--dim)", "ff-faint": "var(--faint)", "ff-rule": "var(--rule)", "ff-residual": "var(--dim)", "ff-in-0": "color-mix(in oklab, var(--go) 100%, var(--card))", "ff-in-1": "color-mix(in oklab, var(--go) 88%, var(--card))", "ff-in-2": "color-mix(in oklab, var(--go) 76%, var(--card))", "ff-in-3": "color-mix(in oklab, var(--go) 64%, var(--card))", "ff-in-4": "color-mix(in oklab, var(--go) 52%, var(--card))", "ff-in-5": "color-mix(in oklab, var(--go) 40%, var(--card))", "ff-out-0": "color-mix(in oklab, var(--ramp-orange) 100%, var(--card))", "ff-out-1": "color-mix(in oklab, var(--ramp-orange) 88%, var(--card))", "ff-out-2": "color-mix(in oklab, var(--ramp-orange) 76%, var(--card))", "ff-out-3": "color-mix(in oklab, var(--ramp-orange) 64%, var(--card))", "ff-out-4": "color-mix(in oklab, var(--ramp-orange) 52%, var(--card))", "ff-out-5": "color-mix(in oklab, var(--ramp-orange) 40%, var(--card))", "collection-landlord": "var(--go)", "collection-platform": "var(--hold)", "collection-processing": "var(--stop)", "menu-surface": "rgb(23 23 23 / 0.65)", "menu-ink": "#ffffff", "menu-dim": "#a3a3a3", "menu-rule": "rgb(255 255 255 / 0.15)", "menu-sheen": "rgb(255 255 255 / 0.15)", "menu-symbol": "#e5e5e5", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(255 255 255 / 0.04)", "menu-footer-rule": "rgb(255 255 255 / 0.1)" } }, "docs": "Load the fonts with next/font: Inter({ variable: \"--font-inter\" }); Roboto_Mono({ variable: \"--font-roboto-mono\" }). Rules: https://bash-ui-registry.vercel.app/systems/studio", "meta": { "project": "bash-ui", "rules": [ { "title": "Surfaces, not borders", "body": "A panel is a step lighter than what it sits on, at 16px. No outline. Depth comes from the surface, not from a line around it." }, { "title": "Raised means lit from above", "body": "A selected or pressable chip gets a white 6–8% fill, a one-pixel inset highlight on its top edge and a tight drop shadow. Never a border." }, { "title": "Everything you press is a pill", "body": "Nav, tabs, actions and arrows are fully rounded, 30–36px tall, 13px medium text. Square corners are for content, round ones for controls." }, { "title": "Two greys of text", "body": "Near-white for what you read, a mid grey (#979797) for everything else. Labels are 11px and quiet, never uppercase." }, { "title": "One blue, rarely", "body": "The accent is a single blue, used for links, focus and the one call to action. Everything else is greyscale." } ] } }, { "name": "theme-neutral", "type": "registry:theme", "title": "Neutral (bash-ui)", "description": "A clear, adaptable foundation. Balanced greys, straightforward typography and a measured indigo accent give proportion, hierarchy and interaction space to speak for themselves.", "cssVars": { "theme": { "color-ground": "var(--ground)", "color-background": "var(--background)", "color-card": "var(--card)", "color-popover": "var(--popover)", "color-paper": "var(--paper)", "color-paper-sunk": "var(--paper-sunk)", "color-muted": "var(--muted)", "color-secondary": "var(--secondary)", "color-switch-track-off": "var(--switch-track-off)", "color-switch-track-on": "var(--switch-track-on)", "color-switch-thumb-off": "var(--switch-thumb-off)", "color-switch-thumb-on": "var(--switch-thumb-on)", "color-rule": "var(--rule)", "color-rule-soft": "var(--rule-soft)", "color-border": "var(--border)", "color-input": "var(--input)", "color-ring": "var(--ring)", "color-ink": "var(--ink)", "color-foreground": "var(--foreground)", "color-dim": "var(--dim)", "color-faint": "var(--faint)", "color-muted-foreground": "var(--muted-foreground)", "color-card-foreground": "var(--card-foreground)", "color-popover-foreground": "var(--popover-foreground)", "color-secondary-foreground": "var(--secondary-foreground)", "color-on-solid": "var(--on-solid)", "color-lead": "var(--lead)", "color-lead-mid": "var(--lead-mid)", "color-lead-wash": "var(--lead-wash)", "color-primary": "var(--primary)", "color-primary-foreground": "var(--primary-foreground)", "color-accent": "var(--accent)", "color-accent-foreground": "var(--accent-foreground)", "color-go": "var(--go)", "color-go-wash": "var(--go-wash)", "color-hold": "var(--hold)", "color-hold-wash": "var(--hold-wash)", "color-stop": "var(--stop)", "color-stop-wash": "var(--stop-wash)", "color-destructive": "var(--destructive)", "color-ramp-orange": "var(--ramp-orange)", "color-milestone-yellow": "var(--milestone-yellow)", "color-go-pale": "var(--go-pale)", "color-slider-handle": "var(--slider-handle)", "color-activity-0": "var(--activity-0)", "color-activity-1": "var(--activity-1)", "color-activity-2": "var(--activity-2)", "color-activity-3": "var(--activity-3)", "color-activity-4": "var(--activity-4)", "color-brand": "var(--brand)", "color-brand-hover": "var(--brand-hover)", "color-lime": "var(--lime)", "color-lime-hover": "var(--lime-hover)", "color-on-lime": "var(--on-lime)", "color-tonal": "var(--tonal)", "color-on-tonal": "var(--on-tonal)", "color-media-fill": "var(--media-fill)", "color-on-media": "var(--on-media)", "color-media-rest-fill": "var(--media-rest-fill)", "color-media-rest-ink": "var(--media-rest-ink)", "color-scramble-strike": "var(--scramble-strike)", "color-ff-plate": "var(--ff-plate)", "color-ff-plate-edge": "var(--ff-plate-edge)", "color-ff-ink": "var(--ff-ink)", "color-ff-dim": "var(--ff-dim)", "color-ff-faint": "var(--ff-faint)", "color-ff-rule": "var(--ff-rule)", "color-ff-residual": "var(--ff-residual)", "color-ff-in-0": "var(--ff-in-0)", "color-ff-in-1": "var(--ff-in-1)", "color-ff-in-2": "var(--ff-in-2)", "color-ff-in-3": "var(--ff-in-3)", "color-ff-in-4": "var(--ff-in-4)", "color-ff-in-5": "var(--ff-in-5)", "color-ff-out-0": "var(--ff-out-0)", "color-ff-out-1": "var(--ff-out-1)", "color-ff-out-2": "var(--ff-out-2)", "color-ff-out-3": "var(--ff-out-3)", "color-ff-out-4": "var(--ff-out-4)", "color-ff-out-5": "var(--ff-out-5)", "color-collection-landlord": "var(--collection-landlord)", "color-collection-platform": "var(--collection-platform)", "color-collection-processing": "var(--collection-processing)", "color-menu-surface": "var(--menu-surface)", "color-menu-ink": "var(--menu-ink)", "color-menu-dim": "var(--menu-dim)", "color-menu-rule": "var(--menu-rule)", "color-menu-sheen": "var(--menu-sheen)", "color-menu-symbol": "var(--menu-symbol)", "color-menu-shadow": "var(--menu-shadow)", "color-menu-sheen-mid": "var(--menu-sheen-mid)", "color-menu-footer-rule": "var(--menu-footer-rule)", "radius-panel": "var(--panel-radius)", "radius-inset": "var(--inset-radius)", "font-body": "var(--body-font)", "font-heading": "var(--heading-font)", "font-mono": "var(--code-font)", "font-interface": "var(--interface-font)" }, "light": { "ground": "#f5f5f5", "background": "#ffffff", "card": "#ffffff", "popover": "#ffffff", "paper": "#f4f4f5", "paper-sunk": "#e8e8ea", "muted": "#f4f4f5", "secondary": "#f4f4f5", "switch-track-off": "var(--faint)", "switch-track-on": "var(--lead)", "switch-thumb-off": "var(--slider-handle)", "switch-thumb-on": "var(--on-solid)", "rule": "#d9d9de", "rule-soft": "#ececef", "border": "#e4e4e7", "input": "#e4e4e7", "ring": "#4f46e5", "ink": "#18181b", "foreground": "#27272a", "dim": "#62626b", "faint": "#8e8e97", "muted-foreground": "#71717a", "card-foreground": "#27272a", "popover-foreground": "#27272a", "secondary-foreground": "#18181b", "on-solid": "#ffffff", "lead": "#4f46e5", "lead-mid": "#6366f1", "lead-wash": "#eef0fe", "primary": "#18181b", "primary-foreground": "#fafafa", "accent": "#f4f4f5", "accent-foreground": "#18181b", "go": "#15803d", "go-wash": "#e8f5ec", "hold": "#a16207", "hold-wash": "#fbf3e2", "stop": "#b91c1c", "stop-wash": "#fbeaea", "destructive": "#dc2626", "ramp-orange": "#ea7a2a", "milestone-yellow": "#e0b520", "go-pale": "#9ed3a8", "slider-handle": "#ffffff", "activity-0": "#e8e8ea", "activity-1": "#c5dfcf", "activity-2": "#8ac09e", "activity-3": "#50a06e", "activity-4": "#15803d", "brand": "#4f46e5", "brand-hover": "#4338ca", "lime": "#ecfccb", "lime-hover": "#d9f99d", "on-lime": "#1a1a1a", "tonal": "#f4f4f5", "on-tonal": "#18181b", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#8e8e97", "ff-plate": "var(--card)", "ff-plate-edge": "var(--rule)", "ff-ink": "var(--ink)", "ff-dim": "var(--dim)", "ff-faint": "var(--faint)", "ff-rule": "var(--rule)", "ff-residual": "var(--dim)", "ff-in-0": "color-mix(in oklab, var(--go) 100%, var(--card))", "ff-in-1": "color-mix(in oklab, var(--go) 88%, var(--card))", "ff-in-2": "color-mix(in oklab, var(--go) 76%, var(--card))", "ff-in-3": "color-mix(in oklab, var(--go) 64%, var(--card))", "ff-in-4": "color-mix(in oklab, var(--go) 52%, var(--card))", "ff-in-5": "color-mix(in oklab, var(--go) 40%, var(--card))", "ff-out-0": "color-mix(in oklab, var(--ramp-orange) 100%, var(--card))", "ff-out-1": "color-mix(in oklab, var(--ramp-orange) 88%, var(--card))", "ff-out-2": "color-mix(in oklab, var(--ramp-orange) 76%, var(--card))", "ff-out-3": "color-mix(in oklab, var(--ramp-orange) 64%, var(--card))", "ff-out-4": "color-mix(in oklab, var(--ramp-orange) 52%, var(--card))", "ff-out-5": "color-mix(in oklab, var(--ramp-orange) 40%, var(--card))", "collection-landlord": "var(--go)", "collection-platform": "var(--hold)", "collection-processing": "var(--stop)", "menu-surface": "rgb(23 23 23 / 0.65)", "menu-ink": "#ffffff", "menu-dim": "#a3a3a3", "menu-rule": "rgb(255 255 255 / 0.15)", "menu-sheen": "rgb(255 255 255 / 0.15)", "menu-symbol": "#e5e5e5", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(255 255 255 / 0.04)", "menu-footer-rule": "rgb(255 255 255 / 0.1)", "radius": "12px", "panel-radius": "12px", "inset-radius": "8px", "body-font": "var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif", "heading-font": "var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif", "heading-weight": "600", "code-font": "var(--font-geist-mono), ui-monospace, monospace", "interface-font": "var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif" }, "dark": { "ground": "#0b0b0d", "background": "#131316", "card": "#131316", "popover": "#1b1b1f", "paper": "#1b1b1f", "paper-sunk": "#232328", "muted": "#1b1b1f", "secondary": "#1b1b1f", "switch-track-off": "var(--faint)", "switch-track-on": "var(--lead)", "switch-thumb-off": "var(--slider-handle)", "switch-thumb-on": "var(--on-solid)", "rule": "#2e2e34", "rule-soft": "#222227", "border": "#2e2e34", "input": "#2e2e34", "ring": "#818cf8", "ink": "#f4f4f5", "foreground": "#d4d4d8", "dim": "#9f9fa8", "faint": "#71717a", "muted-foreground": "#8e8e97", "card-foreground": "#d4d4d8", "popover-foreground": "#d4d4d8", "secondary-foreground": "#f4f4f5", "on-solid": "#0b0b0d", "lead": "#a5b4fc", "lead-mid": "#c7d2fe", "lead-wash": "#1e1f3a", "primary": "#f4f4f5", "primary-foreground": "#18181b", "accent": "#1b1b1f", "accent-foreground": "#f4f4f5", "go": "#4ade80", "go-wash": "#12251a", "hold": "#facc15", "hold-wash": "#2a2412", "stop": "#f87171", "stop-wash": "#2e1616", "destructive": "#f87171", "ramp-orange": "#fb923c", "milestone-yellow": "#facc15", "go-pale": "#86efac", "slider-handle": "#ffffff", "activity-0": "#232328", "activity-1": "#214631", "activity-2": "#2f794b", "activity-3": "#3cab66", "activity-4": "#4ade80", "brand": "#818cf8", "brand-hover": "#a5b4fc", "lime": "#ecfccb", "lime-hover": "#d9f99d", "on-lime": "#1a1a1a", "tonal": "#1b1b1f", "on-tonal": "#f4f4f5", "media-fill": "#000000", "on-media": "#ffffff", "media-rest-fill": "#000000", "media-rest-ink": "#ffffff", "scramble-strike": "#71717a", "ff-plate": "var(--card)", "ff-plate-edge": "var(--rule)", "ff-ink": "var(--ink)", "ff-dim": "var(--dim)", "ff-faint": "var(--faint)", "ff-rule": "var(--rule)", "ff-residual": "var(--dim)", "ff-in-0": "color-mix(in oklab, var(--go) 100%, var(--card))", "ff-in-1": "color-mix(in oklab, var(--go) 88%, var(--card))", "ff-in-2": "color-mix(in oklab, var(--go) 76%, var(--card))", "ff-in-3": "color-mix(in oklab, var(--go) 64%, var(--card))", "ff-in-4": "color-mix(in oklab, var(--go) 52%, var(--card))", "ff-in-5": "color-mix(in oklab, var(--go) 40%, var(--card))", "ff-out-0": "color-mix(in oklab, var(--ramp-orange) 100%, var(--card))", "ff-out-1": "color-mix(in oklab, var(--ramp-orange) 88%, var(--card))", "ff-out-2": "color-mix(in oklab, var(--ramp-orange) 76%, var(--card))", "ff-out-3": "color-mix(in oklab, var(--ramp-orange) 64%, var(--card))", "ff-out-4": "color-mix(in oklab, var(--ramp-orange) 52%, var(--card))", "ff-out-5": "color-mix(in oklab, var(--ramp-orange) 40%, var(--card))", "collection-landlord": "var(--go)", "collection-platform": "var(--hold)", "collection-processing": "var(--stop)", "menu-surface": "rgb(23 23 23 / 0.65)", "menu-ink": "#ffffff", "menu-dim": "#a3a3a3", "menu-rule": "rgb(255 255 255 / 0.15)", "menu-sheen": "rgb(255 255 255 / 0.15)", "menu-symbol": "#e5e5e5", "menu-shadow": "#00000066", "menu-sheen-mid": "rgb(255 255 255 / 0.04)", "menu-footer-rule": "rgb(255 255 255 / 0.1)" } }, "docs": "Load the fonts with next/font: Geist({ variable: \"--font-geist-sans\" }); Geist_Mono({ variable: \"--font-geist-mono\" }). Rules: https://bash-ui-registry.vercel.app/systems/neutral", "meta": { "project": "bash-ui", "rules": [ { "title": "Nothing to prove", "body": "No brand, no warmth. Every component should still read clearly here; if it does not, it is depending on a colour it never asked for." } ] } }, { "name": "account-menu", "type": "registry:component", "title": "Account menu", "description": "The account block at the foot of an app rail: avatar, name and role, opening upward into a frosted menu with the email, a highlight that slides between rows, icons that gesture as it lands, and a red Log out.", "dependencies": [ "radix-ui", "motion", "lucide-react" ], "registryDependencies": [], "files": [ { "path": "registry/items/account-menu/account-menu.tsx", "type": "registry:component" } ], "meta": { "kind": "widget", "whenToUse": "Use for the signed-in person's own menu (profile, settings, help, sign out) at the foot or top of a sidebar or header. Do not use for menus about content on the page, or for more than a handful of rows; that is a plain dropdown or a settings page.", "origin": { "project": "180Connect", "path": "src/components/sidebar-account-menu.tsx" }, "credits": [ { "name": "Animate UI (Radix Dropdown Menu, Highlight, animated icons)", "url": "https://animate-ui.com", "license": "MIT" } ] } }, { "name": "ai-cost-card", "type": "registry:component", "title": "AI cost card", "description": "A spend card for estimated AI cost: the window's total with its change on the prior stretch, a 7D–ALL window switch, the split by kind of work as horizontal sticks with a figure legend, and one stacked-stick column per date that fills up bottom to top.", "dependencies": [ "motion" ], "registryDependencies": [ "https://bash-ui-registry.vercel.app/r/stick-progress-bar.json" ], "files": [ { "path": "registry/items/ai-cost-card/ai-cost-card.tsx", "type": "registry:component" } ], "meta": { "kind": "widget", "whenToUse": "Use to watch a metered cost (AI tokens, API calls, SMS) over several windows where the reader asks both how much and on what. Not for a single figure with no breakdown (use a metric card), and not as an invoice: it is built to say its numbers are estimates and floors.", "origin": { "project": "180Connect", "path": "src/components/dashboard/ai-spend-overview-preview.tsx" }, "credits": [ { "name": "Lucide loader-pinwheel icon (paths), animated as in Animate UI's icon", "url": "https://lucide.dev/icons/loader-pinwheel", "license": "ISC" }, { "name": "Animate UI (spin-on-hover icon behaviour)", "url": "https://animate-ui.com", "license": "MIT" } ] } }, { "name": "app-sidebar", "type": "registry:block", "title": "App sidebar", "description": "A frosted app rail: logo and name, labelled sections of nav rows with count pills, a slot for a checklist, a footer with a theme switch, and the account menu. It collapses to icons with tooltips on desktop and becomes a focus-trapping drawer on a phone.", "dependencies": [ "radix-ui", "motion", "lucide-react" ], "registryDependencies": [ "https://bash-ui-registry.vercel.app/r/account-menu.json" ], "files": [ { "path": "registry/items/app-sidebar/app-sidebar.tsx", "type": "registry:block" } ], "meta": { "kind": "pattern", "whenToUse": "Use as the persistent primary navigation of a signed-in app with five to fifteen destinations. Do not use for a marketing site's header, for in-page section tabs, or for settings sub-navigation inside a page.", "origin": { "project": "180Connect", "path": "src/components/sidebar.tsx" }, "credits": [ { "name": "Animate UI (Radix Tooltip, animated icons)", "url": "https://animate-ui.com", "license": "MIT" }, { "name": "AnimateIcons (row-hover icon animation)", "url": "https://animateicons.in", "license": "MIT" } ] } }, { "name": "app-store-badge", "type": "registry:ui", "title": "App store badge", "description": "A two-line App Store or Google Play badge in the theme's ink: the store's glyph, a small lead-in and the store's name, solid or outlined.", "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/items/app-store-badge/app-store-badge.tsx", "type": "registry:ui" } ], "meta": { "kind": "primitive", "whenToUse": "Use on a landing or download page to send people to an app's store listing; place one per store side by side. Apple's and Google's marketing guidelines may require their official badge artwork for store listings and adverts, so swap in the official badges where those guidelines apply.", "origin": { "project": "Steeze", "path": "src/components/ui/contact-form.jsx (App Store and Google Play image badges; redrawn in theme tokens for bash-ui)" }, "credits": [ { "name": "Simple Icons: Apple and Google Play glyphs (trademarks of Apple Inc. and Google LLC)", "url": "https://simpleicons.org", "license": "CC0-1.0" } ] } }, { "name": "arrow-button", "type": "registry:ui", "title": "Arrow button", "description": "A pill whose small dot blooms to fill it on hover while the label slides out and returns beside an up-right arrow in inverted colours, without the pill changing width.", "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [], "files": [ { "path": "registry/items/arrow-button/arrow-button.tsx", "type": "registry:ui" } ], "meta": { "kind": "primitive", "whenToUse": "Use for a page's main outbound call to action, such as Download or Sign up: solid in the hero, outlined in the navigation. Do not use for form submits or dense app toolbars; the bloom is a marketing flourish and loses its point when repeated.", "origin": { "project": "Steeze", "path": "src/components/ui/interactive-hover-button.jsx" }, "credits": [ { "name": "Magic UI, Interactive Hover Button (dot bloom and label swap; Steeze added the in-flow sizer, outline variant and up-right arrow)", "url": "https://magicui.design/docs/components/arrow-button", "license": "MIT" } ] } }, { "name": "breakdown-dial", "type": "registry:component", "title": "Breakdown dial", "description": "A card with a 270° dial of 42 ticks split between a few groups, the total in its centre, and a row per group with its count and share; hovering a group isolates its ticks.", "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [], "files": [ { "path": "registry/items/breakdown-dial/breakdown-dial.tsx", "type": "registry:component" } ], "meta": { "kind": "widget", "whenToUse": "Use to show how one whole divides into three to five ranked groups (priority bands, statuses) at a glance, with the exact counts beside it. Not for values over time or for more than about five groups; use a chart or a list for those.", "origin": { "project": "180Connect", "path": "src/components/dashboard/queue-quality-card.tsx" }, "credits": [] } }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "An animated checkbox: the box springs on hover and press, fills with the lead colour, and the tick draws itself in.", "dependencies": [ "radix-ui", "motion", "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "registry/items/checkbox/checkbox.tsx", "type": "registry:ui" } ], "meta": { "kind": "primitive", "whenToUse": "Use for any yes/no or multi-select choice instead of a native checkbox, which ignores theme tokens. Pair it with a