v3.0.0 · CC BY 4.0

A design system you can almost touch.

Covi-pi-1 is a tactile, hardware-inspired design system for the web: an aluminium body, white key caps, coloured knobs and a black OLED read-out, as 124 Vue 3 components and CSS tokens.

Request access Open the live Storybook

The Covi-pi-1 device pattern in the light theme: speaker grilles, three OLED displays, four coloured knobs and a preset dial, track and transport keys, a 16-step sequencer, an XY filter pad and a piano keyboard.

The same device pattern in the dark Graphite theme.

Components

124

Stories

927

Themes

2 + sys

WCAG

2.2 AA

The visual language

Five physical parts, every screen

Aluminium body

Calm, light surfaces that hold everything else; Graphite in the dark theme.

White key caps

Raised keys set into thin grooves. Pressing one feels like pressing hardware.

Coloured knobs

Blue, green, white and orange caps: the only strong colour on the page.

Four knobs labelled Attack, Decay, Sustain and Release with blue, green, white and orange caps.

OLED display

Black glass for numbers, meters and status, set in a mono typeface.

Grille and dots

Speaker grilles and small "sharp" dots as quiet decoration and signals.

What's inside

A full system, with a hardware family no one else has

124 components. Actions, inputs, selection, date and time, data display, feedback, overlays, navigation and layout, plus Knob, Encoder, Key, KeyPanel, Display, Sequencer, Transport, Piano, XYPad, PatchPoint, StereoMeter, TapeCounter and DeviceScreen.
Accessible by default. WAI-ARIA patterns, keyboard-only use, visible focus, 4.5:1 text in both themes. Every one of the 927 stories is checked with axe and has a keyboard test.
Two themes and theming. Aluminium and Graphite, follow-the-system, compact density and a runtime theming API without a flash on load.
Tokens first. W3C DTCG JSON that builds CSS variables, a JS module and a Tokens Studio file for Figma.
English, Spanish, right-to-left. Built-in strings and logical CSS everywhere.
Vue or plain CSS. Use the Vue 3 components, or one stylesheet of plain classes; a PrimeVue 4 skin is included.

A studio dashboard built with Covi-pi-1: side navigation, OLED stat tiles, an input level meter and a recent sessions table. — The dashboard pattern, built only from Covi-pi-1 components.

The same dashboard in the dark Graphite theme. — The dashboard pattern, built only from Covi-pi-1 components.

A device screen titled Record settings with OK and BACK key hints. — DeviceScreen: menus that page like hardware.

Transport keys: back, record, play, stop and forward. — Transport keys with real keyboard shortcuts.

Built with Covi-pi-1

Already shipping, and growing

Fuji's Discover page: a key-cap navigation bar, a search field with an orange Search key, film simulation and mood chips, and a lighting card.

In use

Fuji, a camera companion

A personal app for the Fujifilm X-S20: film recipes and C1–C4 bank planning, the camera manual searchable in English and Spanish, recipe import from posts, and studio lighting setups with top and side diagrams converted to the gear you own. Navigation is a row of key caps; read-outs are OLED displays.

coviyarce.com: a key-cap navigation bar, an OLED role badge, a large thin headline and Download CV and Explore Skills keys.

coviyarce.com in the dark Graphite theme.

Live

coviyarce.com, a portfolio

The author's portfolio and CV: satin hero, key-cap navigation, an OLED role badge, skills and case studies, both themes. Its contact form is sent through the same mailer as the access requests below.

In development

A workflow console

A friend is building a console for monitoring automated workflows on Covi-pi-1: run states as status lights, live numbers on OLED read-outs, and tables that show the essentials first and reveal detail on demand. Illustration only; the product is not public yet.

Access

The repository is private. Ask, and you're in.

01
Read the agreement
Access is granted only under the Attribution Agreement. It is the only way in.
02
Write your promise and sign
In your own words, promise how you will credit Covi-pi-1, then sign with your full name.
03
Accept the invitation
Once approved, GitHub emails you an invitation to the repository and its package.

Request access

Full name Email GitHub username What will you use it for? (optional) Your attribution promise, in your own words Say where and how you will credit "Covi-pi-1 Design" by Luis Carlos Covilla Yarce (CC BY 4.0). Write it yourself: at least 60 characters, naming Covi-pi-1 Design. Signature: type your full name I have read and accept the Covi-pi-1 Design Attribution Agreement, version 1.0. I understand that using the work without the attribution I promised ends my licence and is copyright infringement, and that presenting it as my own is plagiarism.

Your request is emailed privately to the author and kept as the record of the agreement. You can browse every component without access in the live Storybook.

Licence

Creative Commons Attribution 4.0

Use, share and adapt Covi-pi-1, including in commercial work, as long as you give credit, link to the licence and say if you changed it. A credit line like this is enough:

"Covi-pi-1 Design" by Luis Carlos Covilla Yarce, CC BY 4.0, https://coviyarce.github.io/covi-pi-1/

The licence covers the original work only. The bundled open-source icons (Lucide, ISC) and fonts (Jost and IBM Plex Mono, SIL OFL 1.1) keep their own licences. Read the licence summary.