# GovBB Design System

> Components, styles, patterns and guidance for building accessible Barbados government services.

Documentation build packages: `@govtech-bb/frontend@1.0.0-alpha.29` and `@govtech-bb/react@1.0.0-alpha.29`. Check the consumer project's installed versions before using an API, class or token; this site is not versioned per installation.

For HTML or server-rendered services, use `@govtech-bb/frontend` and initialize progressive enhancement after the markup is available. For React services, also use `@govtech-bb/react`; its components own their behavior, so do not run `initAll()` over them. Preserve the service’s chosen framework and supported Tailwind integration.

Fetch the relevant Markdown links below as needed. Component pages include HTML and, where available, React examples. Token tables contain the declared and resolved values used by this documentation build. Design-log dates and kinds distinguish decisions, research and working notes.

Install skills and their supporting references and scripts from the consumer project directory using `npx skills add govtech-bb/govbb-design-system`. List available skills with `npx skills add govtech-bb/govbb-design-system --list`, or select one with `npx skills add govtech-bb/govbb-design-system --skill design-system-compliance`. Skill Markdown pages preview the entrypoint; they do not install the supporting files.

## Getting started

- [Accessibility](https://design-system.service.alpha.gov.bb/documentation/accessibility.md): The accessibility standard Government of Barbados services built with this design system must meet, and how to check against it.
- [Form implementation](https://design-system.service.alpha.gov.bb/documentation/form-implementation.md): Implement accessible forms with native HTML, React, server validation and resilient submission.
- [Using the design system](https://design-system.service.alpha.gov.bb/documentation/using-the-design-system.md): How to adopt the design system and the standards every service follows.

## Styles

- [Colour](https://design-system.service.alpha.gov.bb/styles/colour.md): The palette: semantic colour tokens and the primitive ramp they resolve to, with hex values.
- [Form fields](https://design-system.service.alpha.gov.bb/styles/form-fields.md): Shared anatomy, content, states and validation rules for every form control.
- [Layout](https://design-system.service.alpha.gov.bb/styles/layout.md): How to structure a page with the width container, main wrapper and grid.
- [Lists](https://design-system.service.alpha.gov.bb/styles/typography/lists.md): Use lists to make blocks of text easier to read and scan.
- [Spacing](https://design-system.service.alpha.gov.bb/styles/spacing.md): The spacing scale and how to apply it with tokens instead of hard-coded values.
- [Text case](https://design-system.service.alpha.gov.bb/styles/text-case.md): Use sentence case for all interface text, and keep capitals for the words that need them.
- [Tokens](https://design-system.service.alpha.gov.bb/styles/tokens.md): The custom properties for colour, type, spacing and radii that every component is built on.
- [Typography](https://design-system.service.alpha.gov.bb/styles/typography.md): The Figtree typeface, the type scale and the text utility classes.

## Components

- [Accordion](https://design-system.service.alpha.gov.bb/components/accordion.md): Use an accordion to let users show and hide sections of related content on a page.
- [Add another](https://design-system.service.alpha.gov.bb/components/add-another.md): Use the add another component to let users repeat a small group of fields, such as the details of each person, as many times as they need.
- [Back button](https://design-system.service.alpha.gov.bb/components/back-button.md): Use the back button to let users return to the previous page in a multi-page transaction.
- [Breadcrumbs](https://design-system.service.alpha.gov.bb/components/breadcrumbs.md): Use breadcrumbs to help users understand where they are in the site and move back up the hierarchy.
- [Button](https://design-system.service.alpha.gov.bb/components/button.md): Use buttons to help users carry out an action.
- [Checkbox](https://design-system.service.alpha.gov.bb/components/checkbox.md): Use checkboxes to let users select one or more options from a list.
- [Combobox](https://design-system.service.alpha.gov.bb/components/combobox.md): Use the combobox component to let users choose one option from a long list by typing to filter it.
- [Date input](https://design-system.service.alpha.gov.bb/components/date-input.md): Use the date input component to let users enter a memorable date.
- [Error summary](https://design-system.service.alpha.gov.bb/components/error-summary.md): Use an error summary to list every problem on a page after a failed form submission.
- [Feedback](https://design-system.service.alpha.gov.bb/components/feedback.md): Use the feedback component to invite users to comment on the current page.
- [Fieldset](https://design-system.service.alpha.gov.bb/components/fieldset.md): Use the fieldset component to group related form controls under one question.
- [File upload](https://design-system.service.alpha.gov.bb/components/file-upload.md): Use the file upload component to let users attach a file, such as a supporting document.
- [Footer](https://design-system.service.alpha.gov.bb/components/footer.md): Use the footer to show supporting links and the coat of arms at the end of every page.
- [Form group](https://design-system.service.alpha.gov.bb/components/form.md): Use the form group to wrap a label, hint and error message around a form control.
- [Header](https://design-system.service.alpha.gov.bb/components/header.md): Use the header to show users they are on gov.bb and give them a route back to the homepage.
- [Input](https://design-system.service.alpha.gov.bb/components/input.md): Use the input component to let users enter a single line of free-form text.
- [Label](https://design-system.service.alpha.gov.bb/components/label.md): Use the label component to name the field a form control sits above.
- [Link](https://design-system.service.alpha.gov.bb/components/link.md): Use links to let users navigate to another page.
- [List](https://design-system.service.alpha.gov.bb/components/list.md): Use lists to present related items, plain or with bullets or numbers.
- [Number input](https://design-system.service.alpha.gov.bb/components/number-input.md): Use the number input component to let users enter a small integer with visible increment and decrement controls.
- [Official banner](https://design-system.service.alpha.gov.bb/components/official-banner.md): Use the official banner to confirm to users that they are on a genuine Government of Barbados website.
- [Payment](https://design-system.service.alpha.gov.bb/components/payment.md): Use the payment component to walk users through paying a fee and show the outcome.
- [Radio](https://design-system.service.alpha.gov.bb/components/radio.md): Use radio buttons to let users select a single option from a list.
- [Search](https://design-system.service.alpha.gov.bb/components/search.md): Use the search component to let users find content by keyword.
- [Select](https://design-system.service.alpha.gov.bb/components/select.md): Use the select component to let users choose one option from a long list.
- [Service heading](https://design-system.service.alpha.gov.bb/components/service-heading.md): Use the service heading to open a form page with the service name, the question and any supporting detail.
- [Service list](https://design-system.service.alpha.gov.bb/components/service-list.md): Use the service list to help users navigate to services, categories and topics.
- [Show/hide](https://design-system.service.alpha.gov.bb/components/show-hide.md): Use show/hide to reveal secondary content on demand.
- [Skip link](https://design-system.service.alpha.gov.bb/components/skip-link.md): Use a skip link to let keyboard users move directly to the main page content.
- [Status banner](https://design-system.service.alpha.gov.bb/components/status-banner.md): Use a status banner to tell users where a page sits in its lifecycle.
- [Summary list](https://design-system.service.alpha.gov.bb/components/summary-list.md): Use summary lists to show a set of key/value pairs, such as a user's answers.
- [Table](https://design-system.service.alpha.gov.bb/components/table.md): Use tables to let users compare information in rows and columns.

## Patterns

- [Address](https://design-system.service.alpha.gov.bb/patterns/address.md): Ask for an address using separate fields for each line, country, parish and postcode.
- [Bank details](https://design-system.service.alpha.gov.bb/patterns/bank-details.md): Ask for the bank details a service needs to pay money to a user.
- [Check answers](https://design-system.service.alpha.gov.bb/patterns/check-answers.md): Let users review and change their answers before they submit.
- [Contact information](https://design-system.service.alpha.gov.bb/patterns/contact-information.md): Ask for the ways a service can contact a user, such as email and phone number.
- [Declaration](https://design-system.service.alpha.gov.bb/patterns/declaration.md): Let users confirm their information is correct before they submit.
- [Disqualification](https://design-system.service.alpha.gov.bb/patterns/disqualification.md): Ask whether a user has ever been disqualified, and reveal the details when they have.
- [Education](https://design-system.service.alpha.gov.bb/patterns/education.md): Ask about a user's education level, institution and courses studied.
- [Employment](https://design-system.service.alpha.gov.bb/patterns/employment.md): Ask about a user's employment status, employer, role and dates.
- [Endorsement](https://design-system.service.alpha.gov.bb/patterns/endorsement.md): Ask whether a user has a licence endorsement, and reveal the details when they do.
- [Forms](https://design-system.service.alpha.gov.bb/patterns/forms.md): Structure forms so people can understand, complete and recover from them.
- [ID](https://design-system.service.alpha.gov.bb/patterns/id.md): Ask users for an identity document number, such as a National ID, passport or NIS number.
- [Name](https://design-system.service.alpha.gov.bb/patterns/name.md): Ask for a person's name using title, first, middle and last name fields.
- [Personal information](https://design-system.service.alpha.gov.bb/patterns/personal-information.md): Ask for a person's date of birth, place of birth, nationality, sex and marital status.

## Templates

- [Confirmation page](https://design-system.service.alpha.gov.bb/templates/confirmation.md): The success page shown after a user completes a service.
- [Create an account](https://design-system.service.alpha.gov.bb/templates/create-account.md): The page where a new user registers for the service.
- [JavaScript disabled](https://design-system.service.alpha.gov.bb/templates/javascript-disabled.md): The message to show when a feature needs JavaScript and it is off.
- [Landing page](https://design-system.service.alpha.gov.bb/templates/landing.md): The start page that introduces a service and sends users into it.
- [Multiple questions page](https://design-system.service.alpha.gov.bb/templates/multiple-questions-page.md): A form page for several closely related questions, like an address.
- [Page not found (404)](https://design-system.service.alpha.gov.bb/templates/page-not-found.md): The page to show when a URL does not match anything on the service.
- [Problem with the service (500)](https://design-system.service.alpha.gov.bb/templates/problem-with-service.md): The page to show when the service hits an unexpected error.
- [Reset password](https://design-system.service.alpha.gov.bb/templates/reset-password.md): The page where a user asks for a link to reset their password.
- [Service unavailable (503)](https://design-system.service.alpha.gov.bb/templates/service-unavailable.md): The page to show during planned downtime or maintenance.
- [Session expiry](https://design-system.service.alpha.gov.bb/templates/session-expiry.md): The page shown when a user's session times out mid-service.
- [Sign in](https://design-system.service.alpha.gov.bb/templates/sign-in.md): The page where a returning user signs in to the service.
- [Single question page](https://design-system.service.alpha.gov.bb/templates/single-question-page.md): The one-thing-per-page form scaffold - service heading, error summary, one question, back and continue.

## AI skills

- [Accessibility review](https://design-system.service.alpha.gov.bb/ai-skills/accessibility-review.md): Review pages, components or service journeys against the WCAG conformance target on the GovBB Design System's accessibility page and GovBB accessibility contracts, separating verified findings from judgement and manual testing. Use when an accessibility review is requested or a specific accessibility defect needs investigation, not for unrelated UI or repository work.
- [Design system compliance](https://design-system.service.alpha.gov.bb/ai-skills/design-system-compliance.md): Build, convert or review Government of Barbados interfaces using the GovBB Design System (@govtech-bb/frontend and @govtech-bb/react). Use for requested GovBB UI work or design-system compliance reviews, not unrelated work in a repository that happens to depend on these packages.

## Design decisions and research

- [Why we don't use placeholder text](https://design-system.service.alpha.gov.bb/design-log/placeholder-text.md): 2026-07-24; decision. Placeholder text is not a substitute for a label or hint. The label and hint should explain the answer on their own.
- [Why we keep pages short](https://design-system.service.alpha.gov.bb/design-log/short-pages.md): 2026-07-15; decision. Nobody should have to scroll indefinitely to find an answer. If a page feels long on a desktop, it is far too long on a phone.
- [Why we don't use FAQs](https://design-system.service.alpha.gov.bb/design-log/no-faqs.md): 2026-07-01; decision. Frequently asked questions are a symptom of unclear content, not a fix for it.