Flexion Labs

Design system

Component library and design tokens for Flexion Labs. This page showcases every component available for building pages.

Color tokens

The Flexion 2020 brand palette. Every color is available as a CSS custom property.

Midnight#171717
Pewter#595959
Platinum#EBEBEB
Snow#FFFFFF
Tango#E34E35
Brick#923120
Melon#FBB4A7
Lapis#025197
Ocean#00AAD5
Sky#BCE7FD
Lilac#E0CCF5
Eggplant#442DA4
Butter#F8E989

Typography

Figtree for headings, Inter for body text, with a major-third (1.25) fluid type scale. Line height 1.5 for body, 1.15 for headings.

Step 4 — Page title
Step 3 — Section heading
Step 2 — Subsection
Step 1 — Card title
Step 0 — Body text
Step −1 — Small text, labels

Compositions

Layout utilities that compose into larger patterns. Apply via class names.

.l-stack

Vertical flex column with configurable gap via data-space attribute.

Item 1
Item 2
Item 3

.l-cluster

Horizontal flex-wrap for inline items like tags, buttons, or metadata.

Item AItem BItem CItem D

.l-sidebar

Responsive two-column layout. The first child forms the sidebar (16rem basis), the second takes remaining space. Wraps to single column on narrow containers.

Tag

Small inline labels for status, tier, and category. Renders a <span class="tag"> with a data-variant attribute.

Tier variants

ActiveAs-isArchivedUnreviewed

Category variants

ProductToolWorkshopPrototypeForkUncategorized

Status variants

PassWarnFail

Button

Actions and form submissions. Renders <button class="btn"> or <a class="btn"> when href is provided.

Variants

States

As link

Visit GitHubVisit GitHub

Select

Dropdown selection with label. Wraps a native <select> with custom styling and a chevron indicator.

Default

Card

A container with tango top-border accent, subtle shadow, and padding. Use for any content that benefits from visual grouping.

Default

Project name

A short description of the project and what it does.

ActiveProduct

Side navigation

Sticky vertical navigation for long pages. Uses CSS position: sticky with a left border accent on the active item.

Lab card

Featured-lab card on the home page. Title and tagline sit on top; links group into one column per distinct kind (Demo, Repository, or Case study) below. Columns always appear in kind order (Demo → Repository → Case study), and multiple links of the same kind stack vertically within their column in document order. Links with matching list positions across columns (first Demo ↔ first Repository) refer to the same project.

Messaging Lab

Text messaging services to deliver critical updates to the people you serve.

Repo card

Displays a repository with its name, description, tier and category tags. Links to the repo's detail page.

example-project

A demonstration project showing the repo card component.

Active Product

Standards list

Stewardship checklist showing pass/warn/fail status for each repository standard. Uses a left border accent to indicate status.

  • READMEpass
  • Licensepass
  • Contributing guidefail
  • Recent activitywarn
  • Tier assignedpass

Catalog filter

An HTML Web Component (<catalog-filter>) that wraps a filter form and list. With JavaScript, filters items in-place by tier and category. Without JavaScript, the form submits as a GET request.

See the Work page for a live example.

Sortable table

An HTML Web Component (<sortable-table>) that wraps a table. Column headers become clickable sort controls. Works without JavaScript — the default sort is applied server-side.

See the Health page for a live example.

Copy button

An HTML Web Component (<copy-button>) that copies the content of a [data-copy-source] element to the clipboard. Hidden via :not(:defined) when JavaScript is unavailable.