{ "name": "@barebase/style", "version": "0.2.1", "homepage": "https://bare.style/templates", "about": "Whole pages and sections composed only of components the framework already ships. Paste the html as it is: link src/core plus the files in links, and it renders. No template introduces a class of its own.", "mandatory": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "categories": [ { "id": "app", "label": "Application" }, { "id": "auth", "label": "Auth" }, { "id": "content", "label": "Content" }, { "id": "marketing", "label": "Marketing" } ], "tags": [ "accordion", "app", "article", "auth", "author", "avatar", "banner", "billing", "blog", "card", "changelog", "chart", "chat", "cluster", "comparison", "composer", "content", "cta", "dashboard", "data", "detail", "disclosure", "email", "empty", "empty-state", "error", "faq", "features", "filter", "five-plans", "footer", "form", "four-plans", "full-page", "grid", "hero", "inbox", "landing", "list", "listing", "locked", "login", "logo-cloud", "logs", "marketing", "messaging", "metrics", "navigation", "onboarding", "one-plan", "one-time-code", "pagination", "password-reset", "pricing", "profile", "prose", "quote", "release-notes", "roster", "search", "settings", "shell", "sign-in", "sign-up", "six-plans", "social-proof", "status", "stepper", "table", "table-of-contents", "tasks", "team", "testimonial", "thread", "three-plans", "timeline", "toggle", "two-factor", "two-plans" ], "templates": [ { "id": "activity-timeline", "title": "Activity timeline", "description": "A feed of who did what to which record and when, split by day, with a control to fetch older entries.", "category": "app", "categoryLabel": "Application", "kind": "block", "tags": [ "app", "timeline", "list", "data" ], "links": [ "src/app/flow-activity.css", "src/layout/stack.css", "src/layout/cluster.css", "src/data/divider.css", "src/forms/button.css", "src/utility/spacing.css", "src/utility/size.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-activity", "bs-activity__actor", "bs-activity__avatar", "bs-activity__body", "bs-activity__item", "bs-activity__item--new", "bs-activity__item--unread", "bs-activity__line", "bs-activity__main", "bs-activity__target", "bs-activity__time", "bs-btn", "bs-btn--secondary", "bs-btn--sm", "bs-cluster", "bs-cluster--start", "bs-divider", "bs-divider--label-start", "bs-divider--tight", "bs-divider__label", "bs-flow-none", "bs-gap-4", "bs-max-w-md", "bs-stack", "bs-text-h5" ], "html": "\n
\n

Activity

\n\n
\n Today\n
\n\n
    \n
  1. \n \n RA\n
    \n

    \n Rin Alvarez\n escalated\n INC-4821\n

    \n

    The retry budget is gone and settlement is queued behind it.

    \n \n
    \n
    2. \n\n
  2. \n SY\n
    \n

    \n Settlement monitor\n opened\n INC-4821\n

    \n

    Four consecutive gateway timeouts on settle-payouts.

    \n \n
    \n
    3. \n\n
  3. \n TF\n
    \n

    \n Tomas Ferro\n reassigned\n Ticket 1831\n to Finance\n

    \n \n
    \n
    4. \n\n
  4. \n MO\n
    \n

    \n Mira Okonkwo\n published\n Runbook: settlement timeouts\n

    \n

    Rewrote the first three checks after last week's incident review.

    \n \n
    \n
    5. \n
\n\n
\n Yesterday\n
\n\n
    \n
  1. \n RA\n
    \n

    \n Rin Alvarez\n closed\n Ticket 1817\n

    \n

    Seat count and invoice agree after the reconciliation run.

    \n \n
    \n
    2. \n\n
  2. \n SY\n
    \n

    \n Deploy bot\n released\n checkout-api 4.18\n

    \n \n
    \n
    3. \n
\n\n \n
\n \n
\n
", "href": "https://bare.style/templates#activity-timeline", "preview": "https://bare.style/preview/activity-timeline.html" }, { "id": "analytics-dashboard", "title": "Analytics dashboard", "description": "A board of four tiles whose 24h, 7d and 30d switch re-renders all of them: a time series, a ranking, a donut and a stacked bar.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "dashboard", "chart", "data", "metrics", "full-page" ], "links": [ "src/chart/dashboard.css", "src/chart/frame.css", "src/chart/line.css", "src/chart/gridlines.css", "src/chart/axis.css", "src/chart/mark.css", "src/chart/tooltip.css", "src/chart/crosshair.css", "src/chart/data-table.css", "src/chart/bar.css", "src/chart/donut.css", "src/chart/stacked-bar.css", "src/layout/container.css", "src/utility/spacing.css" ], "behaviour": [ "src/behaviour/chart-interact.js" ], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-bar-chart", "bs-bar-chart__bar", "bs-bar-chart__head", "bs-bar-chart__label", "bs-bar-chart__plot", "bs-bar-chart__row", "bs-bar-chart__scale", "bs-bar-chart__title", "bs-bar-chart__track", "bs-bar-chart__value", "bs-chart", "bs-chart-axis", "bs-chart-axis--edge", "bs-chart-axis__label", "bs-chart-axis__tick", "bs-chart-crosshair", "bs-chart-crosshair--dashed", "bs-chart-crosshair--x-only", "bs-chart-crosshair__x", "bs-chart-crosshair__y", "bs-chart-data", "bs-chart-data--compact", "bs-chart-data__caption", "bs-chart-grid", "bs-chart-line", "bs-chart-line__series", "bs-chart-line__svg", "bs-chart-mark", "bs-chart-mark--point", "bs-chart-mark__value", "bs-chart-marks", "bs-chart-marks--overlay", "bs-chart-tip", "bs-chart-tip__key", "bs-chart-tip__row", "bs-chart-tip__rows", "bs-chart-tip__title", "bs-chart-tip__value", "bs-chart__head", "bs-chart__meta", "bs-chart__plot", "bs-chart__readout", "bs-chart__title", "bs-dash", "bs-dash__bar", "bs-dash__delta", "bs-dash__delta--bad", "bs-dash__delta--down", "bs-dash__delta--good", "bs-dash__delta-base", "bs-dash__delta-mark", "bs-dash__figure", "bs-dash__grid", "bs-dash__heading", "bs-dash__period", "bs-dash__period-option", "bs-dash__tile", "bs-dash__tile--full", "bs-dash__tile--wide", "bs-dash__tile-body", "bs-dash__tile-head", "bs-dash__tile-note", "bs-dash__tile-title", "bs-donut", "bs-donut__centre", "bs-donut__dial", "bs-donut__item", "bs-donut__legend", "bs-donut__name", "bs-donut__ring", "bs-donut__swatch", "bs-donut__total", "bs-donut__unit", "bs-donut__value", "bs-py-8", "bs-stacked-bar", "bs-stacked-bar--rows", "bs-stacked-bar__head", "bs-stacked-bar__item", "bs-stacked-bar__label", "bs-stacked-bar__legend", "bs-stacked-bar__name", "bs-stacked-bar__part", "bs-stacked-bar__row", "bs-stacked-bar__swatch", "bs-stacked-bar__title", "bs-stacked-bar__total", "bs-stacked-bar__track", "bs-stacked-bar__value", "bs-wrap" ], "html": "\n
\n
\n
\n

Traffic

\n \n
\n \n \n \n
\n
\n\n \n
\n
\n
\n

Sessions

\n vs previous 7 days\n
\n

48,600

\n \n

\n \n \n \n 12.5% up\n from 43,200\n

\n
\n
\n
\n Sessions per day\n \n Sun: 8,240\n last 7 days, one sample per day\n
\n\n \n
\n
\n
\n \n \n \n \n \n
\n\n
    \n
  1. Mon 6,140
    2. \n
  2. Tue 6,620
    3. \n
  3. Wed 5,910
    4. \n
  4. Thu 7,180
    5. \n
  5. Fri 6,790
    6. \n
  6. Sat 7,720
    7. \n
  7. Sun 8,240
    8. \n
\n\n
    \n
  1. Mon 3,020
    2. \n
  2. Tue 3,240
    3. \n
  3. Wed 2,880
    4. \n
  4. Thu 3,760
    5. \n
  5. Fri 3,410
    6. \n
  6. Sat 4,180
    7. \n
  7. Sun 4,540
    8. \n
\n\n \n\n \n
\n\n
    \n
  • Mon
    • \n
  • Tue
    • \n
  • Wed
    • \n
  • Thu
    • \n
  • Fri
    • \n
  • Sat
    • \n
  • Sun
    • \n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Sessions and signed-in sessions, last 7 days, one sample per day
DaySessionsSigned in
Mon6,1403,020
Tue6,6203,240
Wed5,9102,880
Thu7,1803,760
Fri6,7903,410
Sat7,7204,180
Sun8,2404,540
\n
\n
\n
\n\n
\n
\n

Sessions by region

\n last 7 days\n
\n
\n \n
\n
\n Ranked by volume\n 0 to 20,000\n
\n
\n
\n eu-west\n
\n
\n
\n 19,100\n
\n
\n us-east\n
\n
\n
\n 14,300\n
\n
\n ap-south\n
\n
\n
\n 8,900\n
\n
\n sa-east\n
\n
\n
\n 4,300\n
\n
\n af-north\n
\n
\n
\n 2,000\n
\n
\n\n \n
\n
\n
\n\n
\n
\n

Where sessions came from

\n last 7 days\n
\n
\n \n
\n
\n
\n
\n 48,600\n sessions\n
\n
\n
    \n
  1. \n \n Direct\n 48%\n
    2. \n
  2. \n \n Search\n 31%\n
    3. \n
  3. \n \n Referral\n 14%\n
    4. \n
  4. \n \n Email\n 7%\n
    5. \n
\n
\n
\n
\n\n \n
\n
\n

Sessions by device

\n one row per day\n
\n
\n
\n
\n Phone, tablet and desktop\n 48,600\n
\n
\n Mon\n
\n
\n
\n
\n
\n 6,140\n
\n
\n Tue\n
\n
\n
\n
\n
\n 6,620\n
\n
\n Wed\n
\n
\n
\n
\n
\n 5,910\n
\n
\n Thu\n
\n
\n
\n
\n
\n 7,180\n
\n
\n Fri\n
\n
\n
\n
\n
\n 6,790\n
\n
\n Sat\n
\n
\n
\n
\n
\n 7,720\n
\n
\n Sun\n
\n
\n
\n
\n
\n 8,240\n
\n
    \n
  1. \n \n Phone\n 23,830\n
    2. \n
  2. \n \n Tablet\n 5,360\n
    3. \n
  3. \n \n Desktop\n 19,410\n
    4. \n
\n
\n
\n
\n\n \n\n \n
\n
\n
", "href": "https://bare.style/templates#analytics-dashboard", "preview": "https://bare.style/preview/analytics-dashboard.html" }, { "id": "author-card", "title": "Author card", "description": "The byline block under an article: portrait, one paragraph, what they write about, and two ways to follow.", "category": "content", "categoryLabel": "Content", "kind": "block", "tags": [ "author", "content", "card", "avatar", "profile" ], "links": [ "src/layout/sidebar.css", "src/layout/cluster.css", "src/layout/stack.css", "src/data/card.css", "src/data/avatar.css", "src/data/tag.css", "src/forms/button.css", "src/nav/navlink.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/size.css", "src/utility/typography.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-avatar", "bs-avatar--ring", "bs-avatar--xl", "bs-avatar__initials", "bs-btn", "bs-btn--secondary", "bs-btn--sm", "bs-caption", "bs-card", "bs-card__body", "bs-card__text", "bs-cluster", "bs-decoration-underline", "bs-fg-link", "bs-fg-muted", "bs-flow-none", "bs-gap-3", "bs-max-w-md", "bs-measure", "bs-navlink", "bs-navlink__icon", "bs-sidebar", "bs-sidebar--tight", "bs-sidebar__main", "bs-sidebar__side", "bs-stack", "bs-tag", "bs-tag--pill", "bs-tag-list", "bs-tag__label", "bs-text-h4" ], "html": "\n\n
\n
\n \n
\n
\n \n PR\n \n
\n\n
\n
\n

Priya Raman

\n

Head of platform - writing here since 2023

\n
\n\n

\n Runs the team that keeps the status pages up when the rest of the estate is not. Spent\n eight years on payment infrastructure before that, which is where the habit of writing\n the timeline down while it is still happening came from.\n

\n\n \n
    \n
  • Post-incident
    • \n
  • On-call
    • \n
  • Queues
    • \n
\n\n
\n All 14 posts\n \n \n \n \n \n Follow the feed\n \n
\n
\n
\n
\n
", "href": "https://bare.style/templates#author-card", "preview": "https://bare.style/preview/author-card.html" }, { "id": "billing", "title": "Billing page with a plan table", "description": "The billing screen: the plan in force, seat usage against its ceiling, a comparison of every plan, and the last few invoices.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "billing", "table", "shell", "pricing", "full-page" ], "links": [ "src/app/shell-frame.css", "src/app/shell-rail.css", "src/app/shell-topbar.css", "src/app/shell-sidebar.css", "src/app/shell-main.css", "src/app/metric-meter.css", "src/nav/sidebar-nav.css", "src/data/card.css", "src/data/table.css", "src/data/badge.css", "src/layout/stack.css", "src/layout/cluster.css", "src/forms/button.css", "src/utility/spacing.css", "src/utility/size.css", "src/utility/a11y.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-badge", "bs-badge--accent", "bs-badge--danger", "bs-badge--ok", "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-btn--sm", "bs-card", "bs-card__body", "bs-card__footer", "bs-card__header", "bs-card__subtitle", "bs-card__title", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-gap-2", "bs-gap-3", "bs-gap-5", "bs-max-w-lg", "bs-meter", "bs-meter--elevated", "bs-meter__gauge", "bs-meter__head", "bs-meter__label", "bs-meter__note", "bs-meter__value", "bs-mt-3", "bs-shell", "bs-shell-main", "bs-shell-main__content", "bs-shell-rail", "bs-shell-rail__foot", "bs-shell-rail__icon", "bs-shell-rail__item", "bs-shell-rail__item--current", "bs-shell-rail__label", "bs-shell-sidebar", "bs-shell-sidebar__body", "bs-shell-sidebar__close", "bs-shell-sidebar__header", "bs-shell-sidebar__title", "bs-shell-topbar", "bs-shell-topbar__actions", "bs-shell-topbar__icon", "bs-shell-topbar__title", "bs-shell-topbar__toggle", "bs-shell__scrim", "bs-sidenav", "bs-sidenav__link", "bs-sidenav__list", "bs-stack", "bs-table", "bs-table--hover", "bs-table--nowrap", "bs-table--zebra", "bs-table-scroll", "bs-table__num", "bs-text-h3", "bs-text-h5", "bs-visually-hidden", "bs-visually-hidden-focusable" ], "html": "
\n \n\n
\n Skip to the work area\n \n \n \n \n \n

Billing

\n
\n All invoices\n
\n
\n\n \n\n \n\n
\n
\n
\n

Billing

\n\n
\n
\n
\n

Team

\n Current plan\n
\n

$24 per seat per month, billed on the first. Next charge 1 September.

\n
\n\n
\n \n
\n
\n Seats in use\n 17 of 20\n
\n \n

Elevated. Above 20 seats the next invoice moves to the Scale rate automatically.

\n
\n
\n\n \n
\n\n
\n

What each plan includes

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Every plan, and what changes between them
LimitStarterTeamScale
Price per seat, per month$9$24$48
Seats included320Unlimited
Pipeline runs per day2005,000Unmetered
Audit log kept for7 days1 year2 years
Single sign-onNoYesYes
Support answer time3 days1 day4 hours
\n
\n
\n\n
\n

Recent invoices

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
The last three invoices on this workspace
InvoicePeriodAmountStatusReceipt
INV-01841 to 31 August$408.00PaidDownload INV-0184
INV-01691 to 31 July$384.00PaidDownload INV-0169
INV-01511 to 30 June$384.00RefundedDownload INV-0151
\n
\n
\n
\n
\n
\n
", "href": "https://bare.style/templates#billing", "preview": "https://bare.style/preview/billing.html" }, { "id": "blog-index", "title": "Blog index", "description": "A whole listing page: title, a featured post, a grid of cards with date, reading time and topic, and pagination.", "category": "content", "categoryLabel": "Content", "kind": "page", "tags": [ "blog", "content", "listing", "card", "grid", "pagination", "full-page" ], "links": [ "src/layout/container.css", "src/layout/grid.css", "src/layout/stack.css", "src/data/card.css", "src/data/tag.css", "src/nav/pagination.css", "src/utility/size.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/typography.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-caption", "bs-card", "bs-card--interactive", "bs-card--spacious", "bs-card__body", "bs-card__link", "bs-card__text", "bs-eyebrow", "bs-fg-muted", "bs-fg-secondary", "bs-flow-none", "bs-gap-3", "bs-grid", "bs-grid--bare", "bs-h-full", "bs-lead", "bs-measure", "bs-mt-7", "bs-mt-8", "bs-pagination", "bs-pagination__gap", "bs-pagination__link", "bs-pagination__link--next", "bs-pagination__link--prev", "bs-pagination__list", "bs-py-8", "bs-stack", "bs-tag", "bs-tag--accent", "bs-tag--pill", "bs-tag-list", "bs-tag__label", "bs-text-h1", "bs-text-h3", "bs-text-h4", "bs-wrap" ], "html": "\n
\n
\n

Writing

\n

Notes on running things that break

\n

\n Post-incident write-ups, the occasional opinion about on-call, and what we changed in the\n product because of both.\n

\n
\n\n
\n
\n
    \n
  • Featured
    • \n
  • Post-incident
    • \n
\n

\n The quiet hour: what a stalled queue looked like from the outside\n

\n \n

\n For fifty-one minutes our writes succeeded and our reads returned yesterday. Nothing alerted,\n because every check we had was asking the wrong question. Here is the timeline, the wrong\n assumption, and the four checks that exist now.\n

\n

\n - 11 minutes - by Priya Raman\n

\n
\n
\n\n \n \n\n \n
", "href": "https://bare.style/templates#blog-index", "preview": "https://bare.style/preview/blog-index.html" }, { "id": "blog-post", "title": "Blog post with a table of contents", "description": "A whole article page: breadcrumb, byline, a sticky contents rail, prose with a table, a code sample and a pull quote.", "category": "content", "categoryLabel": "Content", "kind": "page", "tags": [ "blog", "content", "article", "prose", "table-of-contents", "full-page" ], "links": [ "src/layout/container.css", "src/layout/sidebar.css", "src/layout/cluster.css", "src/nav/breadcrumb.css", "src/nav/sidebar-nav.css", "src/prose/prose.css", "src/prose/code.css", "src/prose/quote.css", "src/data/avatar.css", "src/data/tag.css", "src/data/divider.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/display.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-avatar", "bs-avatar__initials", "bs-breadcrumb", "bs-breadcrumb__current", "bs-breadcrumb__item", "bs-breadcrumb__link", "bs-breadcrumb__list", "bs-caption", "bs-cluster", "bs-d-block", "bs-divider", "bs-fg-muted", "bs-fg-secondary", "bs-gap-3", "bs-lead", "bs-mt-6", "bs-pre", "bs-prose", "bs-prose__scroll", "bs-py-7", "bs-quote", "bs-quote--pull", "bs-quote__attribution", "bs-sidebar", "bs-sidebar__main", "bs-sidebar__side", "bs-sidenav", "bs-sidenav--sticky", "bs-sidenav__link", "bs-sidenav__list", "bs-sidenav__title", "bs-tag", "bs-tag--pill", "bs-tag-list", "bs-tag__label", "bs-wrap", "bs-wrap--lg" ], "html": "\n\n
\n \n\n
\n
\n \n
\n\n
\n
\n
\n

The quiet hour: what a stalled queue looked like from the outside

\n

\n For fifty-one minutes every write succeeded and every read returned yesterday. Nothing\n alerted, because every check we had was asking the wrong question.\n

\n\n
\n \n PR\n \n \n Priya Raman\n \n Head of platform - - 11 minutes\n \n \n
\n\n \n
    \n
  • Post-incident
    • \n
  • Queues
    • \n
  • Alerting
    • \n
\n
\n\n
\n\n

What happened

\n

\n At 02:14 a routine index rebuild took a lock on the table our projection worker writes\n into. The worker did what it was told to do when it cannot write: it kept the message,\n waited, and tried again. It did that for fifty-one minutes without once reporting an\n error, because from its own point of view nothing had failed yet.\n

\n

\n Everything downstream stayed up. The API answered, the dashboard rendered, health checks\n were green in three regions. What customers saw was a site that worked perfectly and\n showed them the state of the world as it had been just before two in the morning.\n

\n\n

Why nothing alerted

\n

\n Our checks measured three things: is the process running, is it consuming messages, and is\n the error rate low. All three were healthy. A worker that is patiently retrying is\n running, is holding its messages, and is producing no errors at all.\n

\n

What we were not measuring was the only thing a reader cares about:

\n
    \n
  • How old is the newest record a customer can actually see
    • \n
  • How long has the oldest unacknowledged message been waiting
    • \n
  • Is the gap between those two growing
    • \n
\n\n
\n
\n

\n A health check that asks whether the machinery is turning cannot tell you that it is\n turning on the spot.\n

\n
\n
\n From the internal write-up, Incident review: stalled projections\n
\n
\n\n

The timeline

\n

\n All times are in UTC, taken from the worker's own log rather than reconstructed\n afterwards.\n

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
What we knew, and when
TimeEventVisible to customers
02:14Index rebuild starts and takes the write lockNothing
02:15Projection worker begins retrying, silentlyReads start going stale
02:52A customer emails support about an old figureStale by 37 minutes
03:01On-call paged by hand, incident openedStatus page updated
03:06Rebuild cancelled, lock released, queue drainsReads correct within 90 seconds
\n
\n\n

The check we added

\n

\n One number, published by the worker on every loop, whether or not it managed to write.\n Freshness is the age of the newest committed record, and it is the thing a customer would\n complain about if they could see it.\n

\n\n 
async function reportFreshness(db, metrics) {\n  const newest = await db.newestCommittedAt('projections');\n  const ageSeconds = (Date.now() - newest) / 1000;\n\n  // Published on every loop, including the loops where the write failed.\n  // A worker that goes quiet is as interesting as one reporting a big number.\n  metrics.gauge('projection.freshness_seconds', ageSeconds);\n}
\n\n

\n The alert fires when freshness passes 120 seconds for two consecutive minutes. In the\n incident above it would have paged at 02:17, thirty-five minutes before the customer\n email, and about forty-four minutes before we actually found out.\n

\n\n

What changes

\n

\n Three things, all of them cheap, none of them clever. Index rebuilds now run behind a\n lease the worker can see, so it can log that it is blocked rather than retrying into the\n dark. Freshness is on the same dashboard as the error rate. And the runbook asks one\n question first: what is the oldest thing a customer can see right now.\n

\n

\n If you take one thing from this, take the shape of the mistake rather than the fix. We\n measured the parts we owned and not the answer we give. Every check was true and the page\n was still wrong.\n

\n
\n
\n
\n
", "href": "https://bare.style/templates#blog-post", "preview": "https://bare.style/preview/blog-post.html" }, { "id": "changelog", "title": "Changelog page", "description": "Releases dated newest first on a timeline, each tagged as added, changed or fixed, with the note that says why.", "category": "content", "categoryLabel": "Content", "kind": "page", "tags": [ "changelog", "content", "timeline", "release-notes", "full-page" ], "links": [ "src/layout/container.css", "src/layout/stack.css", "src/layout/cluster.css", "src/app/flow-timeline.css", "src/data/badge.css", "src/data/divider.css", "src/nav/navlink.css", "src/utility/spacing.css", "src/utility/color.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-badge", "bs-badge--accent", "bs-badge--danger", "bs-badge--ok", "bs-caption", "bs-cluster", "bs-cluster--baseline", "bs-divider", "bs-eyebrow", "bs-fg-muted", "bs-fg-secondary", "bs-flow-none", "bs-gap-3", "bs-lead", "bs-mt-6", "bs-mt-8", "bs-navlink", "bs-navlink--prose", "bs-py-8", "bs-stack", "bs-text-h1", "bs-timeline", "bs-timeline__body", "bs-timeline__content", "bs-timeline__item", "bs-timeline__marker", "bs-timeline__time", "bs-timeline__title", "bs-wrap", "bs-wrap--md" ], "html": "\n
\n
\n

Changelog

\n

What we shipped

\n

\n Everything customer-facing, newest first. Nothing here needs an upgrade on your side, and\n nothing here changed a price.\n

\n

\n Subscribe to this page as a feed\n

\n
\n\n
\n\n
    \n
  1. \n \n
    \n
    \n

    Subscribers can now follow a single service

    \n Added\n
    \n

    \n A subscriber picks the services they depend on instead of taking every notice the page\n sends. Existing subscribers keep everything until they choose otherwise, so nobody stops\n hearing from you by accident.\n

    \n \n
    \n
    2. \n\n
  2. \n \n
    \n
    \n

    Incident updates keep the time they were written

    \n Changed\n
    \n

    \n Editing an update no longer moves it to the top of the timeline. The original time stands\n and the edit is noted underneath, so a review afterwards reads in the order things\n actually happened.\n

    \n \n
    \n
    3. \n\n
  3. \n \n
    \n
    \n

    Certificate renewal failures now page someone

    \n Fixed\n
    \n

    \n A renewal on a custom domain could fail quietly and keep failing. It now raises an alert\n on the first failure and emails the account owner on the third.\n

    \n \n
    \n
    4. \n\n
  4. \n \n
    \n
    \n

    Templates for the first update

    \n Added\n
    \n

    \n Save the wording your team already agreed on and open an incident from it. Placeholders\n for the service, the impact and the time of the next update are filled in for you.\n

    \n \n
    \n
    5. \n\n
  5. \n \n
    \n
    \n

    Uptime is counted one way everywhere

    \n Changed\n
    \n

    \n Partial degradation now counts as partial in the dashboard, the monthly report and the\n API, using the definition written on the reporting page. Historic figures were\n recalculated and may differ slightly from what you saw before.\n

    \n \n
    \n
    6. \n\n
  6. \n \n
    \n
    \n

    Long incident titles no longer overflow on a phone

    \n Fixed\n
    \n

    \n A title with a long unbroken token could push the public page sideways at narrow widths.\n It wraps now, and the subscribe control stays where it belongs.\n

    \n \n
    \n
    7. \n
\n\n

\n Older entries live in the archive.\n Security notices are published separately, on the security page.\n

\n
", "href": "https://bare.style/templates#changelog", "preview": "https://bare.style/preview/changelog.html" }, { "id": "check-email", "title": "Check your email screen", "description": "The wait state after a link is sent: what was sent, where, when it expires, how to send it again and how to correct the address.", "category": "auth", "categoryLabel": "Auth", "kind": "page", "tags": [ "auth", "sign-in", "status", "full-page" ], "links": [ "src/app/auth-screen.css", "src/app/auth-state.css", "src/forms/button.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-auth", "bs-auth-state", "bs-auth-state--panel", "bs-auth-state--sent", "bs-auth-state__actions", "bs-auth-state__body", "bs-auth-state__mark", "bs-auth-state__meta", "bs-auth-state__text", "bs-auth-state__title", "bs-auth__alt", "bs-auth__brand", "bs-auth__card", "bs-auth__inner", "bs-auth__legal", "bs-auth__mark", "bs-auth__wordmark", "bs-btn", "bs-btn--block", "bs-btn--secondary" ], "html": "
\n
\n
\n \n \n \n \n \n \n BareBase\n
\n\n
\n \n
\n \n \n \n \n \n \n
\n

Check your email

\n

\n We sent a sign-in link to ada@example.com. It expires in ten minutes and works once.\n If it is not there, it is usually in the spam folder.\n

\n
\n
\n \n
\n

Wrong address? Start over

\n
\n
\n\n

Cannot reach that inbox? Talk to support

\n\n \n
\n
", "href": "https://bare.style/templates#check-email", "preview": "https://bare.style/preview/check-email.html" }, { "id": "cta-banner", "title": "Call to action banner", "description": "A closing panel: one heading, one sentence, the action, and the two facts that answer the hesitation.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "cta", "marketing", "banner", "card" ], "links": [ "src/layout/container.css", "src/layout/cluster.css", "src/layout/stack.css", "src/data/card.css", "src/data/icon.css", "src/forms/button.css", "src/utility/spacing.css", "src/utility/typography.css", "src/utility/color.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-card", "bs-card--spacious", "bs-card__body", "bs-card__footer", "bs-cluster", "bs-cluster--bare", "bs-cluster--between", "bs-fg-muted", "bs-fg-secondary", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-gap-5", "bs-gap-6", "bs-icon", "bs-icon--ok", "bs-icon--sm", "bs-icon--xs", "bs-measure", "bs-py-8", "bs-stack", "bs-text-h3", "bs-wrap" ], "html": "\n
\n
\n
\n
\n
\n

Put your first incident page up today

\n

\n It takes about ten minutes, and the next time something breaks you will already have\n the link to send.\n

\n
\n\n
\n \n Start free\n \n \n \n \n \n Talk to us\n
\n
\n
\n\n \n
\n
", "href": "https://bare.style/templates#cta-banner", "preview": "https://bare.style/preview/cta-banner.html" }, { "id": "dashboard-empty", "title": "Empty dashboard shell", "description": "The whole application frame with nothing in it yet: rail, topbar, drawer navigation and a work area holding one first-run empty state.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "dashboard", "shell", "empty-state", "navigation", "full-page" ], "links": [ "src/app/shell-frame.css", "src/app/shell-rail.css", "src/app/shell-topbar.css", "src/app/shell-sidebar.css", "src/app/shell-main.css", "src/nav/sidebar-nav.css", "src/data/empty.css", "src/forms/button.css", "src/utility/a11y.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-btn--sm", "bs-empty", "bs-empty--framed", "bs-empty__actions", "bs-empty__icon", "bs-empty__text", "bs-empty__title", "bs-shell", "bs-shell-main", "bs-shell-main__content", "bs-shell-rail", "bs-shell-rail__foot", "bs-shell-rail__icon", "bs-shell-rail__item", "bs-shell-rail__item--current", "bs-shell-rail__label", "bs-shell-sidebar", "bs-shell-sidebar__body", "bs-shell-sidebar__close", "bs-shell-sidebar__footer", "bs-shell-sidebar__header", "bs-shell-sidebar__title", "bs-shell-topbar", "bs-shell-topbar__actions", "bs-shell-topbar__icon", "bs-shell-topbar__title", "bs-shell-topbar__toggle", "bs-shell__scrim", "bs-sidenav", "bs-sidenav__group", "bs-sidenav__link", "bs-sidenav__list", "bs-sidenav__list--nested", "bs-visually-hidden-focusable" ], "html": "\n
\n \n\n
\n \n Skip to the work area\n \n \n \n \n \n \n

Pipelines

\n
\n \n
\n
\n\n \n\n \n \n\n \n
\n
\n
\n \n \n \n \n

No pipelines yet

\n

\n A pipeline reads from a source on a schedule and writes somewhere you choose. Build one\n from scratch, or start from the template that matches your warehouse.\n

\n
\n \n Start from a template\n
\n
\n
\n
\n
", "href": "https://bare.style/templates#dashboard-empty", "preview": "https://bare.style/preview/dashboard-empty.html" }, { "id": "email-client", "title": "Email client", "description": "A folder rail, an inbox list and a reading pane with a message header, collapsed quoted reply, labels, and a compose form.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "email", "inbox", "list", "detail", "navigation", "form", "full-page" ], "links": [ "src/layout/container.css", "src/layout/stack.css", "src/layout/cluster.css", "src/layout/sidebar.css", "src/nav/sidebar-nav.css", "src/nav/navlink.css", "src/app/collab-queue-item.css", "src/app/accordion.css", "src/app/collab-composer.css", "src/data/avatar.css", "src/data/badge.css", "src/data/tag.css", "src/data/divider.css", "src/data/description-list.css", "src/forms/field.css", "src/forms/label.css", "src/forms/input.css", "src/forms/textarea.css", "src/forms/button.css", "src/utility/spacing.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-accordion", "bs-accordion--flush", "bs-accordion__item", "bs-accordion__panel", "bs-accordion__summary", "bs-avatar", "bs-avatar__initials", "bs-badge", "bs-badge--count", "bs-btn", "bs-btn--ghost", "bs-btn--primary", "bs-btn--secondary", "bs-btn--sm", "bs-caption", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-composer", "bs-composer__bar", "bs-composer__field", "bs-composer__hint", "bs-composer__label", "bs-composer__send", "bs-composer__send-label", "bs-composer__tool", "bs-composer__tools", "bs-divider", "bs-dl", "bs-dl--columns", "bs-dl__desc", "bs-dl__term", "bs-field", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-gap-4", "bs-gap-5", "bs-input", "bs-label", "bs-mt-2", "bs-mt-3", "bs-mt-4", "bs-mt-5", "bs-navlink", "bs-queue-item", "bs-queue-item--dense", "bs-queue-item--selected", "bs-queue-item--unread", "bs-queue-item__meta", "bs-queue-item__snippet", "bs-queue-item__time", "bs-queue-item__title", "bs-queue-item__unread", "bs-sidebar", "bs-sidebar__main", "bs-sidebar__side", "bs-sidenav", "bs-sidenav__group", "bs-sidenav__link", "bs-sidenav__list", "bs-sidenav__list--nested", "bs-sidenav__title", "bs-stack", "bs-stack--bare", "bs-stack--flush", "bs-tag", "bs-tag--pill", "bs-tag-list", "bs-text-h3", "bs-text-h5", "bs-text-h6", "bs-textarea", "bs-wrap" ], "html": "
\n
\n
\n

Mail

\n \n
\n\n \n
\n
\n \n
\n\n
\n
\n
\n

Inbox

\n \n \n
\n\n
\n
\n
\n

June ledger, the two accounts with no default

\n\n
\n
\n \n RA\n \n
\n

Rin Alvarez

\n

rin.alvarez@example.com

\n
\n
\n \n
\n\n
\n
To
\n
you, tomas.ferro@example.com
\n
Labels
\n
\n
    \n
  • Billing
    • \n
  • Migration
    • \n
\n
\n
\n
\n\n
\n\n
\n

\n The mapping is attached. Fourteen accounts have a currency default the importer can\n read straight off, so those rows fill themselves once the job runs.\n

\n

\n Two do not have one at all: Northline Freight and Ardsley Print. Neither has taken a\n payment since the column existed, so there is nothing to infer from. Somebody has to\n choose, and I would rather it was finance than me.\n

\n\n \n
\n
\n Show quoted text\n
\n

On 1 Aug, Tomas Ferro wrote:

\n

\n The importer needs the account default before it can fill the column. Can you\n pull the mapping and say which accounts have nothing to fall back on?\n

\n
\n
\n
\n
\n\n
\n \n \n \n \n
\n
\n\n
\n

New message

\n
\n
\n \n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n
\n \n
\n

Saved to drafts as you type.

\n \n
\n
\n
\n
\n
\n
\n
\n
\n
", "href": "https://bare.style/templates#email-client", "preview": "https://bare.style/preview/email-client.html" }, { "id": "empty-state", "title": "Empty state", "description": "A framed empty panel that says what is missing, why the panel is blank, and gives two ways out of it.", "category": "app", "categoryLabel": "Application", "kind": "block", "tags": [ "app", "empty", "data" ], "links": [ "src/data/empty.css", "src/forms/button.css", "src/data/kbd.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 1440 ], "classes": [ "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-empty", "bs-empty--framed", "bs-empty__actions", "bs-empty__icon", "bs-empty__text", "bs-empty__title", "bs-kbd", "bs-kbd--sm", "bs-kbd-chord" ], "html": "\n
\n \n \n \n \n \n

No scheduled jobs yet

\n

\n A schedule runs a job on a timer and keeps the last 90 days of its runs. Nothing is scheduled in\n this workspace, so there is nothing to show here. Import an existing crontab or start from a\n blank schedule.\n

\n
\n \n \n
\n \n

\n Or press CtrlK and type \"schedule\".\n

\n
", "href": "https://bare.style/templates#empty-state", "preview": "https://bare.style/preview/empty-state.html" }, { "id": "error-page", "title": "Something went wrong page", "description": "A whole failure page: what broke, a reference the support desk can look up, and three routes back out of it.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "error", "empty", "full-page" ], "links": [ "src/layout/center.css", "src/layout/stack.css", "src/data/empty.css", "src/forms/button.css", "src/prose/code.css", "src/nav/navlink.css", "src/utility/spacing.css", "src/utility/typography.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-center", "bs-center--viewport", "bs-code", "bs-empty", "bs-empty__actions", "bs-empty__icon", "bs-empty__text", "bs-empty__title", "bs-flow-none", "bs-gap-5", "bs-mx-auto", "bs-navlink", "bs-navlink--prose", "bs-stack", "bs-text-caption", "bs-text-center" ], "html": "
\n \n
\n \n
\n \n \n \n \n \n \n

This page could not be loaded

\n

\n The workspace service answered, and then stopped part way through. Nothing you were working\n on has been lost, and no change was saved from this attempt. Trying again usually works.\n

\n
\n \n Back to the dashboard\n
\n
\n\n \n

\n Quote this reference if you contact us:\n e4f2-91c7-40b8\n

\n

\n Check the service status\n or\n write to support.\n

\n
\n
", "href": "https://bare.style/templates#error-page", "preview": "https://bare.style/preview/error-page.html" }, { "id": "faq", "title": "FAQ accordion", "description": "Six questions as native disclosures, one open at a time, with the route to a human underneath.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "faq", "marketing", "accordion", "disclosure" ], "links": [ "src/app/accordion.css", "src/layout/container.css", "src/layout/stack.css", "src/nav/navlink.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/typography.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-accordion", "bs-accordion--exclusive", "bs-accordion__item", "bs-accordion__panel", "bs-accordion__summary", "bs-accordion__title", "bs-eyebrow", "bs-fg-secondary", "bs-flow-none", "bs-gap-3", "bs-mt-6", "bs-navlink", "bs-navlink--prose", "bs-py-9", "bs-stack", "bs-text-h2", "bs-wrap", "bs-wrap--md" ], "html": "\n
\n
\n

Questions

\n

Before you sign up

\n
\n\n
\n
\n \n

Where does the status page actually run?

\n \n
\n

\n On separate infrastructure from the product it reports on, in a different region and with\n a different provider. A status page that shares a failure domain with the service is a\n status page that goes quiet exactly when it is needed.\n

\n
\n
\n\n
\n \n

Can we use our own domain?

\n \n
\n

\n Yes, from the Team plan. Point a subdomain at us with a CNAME record and the certificate\n is issued and renewed for you. Most teams use status followed by their own domain.\n

\n
\n
\n\n
\n \n

What happens to our history if we leave?

\n \n
\n

\n Export every incident, update and subscriber list as JSON or CSV, at any time, without\n asking us. The export is the same data the API returns, so a migration is a script rather\n than a support ticket.\n

\n
\n
\n\n
\n \n

Do subscribers count towards our plan?

\n \n
\n

\n No. Only the people who can publish do. A page with forty thousand subscribers and two\n responders is a Starter plan.\n

\n
\n
\n\n
\n \n

Is there an API?

\n \n
\n

\n Everything the dashboard can do, the API can do, including opening an incident and posting\n an update. Most teams wire it to their alerting so the first update is published before\n anyone has opened a browser.\n

\n
\n
\n\n
\n \n

How do we cancel?

\n \n
\n

\n From the billing screen, in one click, with no call and no retention offer. The page keeps\n answering in read-only mode until the end of the period you paid for.\n

\n
\n
\n
\n\n

\n Still unsure? Ask us directly and a\n person answers, usually the same day.\n

\n
", "href": "https://bare.style/templates#faq", "preview": "https://bare.style/preview/faq.html" }, { "id": "feature-grid", "title": "Feature grid", "description": "A section heading over six cards, each an icon, a short title and the sentence that says what the feature does.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "features", "marketing", "grid", "card" ], "links": [ "src/layout/container.css", "src/layout/grid.css", "src/layout/stack.css", "src/data/card.css", "src/data/icon.css", "src/utility/size.css", "src/utility/spacing.css", "src/utility/typography.css", "src/utility/color.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-card", "bs-card__body", "bs-card__text", "bs-card__title", "bs-eyebrow", "bs-fg-secondary", "bs-flow-none", "bs-gap-3", "bs-grid", "bs-grid--bare", "bs-h-full", "bs-icon", "bs-icon--lg", "bs-icon--muted", "bs-lead", "bs-mt-4", "bs-mt-8", "bs-py-9", "bs-stack", "bs-text-h2", "bs-wrap" ], "html": "\n
\n
\n

What you get

\n

Everything an incident needs, and nothing it does not

\n

\n Written for the person on call at two in the morning, who has one hand free and no patience\n for a form.\n

\n
\n\n \n
", "href": "https://bare.style/templates#feature-grid", "preview": "https://bare.style/preview/feature-grid.html" }, { "id": "footer", "title": "Footer with columns", "description": "Four link columns, a short brand note, the legal row, and three icon-only links that carry their own names.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "footer", "marketing", "navigation", "grid" ], "links": [ "src/layout/container.css", "src/layout/grid.css", "src/layout/stack.css", "src/layout/cluster.css", "src/nav/navlink.css", "src/data/divider.css", "src/data/icon.css", "src/forms/button.css", "src/app/control-icon-button.css", "src/utility/spacing.css", "src/utility/typography.css", "src/utility/color.css", "src/utility/border.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-border-t-1", "bs-btn", "bs-caption", "bs-cluster", "bs-cluster--bare", "bs-cluster--between", "bs-divider", "bs-fg-muted", "bs-fg-secondary", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-gap-4", "bs-gap-7", "bs-grid", "bs-icon", "bs-icon-btn", "bs-icon-btn--bare", "bs-icon-btn-row", "bs-measure", "bs-mt-2", "bs-mt-5", "bs-mt-8", "bs-navlink", "bs-navlink--muted", "bs-py-8", "bs-stack", "bs-stack--bare", "bs-text-h5", "bs-weight-heading", "bs-weight-medium", "bs-wrap" ], "html": "\n\n", "href": "https://bare.style/templates#footer", "preview": "https://bare.style/preview/footer.html" }, { "id": "forgot-password", "title": "Forgot password screen", "description": "The screen that asks for one address and sends a reset link, with the expiry stated and a route back to sign in.", "category": "auth", "categoryLabel": "Auth", "kind": "page", "tags": [ "auth", "password-reset", "form", "full-page" ], "links": [ "src/app/auth-screen.css", "src/app/auth-form.css", "src/forms/input.css", "src/forms/button.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-auth", "bs-auth-form", "bs-auth-form__actions", "bs-auth-form__field", "bs-auth-form__hint", "bs-auth-form__label", "bs-auth-form__note", "bs-auth__alt", "bs-auth__brand", "bs-auth__card", "bs-auth__head", "bs-auth__inner", "bs-auth__legal", "bs-auth__mark", "bs-auth__subtitle", "bs-auth__title", "bs-auth__wordmark", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-input" ], "html": "
\n
\n
\n \n \n \n \n \n \n BareBase\n
\n\n
\n
\n

Reset your password

\n

Give us the address on the account and we will send a link that sets a new one.

\n
\n\n
\n
\n \n \n

The link works once and expires after fifteen minutes.

\n
\n\n
\n \n
\n\n \n

If that address has an account, the link is on its way. We do not say either way.

\n
\n
\n\n

Remembered it? Back to sign in

\n\n \n
\n
", "href": "https://bare.style/templates#forgot-password", "preview": "https://bare.style/preview/forgot-password.html" }, { "id": "hero", "title": "Hero with a call to action", "description": "A landing section head: eyebrow, headline, one paragraph, the action that matters and a quieter second one.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "hero", "marketing", "cta", "landing" ], "links": [ "src/layout/container.css", "src/layout/stack.css", "src/layout/cluster.css", "src/forms/button.css", "src/data/badge.css", "src/data/icon.css", "src/utility/spacing.css", "src/utility/typography.css", "src/utility/color.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-badge", "bs-badge--subtle", "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-cluster", "bs-cluster--center", "bs-display", "bs-eyebrow", "bs-fg-muted", "bs-fg-secondary", "bs-flow-none", "bs-gap-3", "bs-gap-5", "bs-icon", "bs-icon--sm", "bs-lead", "bs-mt-2", "bs-py-9", "bs-stack", "bs-stack--center", "bs-text-center", "bs-wrap" ], "html": "\n
\n
\n

Status and incident reporting

\n\n

\n Tell customers what happened before they have to ask\n

\n\n

\n One page per incident, a feed anyone can subscribe to, and a history that still reads\n honestly a year after the fire is out.\n

\n\n
\n \n Start free\n \n \n \n \n \n See a live status page\n
\n\n

\n No card\n Free for one page and three responders. Cancel from the dashboard.\n

\n
\n
", "href": "https://bare.style/templates#hero", "preview": "https://bare.style/preview/hero.html" }, { "id": "inbox-queue", "title": "Inbox queue", "description": "A work queue beside its folders: status, subject, snippet, who has it, when it moved, and the actions on each row.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "inbox", "list", "data", "full-page" ], "links": [ "src/nav/navlink.css", "src/layout/container.css", "src/layout/sidebar.css", "src/layout/stack.css", "src/layout/cluster.css", "src/nav/sidebar-nav.css", "src/app/collab-queue-item.css", "src/app/collab-assignee.css", "src/data/avatar.css", "src/forms/button.css", "src/utility/spacing.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 1440 ], "classes": [ "bs-assignee", "bs-assignee--sm", "bs-assignee--unassigned", "bs-assignee__avatar", "bs-assignee__name", "bs-avatar", "bs-avatar--sm", "bs-avatar__initials", "bs-btn", "bs-btn--ghost", "bs-btn--secondary", "bs-btn--sm", "bs-caption", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-flow-none", "bs-gap-3", "bs-gap-5", "bs-navlink", "bs-queue-item", "bs-queue-item--unread", "bs-queue-item__actions", "bs-queue-item__meta", "bs-queue-item__snippet", "bs-queue-item__status", "bs-queue-item__status--closed", "bs-queue-item__status--escalated", "bs-queue-item__status--open", "bs-queue-item__status--snoozed", "bs-queue-item__status-mark", "bs-queue-item__time", "bs-queue-item__title", "bs-queue-item__unread", "bs-sidebar", "bs-sidebar__main", "bs-sidebar__side", "bs-sidenav", "bs-sidenav__group", "bs-sidenav__link", "bs-sidenav__list", "bs-sidenav__list--nested", "bs-sidenav__title", "bs-stack", "bs-stack--bare", "bs-stack--flush", "bs-text-h3", "bs-wrap" ], "html": "
\n
\n
\n

Support inbox

\n

42 open, 6 escalated

\n
\n\n
\n \n
\n \n
\n\n
\n \n
    \n
  • \n \n \n Escalated\n \n \n

    \n Refund not applied after the plan upgrade\n Unread\n

    \n

    \n Charged twice on the 3rd, and the second charge is still showing as pending on my statement.\n

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    • \n\n
  • \n \n \n Open\n \n

    \n Export finishes but the file is empty\n Unread\n

    \n

    \n The invoice export says it completed, and the download is a header row and nothing else.\n

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    • \n\n
  • \n \n \n Open\n \n

    \n Can we move billing to a purchase order\n

    \n

    \n Finance will not approve a card for the annual plan. We need an invoice with 30 day terms.\n

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    • \n\n
  • \n \n \n Snoozed\n \n

    \n Webhook signature fails on retries only\n

    \n

    \n Waiting on the customer to confirm which secret their retry worker is signing with.\n

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    • \n\n
  • \n \n \n Closed\n \n

    \n Seat count wrong after removing a member\n

    \n

    \n Resolved by a reconciliation run. The seat count and the invoice now agree.\n

    \n
    \n \n \n
    \n
    \n \n
    \n
    • \n
\n
\n
\n
\n
", "href": "https://bare.style/templates#inbox-queue", "preview": "https://bare.style/preview/inbox-queue.html" }, { "id": "live-chat", "title": "Live chat", "description": "A conversation list beside a thread: day separators, an unread marker, delivery states, a typing line, and a composer with an attachment.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "chat", "messaging", "thread", "list", "composer", "full-page" ], "links": [ "src/layout/container.css", "src/layout/stack.css", "src/layout/cluster.css", "src/layout/sidebar.css", "src/app/collab-queue-item.css", "src/app/collab-thread.css", "src/app/collab-message.css", "src/app/collab-composer.css", "src/app/collab-presence-dot.css", "src/data/avatar.css", "src/data/divider.css", "src/forms/textarea.css", "src/forms/button.css", "src/nav/navlink.css", "src/utility/spacing.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-avatar", "bs-avatar--sm", "bs-avatar__initials", "bs-btn", "bs-btn--ghost", "bs-btn--sm", "bs-cluster", "bs-cluster--between", "bs-composer", "bs-composer__attachment", "bs-composer__attachment-name", "bs-composer__attachment-remove", "bs-composer__attachment-size", "bs-composer__attachments", "bs-composer__bar", "bs-composer__field", "bs-composer__hint", "bs-composer__label", "bs-composer__send", "bs-composer__send-label", "bs-composer__tool", "bs-composer__tools", "bs-divider", "bs-flow-none", "bs-gap-3", "bs-gap-4", "bs-gap-5", "bs-message", "bs-message--consecutive", "bs-message--failed", "bs-message--own", "bs-message--pending", "bs-message--system", "bs-message__author", "bs-message__avatar", "bs-message__body", "bs-message__foot", "bs-message__head", "bs-message__status", "bs-message__time", "bs-mt-2", "bs-navlink", "bs-presence", "bs-presence--online", "bs-presence__dot", "bs-presence__label", "bs-queue-item", "bs-queue-item--dense", "bs-queue-item--selected", "bs-queue-item--unread", "bs-queue-item__meta", "bs-queue-item__snippet", "bs-queue-item__time", "bs-queue-item__title", "bs-queue-item__unread", "bs-sidebar", "bs-sidebar__main", "bs-sidebar__side", "bs-stack", "bs-stack--bare", "bs-stack--flush", "bs-text-h3", "bs-text-h6", "bs-textarea", "bs-thread", "bs-thread__divider", "bs-thread__label", "bs-thread__list", "bs-thread__more", "bs-thread__typing", "bs-thread__typing-dots", "bs-thread__unread", "bs-wrap" ], "html": "
\n
\n

Messages

\n\n \n
\n
\n

Conversations

\n \n
    \n
  • \n

    \n \n Rin Alvarez\n

    \n

    I have the mapping, sending it over now.

    \n
    \n \n
    \n
    • \n\n
  • \n

    \n Billing team\n 3 unread\n

    \n

    Tomas: the sandbox key rotates tonight, so hold the migration.

    \n
    \n \n
    \n
    • \n\n
  • \n

    \n Mira Okonkwo\n

    \n

    Thanks, that clears the last blocker on my side.

    \n
    \n \n
    \n
    • \n\n
  • \n

    \n Support rota\n

    \n

    Kai: I am on until six, then it is back to the queue.

    \n
    \n \n
    \n
    • \n
\n
\n\n
\n
\n
\n \n RA\n \n
\n

Rin Alvarez

\n \n \n \n Online\n \n
\n
\n \n
\n\n
\n\n \n
\n \n\n
Yesterday
\n\n
    \n
  1. \n
    \n
    \n \n RA\n \n
    \n
    \n Rin Alvarez\n \n
    \n
    \n

    Billing granted read access, so the June rows can be filled from the account default.

    \n
    \n
    \n
    2. \n\n
  2. \n \n
    \n
    \n

    Mira Okonkwo joined the conversation

    \n
    \n
    \n
    3. \n
\n\n \n
\n 2 unread\n
\n\n
Today
\n\n
    \n
  1. \n
    \n
    \n \n RA\n \n
    \n
    \n Rin Alvarez\n \n
    \n
    \n

    I have the mapping. It is fourteen accounts, and two of them have no default at all.

    \n
    \n
    \n
    2. \n\n
  2. \n \n
    \n
    \n \n
    \n
    \n

    Sending it over now.

    \n
    \n
    \n
    3. \n\n
  3. \n
    \n
    \n \n JD\n \n
    \n
    \n You\n \n
    \n
    \n

    Got it. I will fill the two blanks by hand and note them on the task.

    \n
    \n
    \n Read 09:45\n
    \n
    \n
    4. \n\n
  4. \n \n
    \n
    \n \n JD\n \n
    \n
    \n You\n \n
    \n
    \n

    One more thing, is the sandbox key still rotating tonight?

    \n
    \n
    \n Sending\n
    \n
    \n
    5. \n\n
  5. \n \n
    \n
    \n \n JD\n \n
    \n
    \n You\n \n
    \n
    \n

    Attaching the sheet so you have the two blanks in front of you.

    \n
    \n
    \n Not delivered\n \n
    \n
    \n
    6. \n
\n\n

\n \n \n \n Rin is typing\n

\n
\n\n
\n
    \n
  • \n june-account-defaults.csv\n 18 kB\n \n
    • \n
\n\n
\n \n \n
\n\n
\n
\n \n \n
\n

Enter sends. Shift and Enter make a line.

\n \n
\n
\n
\n
\n
\n
", "href": "https://bare.style/templates#live-chat", "preview": "https://bare.style/preview/live-chat.html" }, { "id": "locked", "title": "Account locked screen", "description": "The refusal state: why sign-in stopped, when it opens again, the two ways out, and where to go if neither works.", "category": "auth", "categoryLabel": "Auth", "kind": "page", "tags": [ "auth", "status", "locked", "full-page" ], "links": [ "src/app/auth-screen.css", "src/app/auth-state.css", "src/forms/button.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-auth", "bs-auth-state", "bs-auth-state--locked", "bs-auth-state--panel", "bs-auth-state__actions", "bs-auth-state__body", "bs-auth-state__mark", "bs-auth-state__meta", "bs-auth-state__text", "bs-auth-state__title", "bs-auth__alt", "bs-auth__brand", "bs-auth__card", "bs-auth__inner", "bs-auth__legal", "bs-auth__mark", "bs-auth__wordmark", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-btn--secondary" ], "html": "
\n
\n
\n \n \n \n \n \n \n BareBase\n
\n\n
\n \n
\n \n \n \n \n \n \n \n
\n

This account is locked

\n

\n Ten sign-in attempts failed in a row, so we stopped accepting them. It opens again at\n 16:40, or straight away with a link sent to the address on the account.\n

\n
\n
\n \n Reset the password instead\n
\n

Not you doing this? Review recent activity

\n
\n
\n\n

Still stuck? Talk to support

\n\n \n
\n
", "href": "https://bare.style/templates#locked", "preview": "https://bare.style/preview/locked.html" }, { "id": "log-viewer", "title": "Log viewer", "description": "A bounded log tail with level filters, a text search, a follow switch and a live count of what survived the filter.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "logs", "filter", "data", "full-page" ], "links": [ "src/layout/container.css", "src/layout/stack.css", "src/layout/cluster.css", "src/app/metric-log-view.css", "src/app/command-filter-bar.css", "src/app/command-chip.css", "src/app/command-search.css", "src/forms/switch.css", "src/forms/button.css", "src/utility/a11y.css", "src/utility/spacing.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-btn", "bs-btn--secondary", "bs-btn--sm", "bs-caption", "bs-chip", "bs-chip--on", "bs-chip__check", "bs-chip__count", "bs-chip__label", "bs-cluster", "bs-cluster--between", "bs-filter-bar", "bs-filter-bar__clear", "bs-filter-bar__count", "bs-filter-bar__label", "bs-filter-bar__set", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-gap-5", "bs-log-view", "bs-log-view--tall", "bs-log-view__level", "bs-log-view__list", "bs-log-view__message", "bs-log-view__row", "bs-log-view__row--debug", "bs-log-view__row--error", "bs-log-view__row--info", "bs-log-view__row--warn", "bs-log-view__time", "bs-py-8", "bs-search", "bs-search__clear", "bs-search__field", "bs-search__icon", "bs-search__input", "bs-stack", "bs-switch", "bs-switch__control", "bs-switch__label", "bs-switch__track", "bs-text-h3", "bs-visually-hidden", "bs-wrap" ], "html": "\n
\n
\n
\n

checkout-api, instance 3

\n

Tailing the last 2,000 lines. Older lines are in the archive.

\n
\n\n
\n \n
\n
\n
\n \n \n \n \n \n \n
\n
\n
\n\n
\n

Levels

\n
\n \n \n \n \n
\n

149 of 2,000 lines

\n \n
\n\n
\n \n \n Download tail\n
\n
\n\n \n
\n
    \n
  1. \n \n ERROR\n settle: upstream gateway timed out after 30s, run 4812\n
    2. \n
  2. \n \n WARN\n settle: retry 3 of 3 for batch b-91f4\n
    3. \n
  3. \n \n WARN\n pool: 18 of 20 connections in use, queueing\n
    4. \n \n
  4. \n \n INFO\n settle: batch b-91f4 opened with 1,180 accounts\n
    5. \n
  5. \n \n INFO\n config: reloaded 41 keys from the settings service\n
    6. \n
  6. \n \n ERROR\n export: invoice writer refused 12 rows, schema mismatch on tax_rate\n
    7. \n
  7. \n \n WARN\n export: falling back to the previous rate table\n
    8. \n
  8. \n \n DEBUG\n export: rate table checksum 4f2a, expected 9c81\n
    9. \n
  9. \n \n INFO\n scheduler: starting refresh-tax-rates, run 4804\n
    10. \n
  10. \n \n ERROR\n refresh-tax-rates: provider returned 503, no cached table for FR\n
    11. \n
\n
\n
\n
", "href": "https://bare.style/templates#log-viewer", "preview": "https://bare.style/preview/log-viewer.html" }, { "id": "login", "title": "Login screen", "description": "A whole sign-in page: brand, email and password, one recovery route, one way to sign up.", "category": "auth", "categoryLabel": "Auth", "kind": "page", "tags": [ "auth", "login", "form", "full-page" ], "links": [ "src/layout/center.css", "src/data/card.css", "src/data/divider.css", "src/forms/field.css", "src/forms/label.css", "src/forms/input.css", "src/forms/help.css", "src/forms/checkbox.css", "src/forms/button.css", "src/layout/stack.css", "src/layout/cluster.css", "src/nav/navlink.css", "src/utility/spacing.css", "src/utility/typography.css", "src/utility/color.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1280 ], "classes": [ "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-card", "bs-card__body", "bs-center", "bs-center--viewport", "bs-checkbox", "bs-checkbox__control", "bs-checkbox__label", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-divider", "bs-divider--labelled", "bs-divider__label", "bs-fg-accent", "bs-field", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-gap-5", "bs-gap-6", "bs-help", "bs-input", "bs-label", "bs-mx-auto", "bs-my-5", "bs-navlink", "bs-navlink--prose", "bs-stack", "bs-text-caption", "bs-text-center", "bs-text-h3", "bs-text-small" ], "html": "\n
\n
\n
\n \n \n \n \n \n

Sign in

\n

Use the address your workspace was invited on.

\n
\n\n
\n
\n
\n
\n \n \n \n
\n\n
\n
\n \n \n Forgot it\n
\n \n

At least 12 characters.

\n
\n\n \n\n \n
\n\n
\n or\n
\n\n \n Continue with single sign-on\n
\n
\n\n

\n \n No account yet? Create one.\n

\n
\n
", "href": "https://bare.style/templates#login", "preview": "https://bare.style/preview/login.html" }, { "id": "logo-cloud", "title": "Logo cloud", "description": "A quiet row of customer marks under one line of context, wrapping to as many rows as the width allows.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "logo-cloud", "marketing", "social-proof", "cluster" ], "links": [ "src/layout/container.css", "src/layout/cluster.css", "src/layout/grid.css", "src/layout/stack.css", "src/data/icon.css", "src/utility/spacing.css", "src/utility/color.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-caption", "bs-cluster", "bs-fg-muted", "bs-fg-secondary", "bs-flow-none", "bs-gap-2", "bs-gap-5", "bs-gap-6", "bs-grid", "bs-grid--bare", "bs-icon", "bs-icon--lg", "bs-py-8", "bs-stack", "bs-weight-medium", "bs-wrap" ], "html": "\n
\n
\n

\n Trusted on the bad days by teams at\n

\n\n \n\n

\n Named with permission. Logos stay the property of their owners.\n

\n
\n
", "href": "https://bare.style/templates#logo-cloud", "preview": "https://bare.style/preview/logo-cloud.html" }, { "id": "onboarding", "title": "Onboarding stepper", "description": "A first-run setup flow: the steps done and still to come, the form for the step in progress, and the two ways out of it.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "onboarding", "stepper", "form", "full-page" ], "links": [ "src/app/flow-stepper.css", "src/data/card.css", "src/forms/field.css", "src/forms/label.css", "src/forms/input.css", "src/forms/help.css", "src/forms/select.css", "src/forms/radio.css", "src/forms/button.css", "src/layout/center.css", "src/layout/stack.css", "src/layout/cluster.css", "src/utility/spacing.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-card", "bs-card__body", "bs-card__footer", "bs-card__header", "bs-card__subtitle", "bs-card__title", "bs-center", "bs-center--viewport", "bs-cluster", "bs-cluster--between", "bs-dropdown", "bs-dropdown__control", "bs-field", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-gap-4", "bs-gap-6", "bs-help", "bs-input", "bs-label", "bs-py-6", "bs-radio", "bs-radio__control", "bs-radio__label", "bs-stack", "bs-stepper", "bs-stepper__body", "bs-stepper__marker", "bs-stepper__note", "bs-stepper__step", "bs-stepper__title", "bs-text-h3" ], "html": "\n
\n
\n
\n

Set up your workspace

\n

Three short steps. You can change any of it later in settings.

\n
\n\n \n
    \n
  1. \n \n \n Name the workspace\n Completed\n \n
    2. \n
  2. \n \n \n Connect a source\n In progress\n \n
    3. \n
  3. \n \n \n Invite the people who need it\n Not started\n \n
    4. \n
\n\n
\n
\n

Connect a source

\n

Read-only credentials are enough. Nothing is written back to it.

\n
\n\n
\n
\n Where does the data live\n \n \n \n
\n\n
\n \n \n

Allow our range through the firewall first, or the check below will time out.

\n
\n\n
\n \n \n \n \n
\n
\n\n \n
\n
\n
", "href": "https://bare.style/templates#onboarding", "preview": "https://bare.style/preview/onboarding.html" }, { "id": "permission-denied", "title": "Permission denied page", "description": "A whole 403 page: what was refused, which account was refused it, who can grant it, and a way to ask.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "error", "auth", "empty", "full-page" ], "links": [ "src/layout/center.css", "src/layout/stack.css", "src/layout/cluster.css", "src/data/empty.css", "src/data/card.css", "src/data/description-list.css", "src/data/avatar.css", "src/forms/button.css", "src/nav/navlink.css", "src/utility/spacing.css", "src/utility/typography.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-avatar", "bs-avatar--sm", "bs-avatar__initials", "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-card", "bs-card--compact", "bs-card__body", "bs-center", "bs-center--viewport", "bs-cluster", "bs-cluster--tight", "bs-dl", "bs-dl--rows", "bs-dl__desc", "bs-dl__term", "bs-empty", "bs-empty__actions", "bs-empty__icon", "bs-empty__text", "bs-empty__title", "bs-flow-none", "bs-gap-5", "bs-mx-auto", "bs-navlink", "bs-navlink--prose", "bs-stack", "bs-text-caption", "bs-text-center" ], "html": "
\n \n
\n
\n \n \n \n \n \n \n

You do not have access to billing

\n

\n Billing is limited to workspace owners and to members with the finance role. Your account is\n signed in and working normally, so nothing else on the workspace is affected.\n

\n
\n \n Back to the dashboard\n
\n
\n\n
\n
\n \n
\n
\n
Signed in as
\n
\n \n \n TF\n \n Tomas Ferro\n \n
\n
\n
\n
Role
\n
Member
\n
\n
\n
Workspace
\n
Northbridge Operations
\n
\n
\n
Who can grant this
\n
Rin Alvarez and two other owners
\n
\n
\n
\n
\n\n \n

\n On the wrong account? Switch account.\n

\n
\n
", "href": "https://bare.style/templates#permission-denied", "preview": "https://bare.style/preview/permission-denied.html" }, { "id": "pricing-card", "title": "Pricing card", "description": "One plan with its price, what is included, and the action that buys it.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "pricing", "marketing", "card", "cta" ], "links": [ "src/data/card.css", "src/data/badge.css", "src/data/icon.css", "src/data/list.css", "src/forms/button.css", "src/layout/stack.css", "src/layout/cluster.css", "src/utility/spacing.css", "src/utility/typography.css", "src/utility/color.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1280 ], "classes": [ "bs-badge", "bs-badge--accent", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-caption", "bs-card", "bs-card__body", "bs-card__footer", "bs-card__header", "bs-card__subtitle", "bs-card__title", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-fg-secondary", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-icon", "bs-icon--muted", "bs-icon--ok", "bs-icon--sm", "bs-leading-none", "bs-list", "bs-list--plain", "bs-list__item", "bs-mt-5", "bs-mx-auto", "bs-nums-tabular", "bs-stack", "bs-text-body", "bs-text-center", "bs-text-display", "bs-weight-body" ], "html": "
\n
\n
\n

Team

\n Most picked\n
\n

For a product team that ships together.

\n
\n\n
\n \n

\n $24\n per seat, per month\n

\n\n \n
\n\n \n
", "href": "https://bare.style/templates#pricing-card", "preview": "https://bare.style/preview/pricing-card.html" }, { "id": "pricing-comparison", "title": "Pricing comparison table", "description": "Three tiers as columns and their features as rows, with a price, a marked plan and a buy action in every column.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "pricing", "marketing", "table", "comparison", "cta", "three-plans" ], "links": [ "src/layout/container.css", "src/layout/stack.css", "src/data/table.css", "src/data/badge.css", "src/data/icon.css", "src/forms/button.css", "src/utility/spacing.css", "src/utility/typography.css", "src/utility/color.css", "src/utility/display.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-badge", "bs-badge--accent", "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-btn--sm", "bs-caption", "bs-d-block", "bs-eyebrow", "bs-fg-muted", "bs-fg-secondary", "bs-flow-none", "bs-gap-3", "bs-icon", "bs-icon--muted", "bs-icon--ok", "bs-icon--sm", "bs-lead", "bs-leading-none", "bs-ms-2", "bs-mt-2", "bs-mt-4", "bs-mt-7", "bs-nums-tabular", "bs-py-9", "bs-stack", "bs-table", "bs-table--hover", "bs-table--sticky-col", "bs-table--zebra", "bs-table-scroll", "bs-table__num", "bs-text-h2", "bs-text-h3", "bs-text-start", "bs-weight-body", "bs-wrap" ], "html": "\n
\n
\n

Plans

\n

What each plan includes

\n

\n Every plan carries the full incident timeline. What changes is how many people can publish\n and how far back the history goes.\n

\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Plan comparison, priced per month
Feature\n Starter\n $9\n per month\n \n Team\n Most picked\n $29\n per month\n \n Business\n $89\n per month\n
Status pages1325
People who can publish315Unlimited
Incident history kept90 days2 yearsForever
Email and webhook subscribers\n \n \n \n \n \n
Your own domain and certificate\n \n \n \n \n \n
Single sign-on and provisioning\n \n \n \n \n \n
Answer time on a support ticketNext working day4 hours1 hour, day and night
Pick a planStarterTeamBusiness
\n
\n\n \n

\n Prices exclude tax. Yearly billing takes two months off any plan.\n

\n
", "href": "https://bare.style/templates#pricing-comparison", "preview": "https://bare.style/preview/pricing-comparison.html" }, { "id": "pricing-five-plans", "title": "Pricing, five plans", "description": "The awkward count, broken three then two on purpose, with the last two given the wider tracks the contract plans need.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "pricing", "marketing", "card", "cta", "five-plans" ], "links": [ "src/layout/container.css", "src/layout/grid.css", "src/layout/stack.css", "src/layout/cluster.css", "src/data/card.css", "src/data/badge.css", "src/data/icon.css", "src/data/list.css", "src/forms/button.css", "src/utility/flex.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/typography.css", "src/utility/border.css", "src/utility/display.css", "src/utility/grid.css", "src/utility/layout-responsive.css", "src/utility/a11y.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 430, 768, 1024, 1440 ], "classes": [ "bs-badge", "bs-badge--accent", "bs-badge--outline", "bs-balance", "bs-border-2", "bs-border-accent", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-btn--secondary", "bs-card", "bs-card__body", "bs-card__footer", "bs-card__header", "bs-card__subtitle", "bs-card__title", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-cols-1", "bs-d-grid", "bs-eyebrow", "bs-fg-secondary", "bs-flex-nowrap", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-grid", "bs-grid--rows", "bs-grid--tight", "bs-icon", "bs-icon--muted", "bs-icon--ok", "bs-icon--sm", "bs-lead", "bs-leading-none", "bs-lg-cols-6", "bs-lg-span-2", "bs-lg-span-3", "bs-list", "bs-list--plain", "bs-list__item", "bs-measure-lead", "bs-mt-6", "bs-nums-tabular", "bs-pb-0", "bs-pt-0", "bs-sm-cols-2", "bs-sm-span-full", "bs-stack", "bs-text-body", "bs-text-h1", "bs-text-h2", "bs-visually-hidden", "bs-wrap" ], "html": "\n
\n
\n

Pricing

\n

Five plans, and the top two are conversations

\n

The first three you can start on this afternoon with a card. The last two exist because procurement, invoicing and a signed agreement are real work.

\n
\n\n
\n \n
\n
\n
\n

Hobby

\n
\n

Learning the tool on something that is not work.

\n
\n\n
\n

\n $0\n per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n \n Included: 2 projects\n
    • \n
  • \n \n \n \n Included: Community support\n
    • \n
  • \n \n \n \n Not included: Custom domains\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Indie

\n
\n

One person shipping something people pay for.

\n
\n\n
\n

\n $9\n per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: 10 projects\n
    • \n
  • \n \n \n \n Included: Custom domains\n
    • \n
  • \n \n \n \n Not included: More than one editor\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Studio, the recommended plan

\n Recommended\n
\n

A small team with a client list.

\n
\n\n
\n

\n $29\n per editor, per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Unlimited projects and editors\n
    • \n
  • \n \n \n \n Included: Client review links\n
    • \n
  • \n \n \n \n Included: History kept for two years\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Agency

\n Invoiced\n
\n

Several teams billing several clients, and one finance department that wants one invoice.

\n
\n\n
\n

\n $89\n per editor, per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Everything in Studio, across an unlimited number of workspaces\n
    • \n
  • \n \n \n \n Included: Single sign-on, SCIM provisioning and an audit export\n
    • \n
  • \n \n \n \n Included: Annual invoicing in USD, EUR or GBP, net 30\n
    • \n
  • \n \n \n \n Not included: A dedicated single-tenant region\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Enterprise

\n Contract\n
\n

Security review, a data processing agreement, and a region you choose.

\n
\n\n
\n

\n Custom\n from 25 editors, billed yearly\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Everything in Agency, plus a dedicated single-tenant region\n
    • \n
  • \n \n \n \n Included: A named support engineer and a 99.95 percent uptime commitment\n
    • \n
  • \n \n \n \n Included: Signed DPA, security questionnaire and penetration test summary\n
    • \n
  • \n \n \n \n Included: Onboarding run with your team, not a recorded video\n
    • \n
\n
\n\n \n
\n
\n
", "href": "https://bare.style/templates#pricing-five-plans", "preview": "https://bare.style/preview/pricing-five-plans.html" }, { "id": "pricing-four-plans", "title": "Pricing, four plans", "description": "One column on a phone, two by two from 480px, four across from 1024px, with every row of the cards sharing a track.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "pricing", "marketing", "card", "cta", "four-plans" ], "links": [ "src/layout/container.css", "src/layout/grid.css", "src/layout/stack.css", "src/layout/cluster.css", "src/data/card.css", "src/data/badge.css", "src/data/icon.css", "src/data/list.css", "src/forms/button.css", "src/utility/flex.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/typography.css", "src/utility/border.css", "src/utility/display.css", "src/utility/grid.css", "src/utility/layout-responsive.css", "src/utility/a11y.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 430, 768, 1024, 1440 ], "classes": [ "bs-badge", "bs-badge--accent", "bs-balance", "bs-border-2", "bs-border-accent", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-card", "bs-card__body", "bs-card__footer", "bs-card__header", "bs-card__subtitle", "bs-card__title", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-cols-1", "bs-d-grid", "bs-eyebrow", "bs-fg-secondary", "bs-flex-nowrap", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-grid", "bs-grid--rows", "bs-grid--tight", "bs-icon", "bs-icon--muted", "bs-icon--ok", "bs-icon--sm", "bs-lead", "bs-leading-none", "bs-lg-cols-4", "bs-list", "bs-list--plain", "bs-list__item", "bs-measure-lead", "bs-mt-5", "bs-mt-6", "bs-mx-auto", "bs-nums-tabular", "bs-pb-0", "bs-pt-0", "bs-sm-cols-2", "bs-stack", "bs-text-body", "bs-text-center", "bs-text-h1", "bs-text-h2", "bs-visually-hidden", "bs-wrap" ], "html": "\n
\n
\n

Pricing

\n

Four steps, and you can stop at any of them

\n

Usage is measured in monitored endpoints. Nothing is metered by the request, so a bad afternoon does not become a bill.

\n
\n\n
\n
\n
\n
\n

Free

\n
\n

One service, checked every five minutes.

\n
\n\n
\n

\n $0\n per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n \n Included: 1 endpoint\n
    • \n
  • \n \n \n \n Included: Email alerts\n
    • \n
  • \n \n \n \n Not included: Status page\n
    • \n
  • \n \n \n \n Not included: On-call rotations\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Starter

\n
\n

A side project that people other than you depend on.

\n
\n\n
\n

\n $15\n per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: 10 endpoints, checked every minute\n
    • \n
  • \n \n \n \n Included: One public status page\n
    • \n
  • \n \n \n \n Included: Slack and webhook alerts\n
    • \n
  • \n \n \n \n Not included: On-call rotations\n
    • \n
\n
\n\n \n
\n\n \n
\n
\n
\n

Growth, the recommended plan

\n Recommended\n
\n

A product with customers who notice an outage.

\n
\n\n
\n

\n $45\n per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: 50 endpoints, checked every 30 seconds\n
    • \n
  • \n \n \n \n Included: On-call rotations and escalation\n
    • \n
  • \n \n \n \n Included: Status pages on your own domain\n
    • \n
  • \n \n \n \n Included: 13 months of history\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Scale

\n
\n

Several teams, several regions, one on-call schedule.

\n
\n\n
\n

\n $120\n per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: 250 endpoints, checked every 10 seconds\n
    • \n
  • \n \n \n \n Included: Checks from nine regions\n
    • \n
  • \n \n \n \n Included: Single sign-on and audit export\n
    • \n
  • \n \n \n \n Included: Invoicing and a signed DPA\n
    • \n
\n
\n\n \n
\n
\n\n

Prices exclude VAT. Endpoints can be added or removed on any day of the cycle.

\n
", "href": "https://bare.style/templates#pricing-four-plans", "preview": "https://bare.style/preview/pricing-four-plans.html" }, { "id": "pricing-one-plan", "title": "Pricing, one plan", "description": "A single plan set beside the argument for it, so one card is not stranded in the middle of a wide screen.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "pricing", "marketing", "card", "cta", "one-plan" ], "links": [ "src/layout/container.css", "src/layout/split.css", "src/layout/stack.css", "src/layout/cluster.css", "src/data/card.css", "src/data/badge.css", "src/data/icon.css", "src/data/list.css", "src/forms/button.css", "src/utility/flex.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/a11y.css", "src/utility/align.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 430, 768, 1024, 1440 ], "classes": [ "bs-badge", "bs-badge--subtle", "bs-balance", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-caption", "bs-card", "bs-card__body", "bs-card__footer", "bs-card__header", "bs-card__subtitle", "bs-card__title", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-eyebrow", "bs-fg-secondary", "bs-flex-nowrap", "bs-flow-none", "bs-gap-1", "bs-gap-2", "bs-gap-3", "bs-gap-4", "bs-icon", "bs-icon--muted", "bs-icon--ok", "bs-icon--sm", "bs-lead", "bs-leading-none", "bs-list", "bs-list--divided", "bs-list--plain", "bs-list__item", "bs-list__meta", "bs-list__title", "bs-measure-lead", "bs-mt-3", "bs-mt-4", "bs-mt-5", "bs-nums-tabular", "bs-self-start", "bs-split", "bs-stack", "bs-text-body", "bs-text-display", "bs-text-h2", "bs-visually-hidden", "bs-wrap", "bs-wrap--lg" ], "html": "\n
\n
\n
\n

Pricing

\n

One plan, and everything is in it

\n

\n No feature held back for a tier that costs four times more. You pay per editor, viewers are\n free and unlimited, and the bill is the same in every region we sell in.\n

\n\n \n
    \n
  • \n
    \n

    Editors are the only thing counted

    \n

    Anyone who can open a document and comment on it costs nothing.

    \n
    \n
    • \n
  • \n
    \n

    Move up and down the same month

    \n

    Seats added mid-cycle are prorated to the day. Seats removed are credited.

    \n
    \n
    • \n
  • \n
    \n

    Leaving takes one click

    \n

    Cancel from the billing page. Your data exports as JSON and stays reachable for 90 days.

    \n
    \n
    • \n
\n
\n\n \n
\n
\n
\n

Studio

\n 14 days free\n
\n

Everything the product does, for every team that uses it.

\n
\n\n
\n \n

\n $18\n per editor, per month\n

\n\n
    \n
  • \n \n \n \n \n Included: Unlimited documents, projects and viewers\n
    • \n
  • \n \n \n \n Included: Version history kept for two years\n
    • \n
  • \n \n \n \n Included: Single sign-on, SCIM and audit export\n
    • \n
  • \n \n \n \n Included: Support answered by an engineer within one working day\n
    • \n
  • \n \n \n \n Not included: Self-hosted install on your own hardware\n
    • \n
\n\n

Billed monthly. Yearly billing is available on request and saves two months.

\n
\n\n \n
\n
\n
", "href": "https://bare.style/templates#pricing-one-plan", "preview": "https://bare.style/preview/pricing-one-plan.html" }, { "id": "pricing-six-plans", "title": "Pricing, six plans", "description": "Six plans as three by two rather than six across, because a sixth of a screen is not a readable column at any width.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "pricing", "marketing", "card", "cta", "six-plans" ], "links": [ "src/layout/container.css", "src/layout/grid.css", "src/layout/stack.css", "src/layout/cluster.css", "src/data/card.css", "src/data/badge.css", "src/data/icon.css", "src/data/list.css", "src/forms/button.css", "src/utility/flex.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/typography.css", "src/utility/border.css", "src/utility/display.css", "src/utility/grid.css", "src/utility/layout-responsive.css", "src/utility/a11y.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 430, 768, 1024, 1440 ], "classes": [ "bs-badge", "bs-badge--accent", "bs-badge--outline", "bs-balance", "bs-border-2", "bs-border-accent", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-card", "bs-card__body", "bs-card__footer", "bs-card__header", "bs-card__subtitle", "bs-card__title", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-cols-1", "bs-d-grid", "bs-eyebrow", "bs-fg-secondary", "bs-flex-nowrap", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-grid", "bs-grid--rows", "bs-grid--tight", "bs-icon", "bs-icon--muted", "bs-icon--ok", "bs-icon--sm", "bs-lead", "bs-leading-none", "bs-lg-cols-3", "bs-list", "bs-list--plain", "bs-list__item", "bs-measure-lead", "bs-mt-5", "bs-mt-6", "bs-mx-auto", "bs-nums-tabular", "bs-pb-0", "bs-pt-0", "bs-sm-cols-2", "bs-stack", "bs-text-body", "bs-text-center", "bs-text-h1", "bs-text-h2", "bs-visually-hidden", "bs-wrap" ], "html": "\n
\n
\n

Pricing

\n

Six plans, because the middle of the market is not one shape

\n

The first three are a card and a click. The last three exist because somebody in legal has to read something first.

\n
\n\n
\n
\n
\n
\n

Free

\n
\n

Enough to find out whether this is the tool.

\n
\n\n
\n

\n $0\n per user, per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n \n Included: Up to 3 users\n
    • \n
  • \n \n \n \n Included: 7 days of history\n
    • \n
  • \n \n \n \n Not included: Integrations\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Basic

\n
\n

A team that has stopped experimenting.

\n
\n\n
\n

\n $8\n per user, per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Unlimited users\n
    • \n
  • \n \n \n \n Included: 90 days of history\n
    • \n
  • \n \n \n \n Not included: Automation rules\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Standard

\n
\n

Two or three teams sharing one backlog.

\n
\n\n
\n

\n $16\n per user, per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Everything in Basic\n
    • \n
  • \n \n \n \n Included: Automation rules and integrations\n
    • \n
  • \n \n \n \n Not included: Single sign-on\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Plus, the recommended plan

\n Recommended\n
\n

The first plan an IT department signs off.

\n
\n\n
\n

\n $28\n per user, per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Everything in Standard\n
    • \n
  • \n \n \n \n Included: Single sign-on and SCIM\n
    • \n
  • \n \n \n \n Included: Unlimited history\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Premium

\n Invoiced\n
\n

Uptime that somebody is accountable for.

\n
\n\n
\n

\n $48\n per user, per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Everything in Plus\n
    • \n
  • \n \n \n \n Included: 99.9 percent uptime commitment\n
    • \n
  • \n \n \n \n Included: Annual invoicing, net 30\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Enterprise

\n Contract\n
\n

Security review first, purchase order second.

\n
\n\n
\n

\n Custom\n from 100 users, billed yearly\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Everything in Premium\n
    • \n
  • \n \n \n \n Included: A named support engineer\n
    • \n
  • \n \n \n \n Included: Signed DPA and a residency choice\n
    • \n
\n
\n\n \n
\n
\n\n

Prices exclude VAT. Every plan can move up or down on any day of the cycle, prorated to the day.

\n
", "href": "https://bare.style/templates#pricing-six-plans", "preview": "https://bare.style/preview/pricing-six-plans.html" }, { "id": "pricing-three-plans", "title": "Pricing, three plans with a period switch", "description": "The classic three-up with the middle plan featured, plus a monthly and yearly switch that states what yearly saves.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "pricing", "marketing", "card", "cta", "toggle", "three-plans" ], "links": [ "src/layout/container.css", "src/layout/grid.css", "src/layout/stack.css", "src/layout/cluster.css", "src/data/card.css", "src/data/badge.css", "src/data/icon.css", "src/data/list.css", "src/forms/button.css", "src/app/control-segmented.css", "src/utility/flex.css", "src/utility/size.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/typography.css", "src/utility/border.css", "src/utility/display.css", "src/utility/grid.css", "src/utility/layout-responsive.css", "src/utility/a11y.css" ], "behaviour": [ "src/behaviour/pricing-period.js" ], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 430, 768, 1024, 1440 ], "classes": [ "bs-badge", "bs-badge--accent", "bs-balance", "bs-border-2", "bs-border-accent", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-card", "bs-card__body", "bs-card__footer", "bs-card__header", "bs-card__subtitle", "bs-card__title", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-cols-1", "bs-d-grid", "bs-eyebrow", "bs-fg-secondary", "bs-flex-nowrap", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-grid", "bs-grid--rows", "bs-icon", "bs-icon--muted", "bs-icon--ok", "bs-icon--sm", "bs-lead", "bs-leading-none", "bs-list", "bs-list--plain", "bs-list__item", "bs-max-w-3xs", "bs-md-cols-3", "bs-me-auto", "bs-measure-lead", "bs-mt-3", "bs-mt-5", "bs-nums-tabular", "bs-pb-0", "bs-pt-0", "bs-segmented", "bs-segmented__input", "bs-segmented__label", "bs-segmented__legend", "bs-segmented__option", "bs-segmented__thumb", "bs-stack", "bs-text-body", "bs-text-h1", "bs-text-h2", "bs-visually-hidden", "bs-wrap" ], "html": "\n
\n
\n

Pricing

\n

Pick the plan, not the negotiation

\n

Every plan carries the whole editor. What changes is how many people are in it and how far back the history goes.

\n
\n\n \n
\n
\n Billing period\n \n \n \n
\n
\n\n \n Billed every month. Switch to yearly and two months are free.

\n\n
\n
\n
\n
\n

Solo

\n
\n

One person who would rather not think about seats.

\n
\n\n
\n

\n $12\n per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n \n Included: Unlimited documents\n
    • \n
  • \n \n \n \n Included: History kept for 90 days\n
    • \n
  • \n \n \n \n Not included: Shared editing\n
    • \n
  • \n \n \n \n Not included: Single sign-on\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Team, the recommended plan

\n Recommended\n
\n

For a product team that ships together.

\n
\n\n
\n

\n $29\n per editor, per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Unlimited editors and projects\n
    • \n
  • \n \n \n \n Included: History kept for two years\n
    • \n
  • \n \n \n \n Included: Shared editing with live cursors\n
    • \n
  • \n \n \n \n Included: Single sign-on and SCIM\n
    • \n
  • \n \n \n \n Not included: A named support engineer\n
    • \n
\n
\n\n \n
\n\n
\n
\n
\n

Business

\n
\n

When procurement, retention and uptime all have owners.

\n
\n\n
\n

\n $79\n per editor, per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Everything in Team\n
    • \n
  • \n \n \n \n Included: History kept for seven years\n
    • \n
  • \n \n \n \n Included: A named support engineer and a 99.9 percent uptime commitment\n
    • \n
  • \n \n \n \n Included: Invoicing, purchase orders and a signed DPA\n
    • \n
\n
\n\n \n
\n
\n
", "href": "https://bare.style/templates#pricing-three-plans", "preview": "https://bare.style/preview/pricing-three-plans.html" }, { "id": "pricing-two-plans", "title": "Pricing, two plans", "description": "Free against paid, side by side above 768px, with the recommended plan named in words rather than drawn with a border.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "pricing", "marketing", "card", "cta", "two-plans" ], "links": [ "src/layout/container.css", "src/layout/grid.css", "src/layout/stack.css", "src/layout/cluster.css", "src/data/card.css", "src/data/badge.css", "src/data/icon.css", "src/data/list.css", "src/forms/button.css", "src/utility/flex.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/typography.css", "src/utility/border.css", "src/utility/display.css", "src/utility/grid.css", "src/utility/layout-responsive.css", "src/utility/a11y.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 430, 768, 1024, 1440 ], "classes": [ "bs-badge", "bs-badge--accent", "bs-balance", "bs-border-2", "bs-border-accent", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-card", "bs-card__body", "bs-card__footer", "bs-card__header", "bs-card__subtitle", "bs-card__title", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-cols-1", "bs-d-grid", "bs-eyebrow", "bs-fg-secondary", "bs-flex-nowrap", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-grid", "bs-grid--rows", "bs-icon", "bs-icon--muted", "bs-icon--ok", "bs-icon--sm", "bs-lead", "bs-leading-none", "bs-list", "bs-list--plain", "bs-list__item", "bs-md-cols-2", "bs-measure-lead", "bs-mt-5", "bs-mt-6", "bs-mx-auto", "bs-nums-tabular", "bs-pb-0", "bs-pt-0", "bs-stack", "bs-text-body", "bs-text-center", "bs-text-display", "bs-text-h2", "bs-visually-hidden", "bs-wrap", "bs-wrap--lg" ], "html": "\n
\n
\n

Pricing

\n

Start free, pay when the team arrives

\n

One project on us, for as long as you want it. The paid plan is for when more than one person needs to be in the file.

\n
\n\n
\n
\n
\n
\n

Starter

\n
\n

One person, one project, no card.

\n
\n\n
\n

\n $0\n forever\n

\n
\n\n
\n
    \n
  • \n \n \n \n \n Included: One project, unlimited documents in it\n
    • \n
  • \n \n \n \n Included: Version history kept for 30 days\n
    • \n
  • \n \n \n \n Not included: More than one editor in a document\n
    • \n
  • \n \n \n \n Not included: Single sign-on and audit export\n
    • \n
\n
\n\n \n
\n\n \n
\n
\n
\n

Pro, the recommended plan

\n Recommended\n
\n

The plan almost every team ends up on.

\n
\n\n
\n

\n $19\n per editor, per month\n

\n
\n\n
\n
    \n
  • \n \n \n \n Included: Unlimited projects and editors\n
    • \n
  • \n \n \n \n Included: Version history kept for two years\n
    • \n
  • \n \n \n \n Included: Single sign-on, SCIM and audit export\n
    • \n
  • \n \n \n \n Included: Support answered within one working day\n
    • \n
  • \n \n \n \n Not included: Self-hosted install on your own hardware\n
    • \n
\n
\n\n \n
\n
\n\n

Prices exclude VAT. Cancel from the billing page at any time.

\n
", "href": "https://bare.style/templates#pricing-two-plans", "preview": "https://bare.style/preview/pricing-two-plans.html" }, { "id": "profile", "title": "Profile page", "description": "A person page: avatar, name and role, the facts about them as a description list, what they work on, and their recent activity.", "category": "content", "categoryLabel": "Content", "kind": "page", "tags": [ "content", "profile", "avatar", "timeline", "full-page" ], "links": [ "src/app/flow-timeline.css", "src/data/avatar.css", "src/data/badge.css", "src/data/tag.css", "src/data/description-list.css", "src/data/card.css", "src/layout/container.css", "src/layout/stack.css", "src/layout/cluster.css", "src/forms/button.css", "src/utility/spacing.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-avatar", "bs-avatar--ring", "bs-avatar--xl", "bs-avatar__initials", "bs-badge", "bs-badge--accent", "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-card", "bs-card__body", "bs-card__header", "bs-card__title", "bs-cluster", "bs-cluster--between", "bs-dl", "bs-dl--columns", "bs-dl__desc", "bs-dl__term", "bs-flow-none", "bs-gap-1", "bs-gap-2", "bs-gap-3", "bs-gap-4", "bs-gap-6", "bs-mt-4", "bs-my-6", "bs-stack", "bs-tag", "bs-tag-list", "bs-tag__label", "bs-text-h3", "bs-text-h4", "bs-timeline", "bs-timeline__body", "bs-timeline__content", "bs-timeline__item", "bs-timeline__marker", "bs-timeline__time", "bs-timeline__title", "bs-wrap", "bs-wrap--md" ], "html": "
\n
\n \n
\n
\n \n AO\n \n
\n

Ada Okonjo

\n

Staff engineer, data platform

\n

Workspace owner

\n
\n
\n
\n Send a message\n See her runs\n
\n
\n\n
\n
\n

About

\n
\n
\n

\n Looks after ingestion and the scheduler. Happy to be pulled into anything that has started\n paging people at night. Reviews are usually back within a day, and slower on Fridays.\n

\n\n
\n
Team
\n
Data platform
\n
Based in
\n
Lisbon, usually online 09:00 to 18:00
\n
Joined
\n
March, three years ago
\n
Reachable at
\n
ada@example.com
\n
\n\n \n
    \n
  • Ingestion
    • \n
  • Scheduler
    • \n
  • On-call rota
    • \n
  • Warehouse migration
    • \n
\n
\n
\n\n
\n

Recent activity

\n
    \n
  1. \n \n
    \n

    Merged a change to the retry policy

    \n

    Failed ingest jobs now back off to five minutes instead of retrying every thirty seconds.

    \n \n
    \n
    2. \n
  2. \n \n
    \n

    Took the overnight page for the billing pipeline

    \n

    Upstream returned errors for eleven minutes. No rows were lost.

    \n \n
    \n
    3. \n
  3. \n \n
    \n

    Reviewed the warehouse migration plan

    \n \n
    \n
    4. \n
\n
\n
\n
", "href": "https://bare.style/templates#profile", "preview": "https://bare.style/preview/profile.html" }, { "id": "record-detail", "title": "Record detail with side panel", "description": "One record opened: breadcrumb, status, a timeline of what happened, and a side panel of properties and actions.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "detail", "data", "timeline", "full-page" ], "links": [ "src/layout/container.css", "src/layout/sidebar.css", "src/layout/stack.css", "src/layout/cluster.css", "src/nav/breadcrumb.css", "src/data/card.css", "src/data/badge.css", "src/data/description-list.css", "src/data/divider.css", "src/data/avatar.css", "src/app/flow-timeline.css", "src/forms/button.css", "src/utility/spacing.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-avatar", "bs-avatar--sm", "bs-avatar__initials", "bs-badge", "bs-badge--accent", "bs-breadcrumb", "bs-breadcrumb__current", "bs-breadcrumb__item", "bs-breadcrumb__link", "bs-breadcrumb__list", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-btn--secondary", "bs-caption", "bs-card", "bs-card__body", "bs-card__text", "bs-card__title", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-cluster--tight", "bs-divider", "bs-dl", "bs-dl--rows", "bs-dl__desc", "bs-dl__term", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-gap-5", "bs-gap-6", "bs-my-5", "bs-nums-tabular", "bs-py-8", "bs-sidebar", "bs-sidebar__main", "bs-sidebar__side", "bs-stack", "bs-text-h3", "bs-text-h5", "bs-timeline", "bs-timeline__body", "bs-timeline__content", "bs-timeline__item", "bs-timeline__marker", "bs-timeline__time", "bs-timeline__title", "bs-wrap" ], "html": "\n
\n
\n \n\n
\n
\n

Payout settlement failing on retry

\n \n Investigating\n
\n

\n Opened by the settlement monitor.\n

\n
\n\n \n
\n
\n
\n
\n
\n

Summary

\n

\n Four consecutive runs of settle-payouts have returned a gateway timeout after roughly\n four minutes. The retry budget for the schedule is spent, so no further attempt will\n start on its own. Settlement for 1,180 accounts is queued behind it.\n

\n
\n
\n\n
\n

What happened

\n
    \n
  1. \n \n
    \n

    Retry budget exhausted

    \n

    Run 4812 failed after 4m 11s. No automatic attempt remains.

    \n \n
    \n
    2. \n
  2. \n \n
    \n

    Assigned to Payments

    \n

    Routed by the on-call rota after the second failure.

    \n \n
    \n
    3. \n
  3. \n \n
    \n

    Gateway latency alert cleared

    \n \n
    \n
    4. \n
  4. \n \n
    \n

    First failure recorded

    \n

    Run 4798 returned a gateway timeout at the settlement step.

    \n \n
    \n
    5. \n
\n
\n
\n
\n\n \n
\n
\n
", "href": "https://bare.style/templates#record-detail", "preview": "https://bare.style/preview/record-detail.html" }, { "id": "search-results", "title": "Search results", "description": "A results page: a scoped query, type facets, a spoken result count, ranked results with snippets, and pagination.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "search", "list", "data", "pagination", "full-page" ], "links": [ "src/layout/container.css", "src/layout/stack.css", "src/layout/cluster.css", "src/app/command-search.css", "src/app/command-filter-bar.css", "src/app/command-chip.css", "src/data/list.css", "src/nav/navlink.css", "src/nav/pagination.css", "src/utility/a11y.css", "src/utility/spacing.css", "src/utility/color.css", "src/utility/typography.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-caption", "bs-chip", "bs-chip--on", "bs-chip__check", "bs-chip__count", "bs-chip__label", "bs-cluster", "bs-decoration-underline", "bs-fg-link", "bs-filter-bar", "bs-filter-bar__clear", "bs-filter-bar__count", "bs-filter-bar__label", "bs-filter-bar__set", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-gap-6", "bs-list", "bs-list--divided", "bs-list__item", "bs-list__meta", "bs-list__title", "bs-navlink", "bs-pagination", "bs-pagination__gap", "bs-pagination__link", "bs-pagination__link--next", "bs-pagination__list", "bs-search", "bs-search__clear", "bs-search__field", "bs-search__icon", "bs-search__input", "bs-search__scope", "bs-search__scopeicon", "bs-stack", "bs-text-h3", "bs-visually-hidden", "bs-wrap", "bs-wrap--md" ], "html": "
\n
\n
\n

Search

\n\n \n
\n
\n
\n \n \n \n \n \n \n \n \n
\n
\n
\n\n
\n

Type

\n
\n \n \n \n \n
\n

35 results in 0.08 seconds

\n \n
\n
\n\n \n \n\n \n
\n
", "href": "https://bare.style/templates#search-results", "preview": "https://bare.style/preview/search-results.html" }, { "id": "settings", "title": "Settings page with a sidebar", "description": "An application settings page: section navigation in the pane, a profile form, notification switches and one save bar per card.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "settings", "shell", "form", "navigation", "full-page" ], "links": [ "src/app/shell-frame.css", "src/app/shell-rail.css", "src/app/shell-topbar.css", "src/app/shell-sidebar.css", "src/app/shell-main.css", "src/nav/sidebar-nav.css", "src/data/card.css", "src/forms/field.css", "src/forms/label.css", "src/forms/input.css", "src/forms/help.css", "src/forms/select.css", "src/forms/switch.css", "src/forms/button.css", "src/layout/stack.css", "src/layout/cluster.css", "src/utility/spacing.css", "src/utility/size.css", "src/utility/a11y.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-card", "bs-card__body", "bs-card__footer", "bs-card__header", "bs-card__subtitle", "bs-card__title", "bs-cluster", "bs-dropdown", "bs-dropdown__control", "bs-field", "bs-gap-2", "bs-gap-4", "bs-gap-5", "bs-help", "bs-input", "bs-label", "bs-max-w-md", "bs-shell", "bs-shell-main", "bs-shell-main__content", "bs-shell-rail", "bs-shell-rail__icon", "bs-shell-rail__item", "bs-shell-rail__item--current", "bs-shell-rail__label", "bs-shell-sidebar", "bs-shell-sidebar__body", "bs-shell-sidebar__close", "bs-shell-sidebar__header", "bs-shell-sidebar__title", "bs-shell-topbar", "bs-shell-topbar__icon", "bs-shell-topbar__title", "bs-shell-topbar__toggle", "bs-shell__scrim", "bs-sidenav", "bs-sidenav__group", "bs-sidenav__link", "bs-sidenav__list", "bs-sidenav__list--nested", "bs-stack", "bs-switch", "bs-switch__control", "bs-switch__label", "bs-switch__track", "bs-text-h3", "bs-visually-hidden-focusable" ], "html": "
\n \n\n
\n Skip to the work area\n \n \n \n \n \n \n

Northbridge Operations

\n
\n\n \n\n \n\n
\n
\n \n
\n

Profile

\n\n \n
\n
\n

Who you are

\n

This is what teammates see beside your comments and runs.

\n
\n\n
\n
\n \n \n
\n\n
\n \n \n

Letters, numbers and hyphens. Mentions use this, so changing it breaks old ones.

\n
\n\n
\n \n \n

Changing this sends a confirmation link to the new address before it takes effect.

\n
\n\n
\n \n \n \n \n
\n
\n\n
\n
\n \n \n \n
\n
\n
\n\n
\n
\n

What we email you about

\n

Anything switched off here still appears in the alerts list.

\n
\n\n
\n \n \n\n \n\n \n\n \n
\n\n \n
\n
\n
\n
\n
", "href": "https://bare.style/templates#settings", "preview": "https://bare.style/preview/settings.html" }, { "id": "sign-in", "title": "Sign in with providers", "description": "A sign-in screen with third-party buttons, email and password with a reveal, a recovery route and a way to sign up.", "category": "auth", "categoryLabel": "Auth", "kind": "page", "tags": [ "auth", "sign-in", "form", "full-page", "app" ], "links": [ "src/app/auth-screen.css", "src/app/auth-provider.css", "src/app/auth-form.css", "src/app/auth-password.css", "src/forms/input.css", "src/forms/checkbox.css", "src/forms/button.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-auth", "bs-auth-form", "bs-auth-form__actions", "bs-auth-form__aside", "bs-auth-form__choice", "bs-auth-form__divide", "bs-auth-form__field", "bs-auth-form__hint", "bs-auth-form__label", "bs-auth-form__options", "bs-auth-form__row", "bs-auth__alt", "bs-auth__brand", "bs-auth__card", "bs-auth__head", "bs-auth__inner", "bs-auth__legal", "bs-auth__mark", "bs-auth__subtitle", "bs-auth__title", "bs-auth__wordmark", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-checkbox__control", "bs-input", "bs-password", "bs-password__icon", "bs-password__icon--hidden", "bs-password__icon--shown", "bs-password__icons", "bs-password__input", "bs-password__toggle", "bs-provider", "bs-provider-set", "bs-provider__label", "bs-provider__mark" ], "html": "
\n
\n
\n \n \n \n \n \n \n BareBase\n
\n\n \n
\n
\n

Sign in

\n

Use the address your workspace was invited on.

\n
\n\n \n
\n \n \n \n \n \n \n Continue with single sign-on\n \n \n \n \n \n \n \n \n Continue with a passkey\n \n
\n\n
\n
or use your password
\n\n
\n \n \n \n

Personal addresses are not on this workspace.

\n
\n\n
\n
\n \n Forgot it\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n
\n \n
\n\n
\n \n
\n
\n
\n\n

No account yet? Create one

\n\n \n
\n
", "href": "https://bare.style/templates#sign-in", "preview": "https://bare.style/preview/sign-in.html" }, { "id": "sign-up", "title": "Create account screen", "description": "A sign-up screen: name, work email, a new password with its rule stated up front, the terms consent, and a route back to sign in.", "category": "auth", "categoryLabel": "Auth", "kind": "page", "tags": [ "auth", "sign-up", "form", "full-page", "app" ], "links": [ "src/app/auth-screen.css", "src/app/auth-provider.css", "src/app/auth-form.css", "src/app/auth-password.css", "src/forms/input.css", "src/forms/checkbox.css", "src/forms/button.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-auth", "bs-auth-form", "bs-auth-form__actions", "bs-auth-form__choice", "bs-auth-form__divide", "bs-auth-form__field", "bs-auth-form__hint", "bs-auth-form__label", "bs-auth-form__note", "bs-auth-form__options", "bs-auth__alt", "bs-auth__brand", "bs-auth__card", "bs-auth__head", "bs-auth__inner", "bs-auth__legal", "bs-auth__mark", "bs-auth__subtitle", "bs-auth__title", "bs-auth__wordmark", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-checkbox__control", "bs-input", "bs-password", "bs-password__icon", "bs-password__icon--hidden", "bs-password__icon--shown", "bs-password__icons", "bs-password__input", "bs-password__toggle", "bs-provider", "bs-provider-set", "bs-provider__label", "bs-provider__mark" ], "html": "
\n
\n
\n \n \n \n \n \n \n BareBase\n
\n\n
\n
\n

Create your account

\n

Two minutes, and the first project is on us for a month.

\n
\n\n
\n \n \n \n \n \n \n Sign up with single sign-on\n \n
\n\n
\n
or with an email address
\n\n
\n \n \n
\n\n
\n \n \n

We match your workspace on the domain, so use the one you work from.

\n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n

At least twelve characters. A phrase you can remember beats a short one you cannot.

\n
\n\n
\n \n
\n\n
\n \n
\n\n

No card until you invite a second person.

\n
\n
\n\n

Already have an account? Sign in

\n\n \n
\n
", "href": "https://bare.style/templates#sign-up", "preview": "https://bare.style/preview/sign-up.html" }, { "id": "stats-overview", "title": "Stats overview row", "description": "The band a dashboard opens on: four key figures with movement, a trend plot, a target and a freshness note.", "category": "app", "categoryLabel": "Application", "kind": "block", "tags": [ "app", "metrics", "dashboard", "data" ], "links": [ "src/app/metric-stat-grid.css", "src/app/metric-kpi.css", "src/app/metric-delta.css", "src/app/metric-sparkline.css", "src/layout/stack.css", "src/utility/spacing.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 1440 ], "classes": [ "bs-delta", "bs-delta--bad", "bs-delta--flat", "bs-delta--good", "bs-delta--neutral", "bs-delta--up", "bs-delta__amount", "bs-delta__context", "bs-delta__direction", "bs-delta__mark", "bs-flow-none", "bs-gap-4", "bs-kpi", "bs-kpi--stale", "bs-kpi__figure", "bs-kpi__label", "bs-kpi__movement", "bs-kpi__note", "bs-kpi__plot", "bs-kpi__target", "bs-kpi__target-label", "bs-kpi__target-value", "bs-kpi__unit", "bs-kpi__value", "bs-nums-tabular", "bs-sparkline", "bs-sparkline--danger", "bs-sparkline__caption", "bs-sparkline__plot", "bs-sparkline__point", "bs-sparkline__range", "bs-sparkline__svg", "bs-stack", "bs-stat-grid", "bs-stat-grid__tile", "bs-text-h5" ], "html": "\n
\n

Last 7 days

\n\n \n \n
", "href": "https://bare.style/templates#stats-overview", "preview": "https://bare.style/preview/stats-overview.html" }, { "id": "table-view", "title": "Table view with filters", "description": "A records page: scoped search, sort, filter chips with a live count, a scrolling table and pagination.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "table", "data", "filter", "pagination", "full-page" ], "links": [ "src/layout/container.css", "src/layout/stack.css", "src/layout/cluster.css", "src/app/command-search.css", "src/app/command-sort.css", "src/app/command-filter-bar.css", "src/app/command-chip.css", "src/data/table.css", "src/data/badge.css", "src/nav/pagination.css", "src/forms/button.css", "src/utility/a11y.css", "src/utility/spacing.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-badge", "bs-badge--accent", "bs-badge--danger", "bs-btn", "bs-btn--secondary", "bs-btn--sm", "bs-caption", "bs-chip", "bs-chip--on", "bs-chip__check", "bs-chip__count", "bs-chip__label", "bs-cluster", "bs-filter-bar", "bs-filter-bar__clear", "bs-filter-bar__count", "bs-filter-bar__label", "bs-filter-bar__set", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-gap-6", "bs-nums-tabular", "bs-pagination", "bs-pagination__gap", "bs-pagination__link", "bs-pagination__link--next", "bs-pagination__link--prev", "bs-pagination__list", "bs-py-8", "bs-search", "bs-search__clear", "bs-search__field", "bs-search__icon", "bs-search__input", "bs-search__scope", "bs-search__scopeicon", "bs-sort", "bs-sort__arrow", "bs-sort__dir", "bs-sort__label", "bs-sort__select", "bs-stack", "bs-table", "bs-table--hover", "bs-table--sticky-head", "bs-table--zebra", "bs-table-scroll", "bs-table-scroll--capped", "bs-table__num", "bs-text-h3", "bs-visually-hidden", "bs-wrap" ], "html": "\n
\n
\n
\n

Pipeline runs

\n

Every run of every scheduled job in this workspace, newest first.

\n
\n\n
\n \n
\n
\n
\n \n \n \n \n \n \n \n \n
\n
\n\n
\n \n \n \n
\n Export CSV\n
\n\n
\n

Filters

\n
\n \n \n \n \n
\n \n

17 of 2,480 runs

\n \n
\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Failed and running jobs, checkout service
RunJobStatusStartedDurationTriggerOwner
4812settle-payoutsFailed4m 11sSchedulePayments
4811reconcile-ledgerRunning6m 02sManualPayments
4809export-invoicesFailed18sWebhookFinance
4804refresh-tax-ratesFailed2m 47sScheduleFinance
4802settle-payoutsRunning3m 09sRetry of 4798Payments
4798settle-payoutsFailed4m 30sSchedulePayments
4791sync-catalogueFailed55sWebhookCatalogue
\n
\n\n \n
\n
", "href": "https://bare.style/templates#table-view", "preview": "https://bare.style/preview/table-view.html" }, { "id": "task-list", "title": "Task list", "description": "A task table with status, assignee, due date and priority, a filter bar, bulk selection, an empty group, and a threaded detail pane.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "tasks", "table", "filter", "detail", "thread", "empty-state", "full-page" ], "links": [ "src/layout/container.css", "src/layout/stack.css", "src/layout/cluster.css", "src/layout/sidebar.css", "src/app/command-filter-bar.css", "src/app/command-chip.css", "src/app/collab-assignee.css", "src/app/collab-thread.css", "src/app/collab-message.css", "src/app/collab-composer.css", "src/data/table.css", "src/data/badge.css", "src/data/avatar.css", "src/data/icon.css", "src/data/empty.css", "src/data/description-list.css", "src/forms/checkbox.css", "src/forms/textarea.css", "src/forms/button.css", "src/nav/navlink.css", "src/utility/a11y.css", "src/utility/flex.css", "src/utility/spacing.css", "src/utility/typography.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-assignee", "bs-assignee--sm", "bs-assignee--unassigned", "bs-assignee__avatar", "bs-assignee__name", "bs-avatar", "bs-avatar--sm", "bs-avatar__initials", "bs-badge", "bs-badge--accent", "bs-badge--danger", "bs-badge--ok", "bs-badge--outline", "bs-btn", "bs-btn--ghost", "bs-btn--primary", "bs-btn--secondary", "bs-btn--sm", "bs-caption", "bs-checkbox", "bs-checkbox__control", "bs-checkbox__label", "bs-chip", "bs-chip--on", "bs-chip__check", "bs-chip__count", "bs-chip__label", "bs-cluster", "bs-cluster--baseline", "bs-cluster--between", "bs-cluster--tight", "bs-composer", "bs-composer__bar", "bs-composer__field", "bs-composer__hint", "bs-composer__label", "bs-composer__send", "bs-composer__send-label", "bs-dl", "bs-dl--columns", "bs-dl--divided", "bs-dl__desc", "bs-dl__term", "bs-empty", "bs-empty--compact", "bs-empty--framed", "bs-empty__actions", "bs-empty__icon", "bs-empty__text", "bs-empty__title", "bs-eyebrow", "bs-filter-bar", "bs-filter-bar__clear", "bs-filter-bar__count", "bs-filter-bar__label", "bs-filter-bar__set", "bs-flex-nowrap", "bs-flow-none", "bs-gap-2", "bs-gap-3", "bs-gap-5", "bs-gap-6", "bs-icon", "bs-icon--danger", "bs-icon--muted", "bs-icon--sm", "bs-message", "bs-message__author", "bs-message__avatar", "bs-message__body", "bs-message__head", "bs-message__time", "bs-mt-1", "bs-mt-2", "bs-mt-3", "bs-navlink", "bs-sidebar", "bs-sidebar__main", "bs-sidebar__side", "bs-stack", "bs-table", "bs-table--hover", "bs-table--stack", "bs-table-scroll", "bs-text-body", "bs-text-h3", "bs-text-h5", "bs-text-h6", "bs-text-nowrap", "bs-textarea", "bs-thread", "bs-thread--nested", "bs-thread__divider", "bs-thread__label", "bs-thread__list", "bs-thread__more", "bs-visually-hidden", "bs-wrap" ], "html": "
\n
\n
\n
\n

Tasks

\n

Migration to the new billing pipeline

\n
\n \n
\n\n \n
\n

Filters

\n
\n \n \n \n \n
\n

5 of 34 tasks

\n \n
\n\n \n
\n
\n \n
\n
\n \n

2 of 5 selected

\n
\n
\n \n \n \n
\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n
SelectedTaskStatusAssigneeDuePriority
\n \n \n Move invoice numbering to the new sequence\n In progress\n \n \n \n \n \n \n \n High\n \n
\n \n \n Backfill the ledger for June\n Blocked\n \n \n \n \n \n \n High\n \n
\n \n \n Write the rollback note for support\n To do\n \n \n \n \n \n \n Medium\n \n
\n \n \n Retire the old proration helper\n In progress\n \n \n \n \n \n \n Low\n \n
\n \n \n Check the seat count against the invoice\n Done\n \n \n \n \n \n \n Medium\n \n
\n
\n\n \n
\n

Waiting on someone else

\n
\n \n \n \n

Nothing is waiting

\n

Tasks land here when they are handed to a team outside this project.

\n
\n \n
\n
\n
\n
\n\n \n
\n
\n

Task 809

\n

Backfill the ledger for June

\n
\n\n
\n
Status
\n
Blocked
\n
Assignee
\n
Tomas Ferro
\n
Due
\n
\n
Priority
\n
High
\n
\n\n

\n The June rows were written before the currency column existed, so the importer has to fill\n it from the account default before the totals can be trusted.\n

\n\n
\n

Comments

\n
\n \n\n
Yesterday
\n\n
    \n
  1. \n
    \n
    \n \n TF\n \n
    \n
    \n Tomas Ferro\n \n
    \n
    \n

    The importer needs the account default before it can fill the column. Who owns that table now?

    \n
    \n
    \n\n \n
    \n
      \n
    1. \n
      \n
      \n \n MO\n \n
      \n
      \n Mira Okonkwo\n \n
      \n
      \n

      Billing owns it. I have asked for read access and will paste the mapping here.

      \n
      \n
      \n
      2. \n
    \n
    \n
    2. \n
\n\n
Today
\n\n
    \n
  1. \n
    \n
    \n \n RA\n \n
    \n
    \n Rin Alvarez\n \n
    \n
    \n

    Access is granted. Moving this back to in progress once the mapping is checked.

    \n
    \n
    \n
    2. \n
\n\n
\n
\n \n \n
\n
\n

Everyone watching this task is notified.

\n \n
\n
\n
\n
\n
\n
\n
\n
", "href": "https://bare.style/templates#task-list", "preview": "https://bare.style/preview/task-list.html" }, { "id": "team-members", "title": "Team members page", "description": "A workspace roster in the application frame: a filter toolbar, an invite action and a table of people with role, status and last activity.", "category": "app", "categoryLabel": "Application", "kind": "page", "tags": [ "app", "team", "table", "shell", "roster", "full-page" ], "links": [ "src/app/shell-frame.css", "src/app/shell-rail.css", "src/app/shell-topbar.css", "src/app/shell-sidebar.css", "src/app/shell-main.css", "src/nav/sidebar-nav.css", "src/data/table.css", "src/data/avatar.css", "src/data/badge.css", "src/layout/cluster.css", "src/layout/stack.css", "src/forms/input.css", "src/forms/button.css", "src/utility/spacing.css", "src/utility/size.css", "src/utility/a11y.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-avatar", "bs-avatar--sm", "bs-avatar__initials", "bs-badge", "bs-badge--danger", "bs-badge--ok", "bs-badge--subtle", "bs-btn", "bs-btn--primary", "bs-btn--secondary", "bs-btn--sm", "bs-cluster", "bs-gap-0", "bs-gap-2", "bs-input", "bs-max-w-xs", "bs-mb-4", "bs-shell", "bs-shell-main", "bs-shell-main__content", "bs-shell-main__toolbar", "bs-shell-rail", "bs-shell-rail__foot", "bs-shell-rail__icon", "bs-shell-rail__item", "bs-shell-rail__item--current", "bs-shell-rail__label", "bs-shell-sidebar", "bs-shell-sidebar__body", "bs-shell-sidebar__close", "bs-shell-sidebar__header", "bs-shell-sidebar__title", "bs-shell-topbar", "bs-shell-topbar__actions", "bs-shell-topbar__icon", "bs-shell-topbar__title", "bs-shell-topbar__toggle", "bs-shell__scrim", "bs-sidenav", "bs-sidenav__link", "bs-sidenav__list", "bs-stack", "bs-table", "bs-table--hover", "bs-table--zebra", "bs-table-scroll", "bs-table__muted", "bs-visually-hidden", "bs-visually-hidden-focusable" ], "html": "
\n \n\n
\n Skip to the work area\n \n \n \n \n \n \n

Members

\n
\n \n
\n
\n\n \n\n \n\n
\n \n
\n \n \n \n \n
\n\n
\n

Everyone who can open this workspace. Removing somebody keeps their runs and their comments.

\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Workspace members and the access each one has
MemberRoleStatusLast activeManage
\n \n \n AO\n \n \n Ada Okonjo\n ada@example.com\n \n \n OwnerActiveToday at 09:14Manage Ada Okonjo
\n \n \n RM\n \n \n Ravi Menon\n ravi@example.com\n \n \n AdminActiveToday at 08:02Manage Ravi Menon
\n \n \n MF\n \n \n Mireia Farre\n mireia@example.com\n \n \n EditorInvitedNot yetManage Mireia Farre
\n \n \n TB\n \n \n Tomas Berg\n tomas@example.com\n \n \n ViewerSuspended14 MarchManage Tomas Berg
\n
\n
\n
\n
", "href": "https://bare.style/templates#team-members", "preview": "https://bare.style/preview/team-members.html" }, { "id": "testimonials", "title": "Testimonial section", "description": "Three attributed quotations in a grid, each with the speaker, their role and the company they said it at.", "category": "marketing", "categoryLabel": "Marketing", "kind": "block", "tags": [ "testimonial", "marketing", "quote", "grid", "social-proof" ], "links": [ "src/layout/container.css", "src/layout/grid.css", "src/layout/stack.css", "src/layout/cluster.css", "src/data/card.css", "src/data/avatar.css", "src/prose/quote.css", "src/utility/size.css", "src/utility/spacing.css", "src/utility/typography.css", "src/utility/color.css", "src/utility/display.css" ], "behaviour": [], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-avatar", "bs-avatar__initials", "bs-caption", "bs-card", "bs-card__body", "bs-cluster", "bs-d-block", "bs-eyebrow", "bs-fg-muted", "bs-flow-none", "bs-gap-3", "bs-gap-5", "bs-grid", "bs-grid--bare", "bs-h-full", "bs-mt-7", "bs-py-9", "bs-quote", "bs-quote__attribution", "bs-stack", "bs-text-h2", "bs-wrap" ], "html": "\n
\n
\n

In production

\n

What teams say after their first bad week

\n
\n\n \n
", "href": "https://bare.style/templates#testimonials", "preview": "https://bare.style/preview/testimonials.html" }, { "id": "two-factor", "title": "Two-factor code entry", "description": "A verification screen: six boxes that are one field, where the code came from, how to resend it, and the recovery route.", "category": "auth", "categoryLabel": "Auth", "kind": "page", "tags": [ "auth", "two-factor", "one-time-code", "form", "full-page" ], "links": [ "src/app/auth-screen.css", "src/app/auth-form.css", "src/app/auth-otp.css", "src/forms/checkbox.css", "src/forms/button.css" ], "behaviour": [ "src/behaviour/otp.js" ], "requires": [ "src/core/reset.css", "src/core/tokens.css", "src/core/type.css", "src/core/base.css" ], "verified": [ 320, 390, 768, 1440 ], "classes": [ "bs-auth", "bs-auth-form", "bs-auth-form__actions", "bs-auth-form__choice", "bs-auth-form__note", "bs-auth-form__options", "bs-auth__alt", "bs-auth__brand", "bs-auth__card", "bs-auth__head", "bs-auth__inner", "bs-auth__legal", "bs-auth__mark", "bs-auth__subtitle", "bs-auth__title", "bs-auth__wordmark", "bs-btn", "bs-btn--block", "bs-btn--primary", "bs-checkbox__control", "bs-otp", "bs-otp__boxes", "bs-otp__digit", "bs-otp__help", "bs-otp__legend" ], "html": "
\n
\n
\n \n \n \n \n \n \n BareBase\n
\n\n
\n
\n

Two-step verification

\n

One more step, because this device has not signed in before.

\n
\n\n
\n \n
\n Verification code\n
\n \n \n \n \n \n \n
\n

Six digits from your authenticator app. Paste into any box and the row fills.

\n
\n\n
\n \n
\n\n
\n \n
\n\n

The code changes every thirty seconds.

\n
\n
\n\n

Lost the device? Use a recovery code

\n\n \n
\n
", "href": "https://bare.style/templates#two-factor", "preview": "https://bare.style/preview/two-factor.html" } ] }