01 / Foundations

Color system

Light-led surfaces create room for the signal. Deep greens carry action, structure, and emphasis.

Powder White

#FBFBFB

Off White

#F5F5F5

Chalk

#EAEAEA

Slate

#A0A0A0

Soft Black

#242424

Morning Mist

#B0D9C9

Rainforest

#008351

Deep Canopy

#004F31

Neon Fern

#BEFF81

Morning Mist → Rainforestvar(--gradient)

02 / Foundations

Type system

Gendy brings the gesture. Geist Mono gives the system its technical, measured voice.

Display / Gendy / fluid / 200px max

Make sound strange.

Section header / Gendy / 64px max

Open by design.

Body header / Geist Mono / var(--text-size-body-header) / semibold

Tools for people who want to get under the hood.

Main body / Geist Mono / var(--text-size-body) / regular

We build modern audio instruments and tools that reimagine how sound is made, played, and experienced.

03 / Foundations

Space and rhythm

Spacing uses a compact rhythm that can expand fluidly across a screen without losing its pulse.

--space-14px

--space-28px

--space-312px

--space-416px

--space-524px

--space-632px

--space-748px

--space-864px

04 / Core UI

Components

Semantic, composable pieces for future product, education, collaboration, and contact pages.

Eyebrow

Names the signal before the signal arrives.

Read the pattern

Buttons

Text links

Small rainforest link Large ink link

Cards

Surfaces can hold product stories, technical notes, or collaborative invitations.

View form fields

Fields

Name

A human name, not a handle.

Message

05 / Usage

Build with intent.

Use the tokens

Reach for semantic variables instead of raw color values. The system should remain easy to retune.

Keep the edges tactile

Use restrained motion for hover, press, and focus states. Respect reduced-motion preferences.

Make the invitation clear

Every interaction should tell a visitor what they can explore, make, learn, or begin together.

06 / Figma components

Instrument panel

Exact component states from the Brand Guide, translated into reusable React components and local assets.

CTA button / state variants

Regular buttons

Glass surface / 3-layer compositor bubble

Frosted Glass Bubble

Rainforest Surface Bubble

Contour wave / ambient background

Slow breathing contour field

Site header / responsive navigation

Join the Beca waitlist

Site footer / responsive navigation and newsletter

Pillar card / interactive showcase & state variants

01.

Nothing sounds like it.

01.

Nothing sounds like it.

The codebase is yours to explore. Dig as deep as you want — or just plug in and play. No ceiling, no floor. Whether you're performing or rewriting the engine, frco. meets you exactly where you are.

Sound playground / functional player states

The Sound Playground

What does a plant
actually sound like?

Pick a sound, layer it, make it yours. No signup needed — just play.

Explore library

Aloe Barbadensis Miller

Yardwork

Aloe Barbadensis MillerFatty Recording Co.

0:00 / 0:00

Download buttons / platform and state variants

iosDownload for iOS

Download for iOS

androidDownload for Android

Download for Android

windowsDownload for WINDOWS

Download for WINDOWS

Fields / contact form layout

I'm here because…