Design System
The console for building bridges.
Bifra is the Bifrost — the bridge between a website and the humans and agents that consume it. This is the visual language that carries that idea: precise, structural, and a little nostalgic.
Principles
Bifra turns websites into typed APIs. The interface should feel like the tool: precise, structural, and a little nostalgic — the console of a machine that builds bridges.
Hard edges
No rounded corners. Every surface is a crisp rectangle. Radius is 0 by default — the shape language is a terminal, not a bubble.
Block, not float
Interactive surfaces sit on the page with a 2px ink border and a hard offset shadow. Pressing pushes them into the shadow. No blur, no glow.
Monospace-first
Type is set in JetBrains Mono. It reads like a build log. Silkscreen pixel type is reserved for the wordmark and the smallest labels.
One bridge
Bifra is the Bifrost — the bridge between a website and the humans and agents that consume it. The rainbow shows up once, as a thin spectrum stripe, never as decoration.
Color
Warm paper and ink do the work. A single golden accent signals interactivity and state. Keep the palette to paper, ink, one accent — the spectrum is not a palette color.
--background
Warm paper
--foreground
Ink
--card
Raised paper
--secondary
Fill
--muted-foreground
Subtle text
--border
Hairline
--accent
Golden — the only accent
Typography
Two families. JetBrains Mono is the workhorse for headings, body, and labels. Silkscreen is the pixel wordmark, used sparingly.
BIFRA
Silkscreen · logo, tags
Turn websites into APIs
Section heading
Body copy is set in JetBrains Mono at a comfortable size with relaxed line height, so long passages still read like documentation rather than a terminal dump.
Eyebrow label / metadata
Edges & Shadow
The whole system is built from two utilities. Bold surfaces get .block-edge; secondary ones get .block-edge-sm. Shadows are solid ink, never soft.
Bifrost Motif
The one flourish. Bifra is the bridge that connects a site to its consumers — drawn as a single beam of light, not a rainbow. The pixel mark cuts diagonally in three cool light tones and pairs with the wordmark to form the logo.
bifrost-4
bifrost-5
bifrost-6
Three tokens only — bifrost-4/5/6, cyan through indigo. Reserve them for the mark; never wash a surface in them.
Components
How the primitives compose into the interface — inputs, tags, cards, and segmented controls all share the same hard-edged language.
FlightScope
skyscanner.com
Typed flight search and price data, pulled straight from a live travel site.
Motion
Animation is a tool, not decoration. It only fires to confirm an action or reveal a relationship — never on idle. Motion is fast, functional, and always yields to reduced-motion preferences.
Lucide icons animated with Motion (via Animate UI). They stay still until a meaningful interaction — hover on a card, focus on a button — then play once.
Page transitions
Route changes fade content in over 300ms. Opacity only — no transform — so sticky sidebars and headers keep working. The header stays put; only the page body settles in.
Reduced motion
Every animation checks prefers-reduced-motion. When set, transitions are skipped entirely and the interface renders instantly.