One glass language for every Bible Translation app. Scripture stays legible; everything around it is quiet.

Generative Glass is the shared system behind 3D Review, the FIA companion, Aquifer Window and the apps that follow. Surfaces are translucent frosted glass over a slow aurora, edges are hairlines of light, depth is diffuse. The aurora and the glass itself are parametric: they respond to the passage, its script, and where a project is in its process. The apps have different building blocks; the material, the type, the motion and the voice are the same.

Color

Four families. Ink for text, paper for the studio, aurora for what lives behind glass, and an accent budget of exactly three colors. Status is carried by aurora tint and by shape, never by a fifth accent. Saturation arrives only through imagery.

Type

Two roles. UI type is SF Pro (Display for titles and numerals, Text for reading sizes), weights 400 to 700. Scripture is the one exception: it gets a reading face per script, so Hebrew, Greek, Arabic and Devanagari render in a serif drawn for that script, never in a fallback. UI never changes with the scripture language.

Glass

Every surface carries three things at once: a 0.5px white hairline, an inset top light, and a faint prismatic sheen on the diagonal. Blur only where a surface floats over content it does not own. Never more than two glass levels stacked. Scripture always sits on fill 3 or higher.

--glass-fill-1: rgba(255,255,255,.28);  /* sheer */
--glass-fill-2: rgba(255,255,255,.46);  /* card */
--glass-fill-3: rgba(255,255,255,.62);  /* raised, chip, scripture */
--glass-fill-4: rgba(255,255,255,.78);  /* sheet, long reading */

backdrop-filter: blur(var(--blur-strong)) var(--sat-glass);
/* sheer 8 · soft 16 · medium 24 · strong 40 · heavy 64 */

border: var(--border-glass);            /* .5px white .7 */
box-shadow: var(--inner-top), var(--inner-edge);
&::before { background: var(--refraction); opacity:.6 }

--shadow-card: 0 2px 6px rgba(20,28,45,.05),
  0 14px 34px rgba(20,28,45,.08), 0 40px 80px rgba(20,28,45,.06);

.gg-card{
  background:var(--glass-fill-2);
  backdrop-filter:blur(var(--blur-strong)) var(--sat-glass);
  border:var(--border-glass);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card),var(--inner-top),var(--inner-edge);
}

Spacing and radius

Motion

Organic and viscous. Nothing snaps, nothing fades linearly. Sequenced in three beats: what leaves softens, what connects draws, what arrives rises. A particle ring precedes anything about to expand.

--dur-micro 140ms · --dur-fast 240ms · --dur-base 420ms
--dur-slow 680ms · --dur-morph 1100ms · --float-cycle 6s

Icons

Stroke only, 1.7px, round caps and joins, 24px grid, monochrome. Lucide outlines. The 16 mapped today; BT apps will need book, headphones, users, check, cloud-off and message-circle from the same set. No emoji, ever. Metaphor graphics (jar fill, plant growth) are illustrations, not icons.

Glass primitives

The material components every BT app builds from, live from the bundle. The travel kit's content components (FlightCard, RouteArc, WeatherPill, MapCanvas) are retired; DestinationCard, CategoryTile, SpotHero and RouteList are kept and generalized below as resource, category, place and step surfaces.

BT components

Seven content components shared across the apps, plus the five structural ones (tab bar, sheet, fields, search, desktop shell). Not every app uses every block; each one follows the card recipe so mixing them never looks mixed.

LanguagePicker

One picker for every place a language is chosen: the app's own locale, a filter on resources, an attribute on a project or passage, the target of a translation, or a gateway pair. Thousands of languages, so the list is never browsed cold: a Suggested group comes first (recent, then this person's project languages, then the device locale, then gateway languages), and typing matches autonym, English name, code, region and alternate names. Every row carries coverage per resource type in three states, and the row itself never lies about what exists.

Generative rules

The aurora is seeded by scripture: testament sets the hue family, genre sets the blob layout. The glass is parametric: passage length sets fill, script sets blur, process stage tints the sheen, nesting depth steps the radius. Every output snaps to a ladder step, so the result is always a token, never an arbitrary value.

{{ gCss }}

Project constellation

A partner's projects as a drifting field instead of a list. Each project is a glass orb whose inner aurora is generated from its state. Clusters sit where their region is: orbs are placed on a Natural Earth projection, and a hairline world outline can be drawn under them or switched off. Click a region name to zoom to it, World to return. For a coordinator with forty projects this is the home screen; for a translator with one it is a single orb.

Voice and copy

Calm, second person, short. The app speaks to one named person and never about itself. It never grades a team; it shows bands and asks questions. Scripture is quoted exactly and never paraphrased in UI copy.