---
id: identyfikacja-ksztalt
title: "Kształt — squircle"
section: identyfikacja
language: pl
version: "2026.1"
status: draft
updated_at: "2026-10-06"
url: https://refindi-guidelines.pages.dev/pl/guidelines/identyfikacja/ksztalt
markdown_url: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/ksztalt.md
---

# Kształt — squircle

> Squircle to podstawowy kształt marki Refindi. Temat opisuje, co ten kształt mówi o marce, skąd się wziął i dlaczego ciągła krzywizna wpływa na odbiór. Parametry techniczne są w temacie Interfejsy.

**Status tematu: draft.** Treść nie jest jeszcze w pełni zatwierdzoną normą.

Squircle to podstawowy kształt Refindi: kwadrat o narożnikach, w których krzywizna rośnie płynnie od zera, zamiast zaczynać się nagle jak w łuku koła. Ten temat opisuje, co taki kształt mówi o marce, skąd się wziął i dlaczego działa. Parametry techniczne (ścieżka, wygładzenie, skala promieni, zagnieżdżanie) są w temacie [Interfejsy → Powierzchnie i squircle](https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/interfejsy.md#powierzchnie).

## Brzmienie kształtu

Kształt ma swój ton, tak jak tekst. Squircle Refindi „mówi” tym samym głosem, który opisują [osobowość marki](https://refindi-guidelines.pages.dev/guidelines/content/pl/marka/osobowosc.md#cechy) i [ton i język](https://refindi-guidelines.pages.dev/guidelines/content/pl/komunikacja/ton-i-jezyk.md#ton). To jest **miękka precyzja**: forma łagodna w odbiorze, ale wyliczona, powtarzalna i bez przypadkowych odstępstw.

| Cecha marki (źródło) | Jak brzmi w kształcie |
|---|---|
| Spokój i autorytet — archetyp Władcy | Narożnik bez „szarpnięcia”: krawędź przechodzi w łuk tak płynnie, że oko się na nim nie zatrzymuje. Jedna krzywa w całym systemie. |
| Porządek — „uspokaja i systematyzuje” | Promienie ze stałej skali. Element zagnieżdżony ma promień zewnętrzny minus padding, więc warstwy układają się koncentrycznie. |
| Niezawodność — Concierge 2.0 | Kształt liczony matematycznie dla każdego rozmiaru. Wygląda tak samo na karcie 300 px i na panelu 1200 px. |
| Empatia — ton empatyczny i inteligentny emocjonalnie | Brak ostrych krawędzi skierowanych do użytkownika. Kształt jest „przyjazny w dotyku”, także na ekranie dotykowym. |
| Czar i nowoczesność — „lekki i nowoczesny” | Język współczesnych urządzeń: goście znają tę formę z ikon i interfejsów telefonów, więc odbierają ją jako aktualną. |

Squircle łączy dwie figury z identyfikacji. Okrąg pochodzi z pętli sygnetu, a kwadrat z siatki i porządku układu. Logotyp ma podobną zasadę: [zaokrąglone narożniki liter](https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/logo.md) nawiązują do pętli znaku.

Jak czytamy trzy formy narożnika (interpretacja robocza, propozycja 2026):

| Forma | Pierwsze wrażenie | W systemie Refindi |
|---|---|---|
| Ostry kąt | napięcie, twardość, ostrzeżenie | poza językiem marki |
| Łuk koła (border-radius) | przyjazny, ale przy dużym promieniu „doklejony” narożnik z widocznym załamaniem | tylko techniczny fallback |
| Squircle | miękki, ciągły, naturalny; precyzja bez twardości | kształt marki |

## Skąd się wziął

**Superelipsa (1818).** Francuski matematyk Gabriel Lamé opisał rodzinę krzywych |x/a|ⁿ + |y/b|ⁿ = 1, dziś nazywanych krzywymi Laméga. Wykładnik n płynnie zmienia kształt. Przy n = 2 powstaje elipsa (przy a = b okrąg), a im większe n, tym bliżej prostokąta. Wartości pośrednie dają formy „między kołem a kwadratem”.

**Piet Hein i Sztokholm (lata 60.).** Duński poeta, matematyk i projektant Piet Hein nazwał tę krzywą superelipsą i spopularyzował ją w projektowaniu. Zaproponował ją m.in. jako kształt placu i ronda Sergels torg w centrum Sztokholmu (n = 2,5). Szerzej opisał to Martin Gardner w „Scientific American” w 1965 roku.

**Ciągłe narożniki w urządzeniach (2013).** W iOS 7 Apple przeszło na ikony aplikacji z narożnikami o ciągłej krzywiźnie. Ich krawędź łagodnie przechodzi w łuk, nie zaczyna się od niego nagle. Od tego czasu projektanci nazywają taki kształt potocznie „squircle”.

**Corner smoothing w Figmie.** Figma dodała do narożników parametr wygładzenia od 0 do 100%. Przy 0% narożnik jest zwykłym łukiem koła, a znacznik „iOS” na suwaku stoi przy 60%. Kształt z Figmy nie jest dokładną superelipsą. To złożenie krzywych Béziera (i krótkiego łuku), które daje ten sam efekt ciągłej krzywizny.

**Refindi dziś.** Witryna rysuje narożniki biblioteką figma-squircle z wygładzeniem 1, czyli 100% w Figmie, mocniej niż preset iOS. Duże sekcje korzystają z nowej własności CSS `corner-shape: squircle` tam, gdzie przeglądarka ją obsługuje.

## Dlaczego krzywizna ma znaczenie

**Ludzie wolą krzywizny.** W badaniu Bar i Neta (2006, *Psychological Science*) uczestnicy oceniali pary przedmiotów różniące się tylko konturem. Wersje z zaokrąglonym konturem częściej się podobały niż wersje z ostrymi kątami. Autorzy stawiają hipotezę, że ostre kąty są odbierane jako sygnał potencjalnego zagrożenia. W kolejnym badaniu (2007, *Neuropsychologia*) przedmioty o ostrych konturach silniej aktywowały ciało migdałowate, czyli strukturę mózgu związaną m.in. z wykrywaniem zagrożeń. Podobny efekt opisano w architekturze: wnętrza o krzywoliniowym konturze były oceniane jako piękniejsze (Vartanian i in., 2013, *PNAS*).

**Ciągłość krzywizny.** Łuk koła styka się z prostą tak, że kierunek krawędzi się zgadza, ale krzywizna skacze od zera do 1/R (ciągłość G1). Squircle zwiększa krzywiznę stopniowo od zera (G2). W praktyce projektowej, np. przy powierzchniach karoserii, wiadomo, że taki skok widać jako „załamanie” odbicia lub krawędzi. Przy dużych promieniach łuk wygląda przez to na doklejony do prostej, a squircle na jedną, ciągłą formę.

**Jak to działa podprogowo.** Odbiorca nie analizuje narożników, ale czuje różnicę. Kształt bez załamań nie zatrzymuje wzroku na krawędziach, więc uwaga zostaje przy treści. Całość odbiera jako spokojną i dopracowaną, co wspiera to, co mówimy słowami.

> To są ogólne wnioski z literatury i praktyki projektowej, a nie wyniki badania marki Refindi. Efekty zależą od kontekstu, kultury i doświadczenia odbiorcy. Ilustracja „mapy uwagi” obok jest schematem, a nie pomiarem.

## Jak to stosujemy

Squircle pojawia się wszędzie tam, gdzie marka ma powierzchnię z narożnikiem:

- **karty i kafle** — treść, kroki procesu, segmenty, role;
- **panele i sekcje** — duże banery, sekcje hero, ciemne panele akcentowe;
- **pola i paski** — wyszukiwarka, popovery;
- **pigułki** — przyciski i statusy (skrajny przypadek: promień równy połowie wysokości);
- **ikona aplikacji** — sygnet na kafelku; ostateczną maskę ikony nakłada system operacyjny.

Skala promieni, reguła zagnieżdżenia i budowa obrysu są opisane w [Interfejsy → Powierzchnie i squircle](https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/interfejsy.md#powierzchnie), a ramki w kompozycjach w [Kompozycja → Ramki i narożniki](https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/kompozycja.md#ramki-i-narozniki).

Obowiązujące reguły:

- **[MUSI]** Narożniki kart, paneli, kafli i banerów w mediach cyfrowych rysuj jako squircle z pełnym wygładzeniem: SquircleBox (cornerSmoothing = 1) w kodzie i corner smoothing 100% w Figmie. Nie odtwarzaj go ze wzoru superelipsy ani zwykłym border-radius. _Zakres: digital._ `ksztalt-stosowanie-01` (źródło: witryna (repo): src/components/ui/squircle-box.tsx; content/tokens.yaml shape.squircle)
- **[MUSI]** Przyciski i statusy mają kształt pełnej pigułki (rounded-full). To skrajny przypadek tej samej miękkiej formy: promień równy połowie wysokości. _Zakres: witryna, aplikacja web._ `ksztalt-stosowanie-02` (źródło: witryna (repo): Business.tsx, NewB2C.tsx (CTA, ItemCard))

**Poprawnie: Karta squircle w skali tokenów.** Biała karta na tle #F5F4F2, narożniki squircle 20 px z pełnym wygładzeniem, wewnątrz mniejsza karta 16 px. Przycisk w karcie to pigułka. Wszystkie krawędzie przechodzą w narożnik bez widocznego załamania.

**Tekst do użycia: Specyfikacja narożników dla agencji.** Krótka specyfikacja do briefu dla agencji lub freelancera.

```text
Narożniki: squircle, corner smoothing 100% (Figma), promień ze skali Refindi (karty 20 px, karty zagnieżdżone 16 px, duże panele 90 px desktop / 40 px mobile). Przyciski i statusy: pełna pigułka. Bez ostrych narożników i bez mieszania z łukiem koła.
```

## Druk i materiały

Brandbook 2025 podaje dla druku promienie ramek 4 mm (A5 i mniejsze) i 6 mm (A4 i większe). Nie rozstrzyga jednak formy narożnika. Do decyzji właściciela marki zostaje, czy w druku rysować squircle jak w mediach cyfrowych, czy zwykły łuk.

Squircle można narysować w pliku do druku (Figma, Illustrator) i wyciąć wykrojnikiem. Zaokrąglarki introligatorskie, np. do rogów notesu, wycinają jednak łuk koła. Do czasu decyzji w materiałach cyfrowych obowiązuje squircle, a w druku promienie 4 / 6 mm.

## Pliki do pobrania

- **Favicon — SVG** (favicon · 512 × 512 · wektor; image/svg+xml; 1 KB) — pobierz: https://refindi-guidelines.pages.dev/guidelines/assets/favicon-svg/refindi-favicon.svg · zasady użycia: https://refindi-guidelines.pages.dev/guidelines/assets/favicon-svg/usage.pl.md

## Powiązane tematy

- Interfejsy: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/interfejsy.md
- Kompozycja: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/kompozycja.md
- Osobowość marki: https://refindi-guidelines.pages.dev/guidelines/content/pl/marka/osobowosc.md
- Logo: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/logo.md
- Ton i język: https://refindi-guidelines.pages.dev/guidelines/content/pl/komunikacja/ton-i-jezyk.md
- Grafika i ikony: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/grafika-i-ikony.md

## Źródła i historia zmian

- repo optime-ai/refindi-concierge-web@e7d7db4 — src/components/ui/squircle-box.tsx (SQUIRCLE_SMOOTHING = 1), src/index.css (--section-corner-r, corner-shape: squircle), Business.tsx, NewB2C.tsx
- content/tokens.yaml — shape.squircle, shape.radius — skala promieni
- Brandbook PDF (06.06.2025), s. 141 — Ramki i zaokrąglenia; promienie w druku 4 / 6 mm
- content/pl/marka/osobowosc.md — Archetyp Władca + Bohater, persona Concierge 2.0
- content/pl/komunikacja/ton-i-jezyk.md — Głos marki: empatyczny, kulturalny, lekki i nowoczesny
- G. Lamé, Examen des différentes méthodes employées pour résoudre les problèmes de géométrie (1818) — Krzywe Laméga |x/a|ⁿ + |y/b|ⁿ = 1
- M. Gardner, „The Superellipse”, Scientific American, Mathematical Games (1965) — Superelipsa Pieta Heina, Sergels torg w Sztokholmie (n = 2,5)
- Figma, „Desperately seeking squircles” (blog Figma) — Corner smoothing 0–100%, znacznik iOS przy 60%; podstawa biblioteki figma-squircle
- M. Bar, M. Neta, „Humans prefer curved visual objects”, Psychological Science 17(8), 2006, s. 645–648 — Preferencja obiektów o zaokrąglonym konturze
- M. Bar, M. Neta, „Visual elements of subjective preference modulate amygdala activation”, Neuropsychologia 45(10), 2007, s. 2191–2200 — Silniejsza aktywacja ciała migdałowatego przy ostrych konturach
- O. Vartanian i in., „Impact of contour on aesthetic judgments and approach-avoidance decisions in architecture”, PNAS 110 (Suppl. 2), 2013 — Wnętrza o krzywoliniowym konturze oceniane jako piękniejsze
- Wersja treści 2026.1, aktualizacja 2026-10-06.
- 7 reguł(y) w statusie roboczym lub do przeglądu nie są częścią tego eksportu.