LIMINAL WHITESPACE

A — BALSAS IR TONAS

Apvalkalas, kuris pasitraukia, kad produktai galėtų kalbėti.

Šeši principai. Šešios ribos. Iš jų išplaukia visa sistema.

B — SPALVA

Šilta balta. Vienas chromatinis gestas.

OKLCH žetonai užtikrina tą pačią spalvos prasmę kiekviename renderyje. Prizminės stotelės — vienintelis chromatinis instrumentas; jos prie kraštų, niekada kaip užpildas.

Šviesus režimas — paviršiai

• --lim-surface-page

  oklch(0.99 0.005 80) · #FDFCFA

  Puslapio fonas

  16,9:1 prieš ink-primary

• --lim-surface-elevated

  oklch(0.97 0.006 80) · #F8F6F2

  Kortelės, šoniniai blokai

  15,4:1 prieš ink-primary

• --lim-surface-sunken

  oklch(0.95 0.008 80) · #F2EFEA

  Citatos, įdėtiniai blokai

  13,8:1 prieš ink-primary

Šviesus režimas — rašalas

• --lim-ink-primary

  oklch(0.15 0.02 270) · #181B22

  Tekstas, antraštės

  16,9:1 ant puslapio (AAA)

• --lim-ink-soft

  oklch(0.42 0.015 270) · #5C6068

  Paantraštės, palaikantis tekstas

  7,2:1 ant puslapio (AAA)

• --lim-ink-mute

  oklch(0.58 0.012 270) · #888B92

  Antraštukai, smulkios pastabos

  4,7:1 ant puslapio (AA riba)

• --lim-ink-inverted

  oklch(0.99 0.005 80) · #FDFCFA

  Tekstas ant tamsių paviršių

  16,9:1 ant inverted

Plaukelio linijos

• --lim-hairline

  oklch(0.88 0.008 270) · #DBDADD

  1px skirtuvai

  Dekoratyvinis

• --lim-hairline-strong

  oklch(0.78 0.01 270) · #BFBFC4

  Skirtuvai per fokusą, mygtukų kraštai

  3,1:1 prieš puslapį

Prizminės stotelės — vienintelis chromatinis gestas

• --lim-prismatic-stop-1

  oklch(0.70 0.18 290) · ≈ #8B66E8

  Konuso stotelė 1 — violetinė

  Tik akcentas

• --lim-prismatic-stop-2

  oklch(0.72 0.15 200) · ≈ #5BB6CB

  Konuso stotelė 2 — žalsva / cianas

  Tik akcentas

• --lim-prismatic-stop-3

  oklch(0.78 0.12 50) · ≈ #D8A879

  Konuso stotelė 3 — šiltas gintaras

  Tik akcentas

• --lim-prismatic-stop-4

  oklch(0.68 0.15 340) · ≈ #C76FA8

  Konuso stotelė 4 — rožinė / magenta

  Tik akcentas

• --lim-prismatic-ink

  oklch(0.55 0.20 290) · ≈ #6B3CCB

  Vientisas prizminis, prieinama atsarga

  4,6:1 ant puslapio (AA)

Fokusas ir aureolė

• --lim-focus-ring

  oklch(0.55 0.20 290) · ≈ #6B3CCB

  2px fokuso kontūras

  Minimum 3:1 prieš puslapį

• --lim-focus-halo

  oklch(0.55 0.20 290 / 0.18) · ≈ #6B3CCB · 18%

  4px aureolė už kontūro

  Dekoratyvinė

Šešėliai

Tamsus režimas

• --lim-surface-page

  oklch(0.16 0.015 270) · #21232B

  Šilta grafito drobė

  15,5:1 prieš ink-primary

• --lim-surface-elevated

  oklch(0.20 0.018 270) · #2A2D36

  Kortelės

  13,0:1 prieš ink-primary

• --lim-surface-sunken

  oklch(0.13 0.012 270) · #1B1D24

  Įdėtinė

  17,2:1 prieš ink-primary

• --lim-ink-primary

  oklch(0.97 0.005 80) · #FBFAF7

  Tekstas, antraštė

  15,5:1 ant drobės

• --lim-ink-soft

  oklch(0.78 0.01 270) · #C2C2C7

  Paantraštė

  9,4:1 ant drobės

• --lim-ink-mute

  oklch(0.62 0.012 270) · #94969C

  Antraštukai

  4,7:1 ant drobės (AA)

• --lim-prismatic-ink

  oklch(0.78 0.15 290) · ≈ #B58FF5

  Akcentinis tekstas

  4,8:1 ant drobės

