VOLUME 01 · LIMINAL
LIMINAL WHITESPACE
The studio that disappears so the products can speak.
Restraint is the loudest signal. Where the work (Feeldreamy) is dark, dense, and violet, the wrapper that holds the work is radiant, airy, and spectral.
The only colour we permit is the prismatic refraction — a thin animated conic-gradient ring at edges and CTAs — because this surface earns exactly one chromatic gesture, and we will spend it on light bent through a prism.
This brandbook is a paragon of the system it describes. Read it scrolling, snap by snap.
A — VOICE & TONE
The wrapper that disappears so the products can speak.
Six principles. Six restraints. The whole system follows from these.
VOICE · 01
The chrome disappears.
Restraint is the loudest signal. Nothing in the wrapper competes with the product.
VOICE · 02
One chromatic moment per page.
The prismatic ring is permitted at edges, CTAs, focus rings. Never as fill, never as background.
VOICE · 03
Air, not noise.
Whitespace is structural. Sections are 100lvh because we trust the reader to scroll.
VOICE · 04
Inter Display does the work.
We pair editorial type with monospace eyebrows. Graphics rarely make an appearance.
VOICE · 05
Motion reveals, never decorates.
Three permitted gestures: text resolves, light bends, edges glide. No bounce, no overshoot.
VOICE · 06
First-person is the default voice.
We say 'we' because two founders write the words. The site is a body, not a brochure.
B — COLOR
Warm white. One chromatic gesture.
OKLCH tokens render the same colour intent across every renderer. The prismatic stops are the only chromatic instruments; they sit at edges, never as fill.
Light mode — Surfaces
-
--lim-surface-page
Page background
16.9:1 vs ink-primary
-
--lim-surface-elevated
Cards, side panels
15.4:1 vs ink-primary
-
--lim-surface-sunken
Quoted, inset blocks
13.8:1 vs ink-primary
Light mode — Ink
-
--lim-ink-primary
Body, headings
16.9:1 on page (AAA)
-
--lim-ink-soft
Subhead, supporting
7.2:1 on page (AAA)
-
--lim-ink-mute
Caption, eyebrow
4.7:1 on page (AA boundary)
-
--lim-ink-inverted
Text on dark surfaces
16.9:1 on inverted
Hairlines
-
--lim-hairline
1px dividers
Decorative
-
--lim-hairline-strong
Dividers on focus, button borders
3.1:1 vs page
Prismatic stops — the one chromatic gesture
-
--lim-prismatic-stop-1
Conic stop 1 — violet
Accent only
-
--lim-prismatic-stop-2
Conic stop 2 — teal / cyan
Accent only
-
--lim-prismatic-stop-3
Conic stop 3 — warm amber
Accent only
-
--lim-prismatic-stop-4
Conic stop 4 — rose / magenta
Accent only
-
--lim-prismatic-ink
Solid prismatic, accessible fallback
4.6:1 on page (AA)
Focus & halo
-
--lim-focus-ring
2px focus outline
3:1 minimum vs page
-
--lim-focus-halo
4px halo behind outline
Decorative
Shadows
--lim-shadow-soft
Card rest
--lim-shadow-lifted
Card hover
--lim-shadow-press
Button rest
Dark mode
-
--lim-surface-page
Warm graphite canvas
15.5:1 vs ink-primary
-
--lim-surface-elevated
Cards
13.0:1 vs ink-primary
-
--lim-surface-sunken
Inset
17.2:1 vs ink-primary
-
--lim-ink-primary
Body, heading
15.5:1 on canvas
-
--lim-ink-soft
Subhead
9.4:1 on canvas
-
--lim-ink-mute
Caption
4.7:1 on canvas (AA)
-
--lim-prismatic-ink
Accent text
4.8:1 on canvas
Verified contrast pairs
| Pair | Ratio | Verdict |
|---|---|---|
| ink-primary on surface-page | 16.9:1 | AAA · body, headings |
| ink-soft on surface-page | 7.2:1 | AAA · subhead, supporting |
| ink-mute on surface-page | 4.7:1 | AA · caption boundary |
| ink-mute on surface-elevated | 4.4:1 | Downgrade to ink-soft |
| ink-mute on surface-sunken | 4.0:1 | Fails AA — never use |
| prismatic-ink on surface-page | 4.6:1 | AA · accent text |
| ink-primary on dark canvas | 15.5:1 | AAA · dark body |
| prismatic-ink on dark canvas | 4.8:1 | AA · dark accent |
FORBIDDEN PAIR
Never place --lim-ink-mute on --lim-surface-elevated or
--lim-surface-sunken. Contrast falls to 4.4:1 and 4.0:1 — both fail AA
for normal text. Use --lim-ink-soft on elevated surfaces.
C — TYPOGRAPHY
Inter Variable. Twelve steps. One ratio.
Inter Variable carries display and body. JetBrains Mono Variable carries eyebrows, URLs, and section numerals. Optical-size axis is on auto.
Pairing rationale
Tight tracking on display copy because Inter at large sizes has a generous default that reads marketing-template. Slight negative tracking on body copy improves perceived sharpness on Retina. Generous leading on body — 1.65, about 28px line for 17px text — gives the editorial breath the system depends on.
The mono axis is a single font (JetBrains Mono Variable) reserved for eyebrows, URLs, and section numerals. We do not mix display and mono in the same word; we do not mix mono and sans in a single button label. Mono signals supporting metadata; sans signals primary thought.
Scale (twelve steps)
Optical-size axis demonstration
Inter ships a true optical display variant. When font-optical-sizing: auto
is set, the same logical size renders with display-tuned letterforms at large sizes and
body-tuned letterforms at small sizes. The difference is most visible in punctuation,
stem thickness, and aperture.
opsz auto · 14px
The chrome that disappears.
opsz auto · 32px
The chrome that disappears.
Editorial rules
- Display copy uses
text-wrap: balance. Body copy usestext-wrap: pretty. - No display copy past three lines. If it spills, shorten the line, not the size.
- Eyebrow tracking is fixed at 0.22em. Do not adjust per word.
- Lithuanian diacritics ship in Latin-Extended-A subset. Do not strip them.
- Mono text never below 13px. Body text never below 15px (small).
D — MOTION
Three gestures, never more.
Text resolves. Light bends. Edges glide. CSS scroll-driven animations carry the load; JS appears only where raf-lerp matters.
Live primitives
text-reveal-stagger
Words rise from blur.
520ms each · 24ms stagger · ease-out-emphasis. Per-word blur 8 to 0, translateY 0.4em to 0.
lens-flare-hover
Continuous · 0.18 lerp. Radial bloom follows cursor at 18%. Off on coarse pointers.
prismatic-ripple
180ms in · 8000ms full spin · ease-prism-spin. Opacity 0.45 to 1.0.
scroll-snap-glide
900ms settle · ease-glide. Scroll the tile column to feel the snap.
hairline-grow
520ms · ease-out-emphasis. clip-path inset to inset. Scroll-driven, never reverses.
language-flip
180ms · ease-in-out-soft. Active character flips vertically; view-transition cross-fades content.
theme-fade
320ms · ease-in-out-soft. Routed through CSS view-transitions, no reflow.
portrait-bloom
900ms · ease-out-emphasis. Saturation 0.92 to 1.02. Subtle, never overshoots.
view-transition
320ms · ease-in-out-soft. Astro ClientRouter cross-fade; named transitions for wordmark and h1.
Primitives, summarized
| Name | Duration | Easing | Trigger |
|---|---|---|---|
text-reveal-stagger | 520ms each · 24ms stagger | ease-out-emphasis · (0.16, 1, 0.3, 1) | Section enters viewport |
lens-flare-hover | Continuous · 0.18 lerp | Linear (raf-lerp) | Pointer over CTA or card |
prismatic-ripple | 180ms in · 8000ms spin | ease-out-soft · ease-prism-spin | Button hover or focus |
scroll-snap-glide | 900ms settle | ease-glide · (0.32, 0, 0.16, 1) | Wheel, touch, anchor |
hairline-grow | 520ms | ease-out-emphasis | Divider enters view |
language-flip | 180ms | ease-in-out-soft | Language toggle click |
theme-fade | 320ms | ease-in-out-soft | Theme toggle click |
portrait-bloom | 900ms | ease-out-emphasis | Founder card enters view |
view-transition | 320ms | ease-in-out-soft | Route change |
Restraint principle
CSS scroll-driven animations carry every enter sequence. We do not ship an IntersectionObserver. We do not load Framer Motion for fades. Motion appears as a consequence of CSS, not as a library decision.
Where we use JS — lens-flare-hover and the home-only Lenis provider — the budget is
5KB to 12KB total, and the script short-circuits on prefers-reduced-motion
and on coarse pointers.
Reduced-motion preview
DEFAULT
Animations run. Prismatic ring spins. Text reveals stagger in.
REDUCED MOTION
All animations cap to 0.001ms. Prismatic ring sits static at opacity 1. Scroll-snap disabled.
E — COMPONENTS
The library, demonstrated in place.
Every component below is the one shipped in production. Layout uses Section. Typography uses Display, Lead, Prose. Surface uses Card. Accent uses PrismaticRing.
Primitives
Display headline.
Lead text sets a single sentence of context.
Body prose breathes at 1.65 line-height. Italic is sparing. Links hairline-underline.
CARD · ELEVATED
A small surface.
Hairline border, soft shadow at rest, lifted on hover.
2
Founders
10+
Years on camera
1
Shipped product
Content
-
2026 → present · current
Founder & CTO, Dreamchasers, MB
Engineer, architect, shipper.
-
2024 → present
Co-founder & CTO, Celper AI
Simplify your Hiring Process, with AI.
-
2022 → present
Founder, rphgarage.lt
Auto detailing, Vilnius.
What you maintain after launch is what you are. Everything else is a draft.
PREVIEW
Browser chrome mockup.
Hosts product screenshots and embedded previews. Three traffic dots; mono URL bar.
A reading in the time it takes to remember.
Describe a dream. Receive a seven-section reading, timed to the moon phase.
- Verdict
- Symbol decoded
- Recurring signal
Decorative
Standard hairline
Prismatic hairline (sparing)
Move your cursor here.
F — SIGNATURE MOMENT
Prismatic refraction.
Thin conic gradient, four stops, 1.5px stroke, 8s rotation. The one place the system permits chromatic colour — and only at edges.
Live at four sizes
8px
16px
32px
64px
The seven sanctioned locations
-
01 · ALWAYS-ON
Hero CTA buttonHero CTA button
Always-on at 0.45 opacity. Full opacity on hover and focus.
-
02 · HOVER
Language switcherLanguage switcher
Invisible at rest. Appears on focus-visible and during route transition.
-
03 · STATIC
Active nav linkActive nav link
Static 1px prismatic underline marks the current section.
-
04 · ALWAYS-ON
Feeldreamy CTAFeeldreamy CTA
Always-on, the only chromatic moment in the flagship section.
-
05 · STATIC
Founder portrait frame
Static 0.25 opacity ring. No rotation; reads as a single held note.
-
06 · HOVER
Footer wordmarkFooter wordmark
Hover reveals a 1px prismatic underline drawn left to right.
-
07 · HOVER
Contact linksContact links
Hover draws a prismatic underline; the page's last chromatic gesture.
Implementation
Pure CSS conic-gradient with mask-composite: exclude to cut the centre.
Rotated via a transform animation on the ::before pseudo —
GPU-composited, rasterised once, cost per frame about 0.1ms on a 2017 MacBook.
.lim-prismatic-ring::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: conic-gradient(
from 0deg,
var(--lim-prismatic-stop-1),
var(--lim-prismatic-stop-2),
var(--lim-prismatic-stop-3),
var(--lim-prismatic-stop-4),
var(--lim-prismatic-stop-1)
);
padding: 1.5px;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: lim-prism-spin 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
Performance & fallback
- Single instance per viewport for animated rings. Other appearances are conditional on
:hoveror:focus. will-changeis not declared; the transform alone promotes the layer.- Fallback when
mask-compositeis unsupported: solid 1px--lim-prismatic-inkborder at 4.6:1 contrast. No animation. - Reduced-motion: static ring at opacity 1, no spin.
G — SPACING & LAYOUT
Generous gutters. Twelve-column underneath.
Spacing is fluid via clamp(). The grid is twelve columns; in practice we use
narrow, prose, and wide containers.
Spacing scale
| Token | Value | Use |
|---|---|---|
Section padding | clamp(48px, 8vw, 96px) clamp(24px, 5vw, 64px) | Vertical rhythm |
Inner gap | clamp(20px, 3vw, 32px) | Eyebrow to headline, between blocks |
Card padding | clamp(20px, 3vw, 32px) | Inside Card, FounderCard |
Container max-width — narrow | 640px | Manifesto column, narrow prose |
Container max-width — prose | 880px | Hero inner, default container |
Container max-width — wide | 1120px | Footer grid, full-width sections |
--lim-radius-sm | 0.25rem · 4px | Focus ring corner |
--lim-radius-md | 0.5rem · 8px | Pills, small UI |
--lim-radius-lg | 0.75rem · 12px | Portrait frames |
--lim-radius-xl | 1rem · 16px | Cards, browser mockup |
--lim-radius-2xl | 1.5rem · 24px | Founder cards, large surfaces |
--lim-radius-full | 9999px | Buttons, pills, prismatic ring |
Grid demonstration (12 col)
Breakpoints
| Name | Width | Behavior |
|---|---|---|
| Compact | ≤ 540px | Founder cards stack portrait above body. Pill row wraps. |
| Narrow | ≤ 720px | Header nav collapses, wordmark and language switcher only. |
| Tablet | ≤ 820px | Two-column manifesto becomes one. Founders grid stacks. |
| Wide | > 820px | Full layout. Manifesto two-column. Founders side-by-side. |
H — ACCESSIBILITY
WCAG 2.2 AA, verified.
Contrast pairs are documented and tested. Focus rings are prismatic. Reduced-motion is honoured at the root, not patched per component.
Verified contrast pairs
| Pair | Ratio | Verdict |
|---|---|---|
| ink-primary on surface-page | 16.9:1 | AAA · body, headings |
| ink-soft on surface-page | 7.2:1 | AAA · subhead, supporting |
| ink-mute on surface-page | 4.7:1 | AA · caption boundary |
| ink-mute on surface-elevated | 4.4:1 | Downgrade to ink-soft |
| ink-mute on surface-sunken | 4.0:1 | Fails AA — never use |
| prismatic-ink on surface-page | 4.6:1 | AA · accent text |
| ink-primary on dark canvas | 15.5:1 | AAA · dark body |
| prismatic-ink on dark canvas | 4.8:1 | AA · dark accent |
Focus styles
Every focusable surface uses a 2px outline in --lim-focus-ring with a 4px
halo at 18% opacity. Offset is 3px. The focus ring is prismatic-violet so it doubles as
a brand cue without competing with the prismatic refraction itself (which is
decorative; the focus ring is functional).
Reduced motion summary
- All
animation-durationcapped to 0.001ms. - All
transition-durationcapped to 0.001ms. - Prismatic ring sits static at opacity 1.
- Scroll-snap disabled at the container level.
- Lens-flare returns null on mount.
- Lenis is not mounted on coarse pointers or reduced motion.
Keyboard nav
- Tab cycles through skip-link, header, main content, footer.
- Esc closes the direction switcher; Cmd-K toggles it.
- Native
<details>for FAQ provides the disclosure behaviour. - Every interactive surface has a visible focus ring.
Screen reader landmarks
| Landmark | Element | Notes |
|---|---|---|
| banner | <header> | Wordmark, nav, language switcher. |
| main | <main id="main"> | Skip-link target. One per page. |
| contentinfo | <footer> | Company facts, contact. |
| navigation | <nav> | Primary nav inside header. |
| address | <address> | ContactBlock wraps in semantic address. |
FORBIDDEN PAIR · REPEAT
--lim-ink-mute on --lim-surface-elevated or
--lim-surface-sunken falls under 4.5:1. Use --lim-ink-soft
on elevated surfaces and --lim-ink-primary on sunken.
I — END OF VOLUME
End of Volume 01.
Read the rest of the system at the live pages, or download the markdown documentation for the table of every token.