{ "name": "@filipgutica/design-system", "version": "1.0.16", "site": "https://filipgutica.github.io/design-system/", "components": [ { "id": "button", "name": "Button", "layer": "Core", "group": "Actions", "purpose": "The main action control: primary, secondary, ghost, danger, and text.", "do": "One primary button in each decision group, labelled with a verb for its result, such as \"Save changes\". Every other action in the group is secondary, ghost, or text.", "dont": "The danger variant on an action the reader can undo. Danger marks an action that destroys something.", "url": "https://filipgutica.github.io/design-system/components.html#button", "spec": "https://filipgutica.github.io/design-system/components.md#button" }, { "id": "quiet-action", "name": "Quiet action", "layer": "Core", "group": "Actions", "purpose": "A small transparent action inside a component, such as Copy or Close.", "do": "Use it for an action inside a component: Copy in a code block or command list, close in a dialog or drawer, Full size on a capture, and the project trigger.", "dont": "An action that stands on its own in the page, such as Save or Next. That is a button.", "url": "https://filipgutica.github.io/design-system/components.html#quiet-action", "spec": "https://filipgutica.github.io/design-system/components.md#quiet-action" }, { "id": "checkbox-and-radio", "name": "Checkbox and radio", "layer": "Core", "group": "Selection", "purpose": "Pick several options, or one from a short list.", "do": "Checkboxes for options the reader can pick in any combination. Radios for one choice from a short list that stays in view.", "dont": "A label written as a question, such as \"Send updates?\", or as a negative, such as \"Don't email me\". Name the option: \"Email me updates\".", "url": "https://filipgutica.github.io/design-system/components.html#checkbox-and-radio", "spec": "https://filipgutica.github.io/design-system/components.md#checkbox-and-radio" }, { "id": "radio-card-group", "name": "Radio card group", "layer": "Core", "group": "Selection", "purpose": "Pick one option that needs a description.", "do": "Use radio cards when the reader chooses by a description, such as plans or deploy modes. Give each card a title and one line on what differs.", "dont": "Radio cards for options that a title alone explains. Use radios.", "url": "https://filipgutica.github.io/design-system/components.html#radio-card-group", "spec": "https://filipgutica.github.io/design-system/components.md#radio-card-group" }, { "id": "switch", "name": "Switch", "layer": "Core", "group": "Selection", "purpose": "Turn a setting on or off at once.", "do": "Use a switch for a setting that applies the moment it changes. Its label names the setting, such as \"Dark mode\", and stays the same when on or off.", "dont": "A switch in a form that applies on submit. Use a checkbox there.", "url": "https://filipgutica.github.io/design-system/components.html#switch", "spec": "https://filipgutica.github.io/design-system/components.md#switch" }, { "id": "toggle-button", "name": "Toggle button", "layer": "Core", "group": "Selection", "purpose": "A labelled card that latches on, with a switch inside.", "do": "Use it for an on or off option whose label sits inside the control, such as \"Wrap lines\" in a viewer's toolbar.", "dont": "A toggle button for an action that runs once, such as Refresh. It stays on until pressed again; an action is a button.", "url": "https://filipgutica.github.io/design-system/components.html#toggle-button", "spec": "https://filipgutica.github.io/design-system/components.md#toggle-button" }, { "id": "segmented-control", "name": "Segmented control", "layer": "Core", "group": "Selection", "purpose": "Two to five short options that apply at once.", "do": "Use it for two to five short options that apply at once and change how the same content shows, such as a view mode or the System, Light, and Dark choice.", "dont": "A segmented control that switches between panels of content. Use tabs.", "url": "https://filipgutica.github.io/design-system/components.html#segmented-control", "spec": "https://filipgutica.github.io/design-system/components.md#segmented-control" }, { "id": "text-input-and-textarea", "name": "Text input and textarea", "layer": "Core", "group": "Inputs", "purpose": "Type a short value or a longer note.", "do": "A textarea for an answer longer than one line, and `type=\"search\"` for a field that filters.", "dont": "A label or an instruction that lives only in the placeholder. It disappears as the reader types.", "url": "https://filipgutica.github.io/design-system/components.html#text-input-and-textarea", "spec": "https://filipgutica.github.io/design-system/components.md#text-input-and-textarea" }, { "id": "select", "name": "Select", "layer": "Core", "group": "Inputs", "purpose": "Choose from a longer list.", "do": "Use a select for one choice from more than five options, in a predictable order: alphabetical, numeric, or by frequency of use.", "dont": "A first option that acts as the label, such as \"Choose a region\". The label goes above the field.", "url": "https://filipgutica.github.io/design-system/components.html#select", "spec": "https://filipgutica.github.io/design-system/components.md#select" }, { "id": "field-wrapper", "name": "Field wrapper", "layer": "Core", "group": "Inputs", "purpose": "Label, description, and error text around a field.", "do": "Write the error as the fix, such as \"Enter a date after today\", and the description as a format or limit, such as \"Up to 64 characters\".", "dont": "A description that repeats the label, or an error that only says \"Invalid\".", "url": "https://filipgutica.github.io/design-system/components.html#field-wrapper", "spec": "https://filipgutica.github.io/design-system/components.md#field-wrapper" }, { "id": "slider", "name": "Slider", "layer": "Core", "group": "Inputs", "purpose": "Set a value in a range.", "do": "Use a slider for an approximate value in a range, such as volume or opacity, and show the current value as text beside it.", "dont": "A slider for a value the reader must set exactly, such as a port or a price. Use a text input.", "url": "https://filipgutica.github.io/design-system/components.html#slider", "spec": "https://filipgutica.github.io/design-system/components.md#slider" }, { "id": "progress", "name": "Progress", "layer": "Core", "group": "Feedback and status", "purpose": "Show how far a task has got.", "do": "Use it for a task with a known end, such as an import, and name it for the task.", "dont": "A progress bar for a measured value, such as disk usage or a rating. It shows a task moving to its end; use text or a score.", "url": "https://filipgutica.github.io/design-system/components.html#progress", "spec": "https://filipgutica.github.io/design-system/components.md#progress" }, { "id": "score", "name": "Score", "layer": "Core", "group": "Feedback and status", "purpose": "Show a value out of a maximum.", "do": "Use it for a value out of a fixed maximum, such as 4/5, and keep one maximum across a list so the rows compare.", "dont": "A score for a percentage or an open-ended count. Write the number as text.", "url": "https://filipgutica.github.io/design-system/components.html#score", "spec": "https://filipgutica.github.io/design-system/components.md#score" }, { "id": "badge", "name": "Badge", "layer": "Core", "group": "Feedback and status", "purpose": "A short status label.", "do": "A one- or two-word status or category on an item, such as \"Healthy\" or \"Beta\", with a status tone only when it is a status.", "dont": "A badge that repeats the title, or one on every row with the same value. Badge the exceptions.", "url": "https://filipgutica.github.io/design-system/components.html#badge", "spec": "https://filipgutica.github.io/design-system/components.md#badge" }, { "id": "alert", "name": "Alert", "layer": "Core", "group": "Feedback and status", "purpose": "A real caveat or status message in the page.", "do": "Use an alert for a caveat or status message the reader needs before acting. When action is needed, name it, such as \"Reconnect the source to resume sync\".", "dont": "An alert for decoration or routine emphasis. A short status label is a badge; explanations and recovery instructions stay in an alert.", "url": "https://filipgutica.github.io/design-system/components.html#alert", "spec": "https://filipgutica.github.io/design-system/components.md#alert" }, { "id": "surface-and-card", "name": "Surface and card", "layer": "Core", "group": "Containers and overlays", "purpose": "Panels and cards for parallel, comparable content.", "do": "Use cards for a few parallel, self-contained items that a reader compares, such as plans or projects.", "dont": "A panel inside a panel, or cards around ordinary prose.", "url": "https://filipgutica.github.io/design-system/components.html#surface-and-card", "spec": "https://filipgutica.github.io/design-system/components.md#surface-and-card" }, { "id": "figure", "name": "Figure", "layer": "Core", "group": "Containers and overlays", "purpose": "An image or diagram with a caption.", "do": "Caption every figure with what it shows. When the prose refers to one figure by number, number them all.", "dont": "A screenshot of code or of a component. Show code as text, so the reader can copy it, and a component live.", "url": "https://filipgutica.github.io/design-system/components.html#figure", "spec": "https://filipgutica.github.io/design-system/components.md#figure" }, { "id": "dialog", "name": "Dialog", "layer": "Core", "group": "Containers and overlays", "purpose": "A modal task that needs an answer before the page continues.", "do": "Use a dialog for a short task the reader must finish or cancel before the page continues, such as confirming a deletion. Title it with that task.", "dont": "A dialog that opens without the reader asking, such as on page load, or one that holds a long form. A long form gets its own page.", "url": "https://filipgutica.github.io/design-system/components.html#dialog", "spec": "https://filipgutica.github.io/design-system/components.md#dialog" }, { "id": "drawer", "name": "Drawer", "layer": "Core", "group": "Containers and overlays", "purpose": "A side panel, such as phone navigation.", "do": "Use a drawer for navigation or supporting detail that slides in from the side its trigger sits on, such as phone navigation, and open it from a named button.", "dont": "The page's main task inside a drawer. The drawer holds navigation or detail; the task stays on the page.", "url": "https://filipgutica.github.io/design-system/components.html#drawer", "spec": "https://filipgutica.github.io/design-system/components.md#drawer" }, { "id": "navigation-list", "name": "Navigation list", "layer": "Core", "group": "Navigation", "purpose": "Rows of links with current page and current location.", "do": "Label a page link with the destination page's title, and an in-page link with its destination section's heading.", "dont": "Actions such as Delete or Sign out in a navigation list. Every row is a link to a place; an action is a button.", "url": "https://filipgutica.github.io/design-system/components.html#navigation-list", "spec": "https://filipgutica.github.io/design-system/components.md#navigation-list" }, { "id": "section-rail", "name": "Section rail", "layer": "Core", "group": "Navigation", "purpose": "A sticky list of sections that moves into a drawer on phones.", "do": "Use a rail for the sections of a long page, or for a site's pages. A site's pages may take a navigation strip of 6 links or fewer instead.", "dont": "A rail beside a strip or a contents list that holds the same links. Each level has one list.", "url": "https://filipgutica.github.io/design-system/components.html#section-rail", "spec": "https://filipgutica.github.io/design-system/components.md#section-rail" }, { "id": "find-field", "name": "Find field", "layer": "Core", "group": "Navigation", "purpose": "Filter a navigation list as you type.", "do": "Use it at the top of a long navigation list, such as a section rail, to filter its rows by name or purpose.", "dont": "A find field used as a site-wide search. It matches only the rows of the list it filters.", "url": "https://filipgutica.github.io/design-system/components.html#find-field", "spec": "https://filipgutica.github.io/design-system/components.md#find-field" }, { "id": "breadcrumbs", "name": "Breadcrumbs", "layer": "Core", "group": "Navigation", "purpose": "The path from the site to this page.", "do": "Put the trail above the page's h1 on every page below the site's home page, and keep the project switcher in the header.", "dont": "A trail in the site header in place of the project switcher: the header changes from page to page, and the path reads as the page title.", "url": "https://filipgutica.github.io/design-system/components.html#breadcrumbs", "spec": "https://filipgutica.github.io/design-system/components.md#breadcrumbs" }, { "id": "pager", "name": "Pager", "layer": "Core", "group": "Navigation", "purpose": "Previous and next pages in a sequence.", "do": "Use a pager for pages a reader goes through in order, such as a guide's chapters or the skills in one group.", "dont": "A pager on pages with no reading order, or one per section on a page with a section rail.", "url": "https://filipgutica.github.io/design-system/components.html#pager", "spec": "https://filipgutica.github.io/design-system/components.md#pager" }, { "id": "tabs", "name": "Tabs", "layer": "Core", "group": "Navigation", "purpose": "Switch panels about one object, without leaving the page.", "do": "Use tabs for panels about one object, such as a monitor's Overview and History, when the URL does not change.", "dont": "Links with `role=\"tab\"`, or one set that mixes pages and panels. Pages take a navigation strip.", "url": "https://filipgutica.github.io/design-system/components.html#tabs", "spec": "https://filipgutica.github.io/design-system/components.md#tabs" }, { "id": "skip-link", "name": "Skip link", "layer": "Core", "group": "Navigation", "purpose": "Jump past the header to the content.", "do": "A \"Skip to content\" link on every page with a header or rail before `main`; the first Tab shows it.", "dont": "Hiding it with `display: none`, which also takes it out of the Tab order.", "url": "https://filipgutica.github.io/design-system/components.html#skip-link", "spec": "https://filipgutica.github.io/design-system/components.md#skip-link" }, { "id": "keyboard-key", "name": "Keyboard key", "layer": "Core", "group": "Navigation", "purpose": "Show a key or shortcut in text.", "do": "A key or shortcut in running text or shortcut docs, one key per ``.", "dont": "A key style for code or button names. Code takes ``; a button's name is plain text.", "url": "https://filipgutica.github.io/design-system/components.html#keyboard-key", "spec": "https://filipgutica.github.io/design-system/components.md#keyboard-key" }, { "id": "code-block", "name": "Code block", "layer": "Core", "group": "Code and examples", "purpose": "Source code with an optional header and Copy, and a live example above it.", "do": "Use a code block for source with no live result. When the reader should see the result too, use the variant with a live example.", "dont": "The same language label on every block of a page. Put useful setup context above the block instead.", "url": "https://filipgutica.github.io/design-system/components.html#code-block", "spec": "https://filipgutica.github.io/design-system/components.md#code-block" }, { "id": "command-plate", "name": "Command plate", "layer": "Identity", "group": "Identity", "purpose": "A shell command on a hue-tinted plate.", "do": "Use it for a shell command the reader runs, one command per line.", "dont": "A `$` typed into the command. CSS draws the prompt; a typed one is copied with the command.", "url": "https://filipgutica.github.io/design-system/components.html#command-plate", "spec": "https://filipgutica.github.io/design-system/components.md#command-plate" }, { "id": "terminal-capture", "name": "Terminal capture", "layer": "Identity", "group": "Identity", "purpose": "A recorded terminal screen with a status line.", "do": "Use it to show what a command prints, one tab per capture, with the path and branch in the status line.", "dont": "A capture for a screenshot of a graphical app. Use a figure.", "url": "https://filipgutica.github.io/design-system/components.html#terminal-capture", "spec": "https://filipgutica.github.io/design-system/components.md#terminal-capture" }, { "id": "site-header", "name": "Site header", "layer": "Identity", "group": "Identity", "purpose": "The ~/name header with project switcher and appearance.", "do": "Keep the same header and site links, six at most and in one order, on every page of a personal product site.", "dont": "The site header on an application screen. An application keeps its own navigation.", "url": "https://filipgutica.github.io/design-system/components.html#site-header", "spec": "https://filipgutica.github.io/design-system/components.md#site-header" }, { "id": "page-type-and-helpers", "name": "Page type and helpers", "layer": "Identity", "group": "Identity", "purpose": "Mono headings, steps, definitions, facts, and the footer.", "do": "Use steps for a sequence the reader follows in order, definitions for terms with short meanings, and facts for short labels and values.", "dont": "The `##` mark on an application screen, or on h3 and lower.", "url": "https://filipgutica.github.io/design-system/components.html#page-type-and-helpers", "spec": "https://filipgutica.github.io/design-system/components.md#page-type-and-helpers" } ] }