Patikrintos kontrasto poros

C — TIPOGRAFIJA

Inter Variable. Dvylika žingsnių. Vienas santykis.

Inter Variable neša display ir pagrindinį tekstą. JetBrains Mono Variable neša antraštukus, URL ir skyriaus numerius. Optinio dydžio ašis — auto.

Porinimo logika

Skalė (dvylika žingsnių)

Optinio dydžio ašies demonstracija

Redakcinės taisyklės

D — JUDESYS

Trys gestai, ne daugiau.

Tekstas išsiryškėja. Šviesa lūžta. Kraštai slenka. CSS scroll-driven animacijos neša krūvį; JS pasirodo tik ten, kur reikia raf-lerp.

Gyvi pirmieji elementai

Pirmieji elementai, suvesti

Santūrumo principas

Sumažinto judesio peržiūra

E — KOMPONENTAI

Biblioteka, parodyta vietoje.

Kiekvienas žemiau esantis komponentas yra tas pats, kuris siunčiamas į produkciją. Išdėstymas — Section. Tipografija — Display, Lead, Prose. Paviršius — Card. Akcentas — PrismaticRing.

Pirmieji elementai

Turinys

Įkūrėjas ir vadovas

Danielius Šalavka

Mokosi kurdamas; dirba kameros šviesoje.

Peržiūrėti profilį →

Įkūrėjas ir techninis vadovas

Rokas Remeika

Inžinerija — būdas ginčytis su tikrove.

Peržiūrėti profilį →

FounderCard

src/components/liminal/FounderCard.astro

Portretas apjuostas statiniu PrismaticRing. Hover pakelia kortelę ir paryškina portretą.

Dekoratyvūs

F — PARAŠO AKCENTAS

Prizminis refrakcija.

Plonas konuso gradientas, keturios stotelės, 1,5px storis, 8s sukimasis. Vienintelė vieta, kur sistema leidžia chromatinę spalvą — ir tik prie kraštų.

Gyvai keturiuose dydžiuose

Septynios leistinos vietos

1. 01 · ALWAYS-ON

   Pradinis CTA mygtukas

   Pradinis CTA mygtukas

   Visada įjungtas 0.45 opacity. Pilnas opacity per hover ir fokusą.

2. 02 · HOVER

   Kalbos perjungiklis

   Kalbos perjungiklis

   Nematomas ramybėje. Pasirodo per focus-visible ir maršruto perėjimą.

3. 03 · STATIC

   Aktyvi navigacijos nuoroda

   Aktyvi navigacijos nuoroda

   Statinis 1px prizminis pabraukimas žymi esamą skyrių.

4. 04 · ALWAYS-ON

   Feeldreamy CTA

   Feeldreamy CTA

   Visada įjungtas — vienintelis chromatinis akcentas pagrindinio produkto skyriuje.

5. 05 · STATIC

   Steigėjo portreto rėmas

   Statinis 0.25 opacity žiedas. Be sukimo; skamba kaip viena išlaikyta nata.

6. 06 · HOVER

   Poraštės logotipas

   Poraštės logotipas

   Hover atskleidžia 1px prizminį pabraukimą, nubraižomą iš kairės į dešinę.

7. 07 · HOVER

   Kontaktų nuorodos

   Kontaktų nuorodos

   Hover nubraižo prizminį pabraukimą; paskutinis chromatinis akcentas puslapyje.

Įgyvendinimas

.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;
}
      

Našumas ir atsarga

G — TARPAI IR IŠDĖSTYMAS

Dosnūs tarpai. Dvylika stulpelių apačioje.

Tarpai sklandūs per clamp(). Tinklelis — dvylika stulpelių; praktikoje naudojame siaurą, prose ir platų konteinerius.

Tarpų skalė

Tinklelio demonstracija (12 stulpelių)

Lūžio taškai

H — PASIEKIAMUMAS

WCAG 2.2 AA, patikrinta.

Kontrasto poros dokumentuotos ir patikrintos. Fokuso žiedai — prizminiai. Reduced-motion gerbiamas šaknyje, ne lopomas per komponentą.

Patikrintos kontrasto poros

Fokuso stiliai

Sumažinto judesio santrauka

Klaviatūros navigacija

Ekrano skaitytuvo orientyrai

I — TOMO PABAIGA

I tomas baigtas.

Likusią sistemos dalį pamatyk gyvai produkcijos puslapiuose arba atsisiųsk markdown dokumentaciją — joje surašyta kiekvieno žetono lentelė.

© 2026 Dreamchasers, MB · Vilnius · 2026