Design System v1.0

Bygg vackra gränssnitt

Ett omfattande designsystem med stöd för både SCSS och Tailwind. CSS-variabler fungerar som den enda sanna källan.

Utforska systemetDokumentation
Funktioner

Allt du behöver

Byggt med moderna verktyg och beprövad praxis för skalbar och underhållsvänlig design.

10 färgpaletter

Fem primära paletter plus semantiska färger, var och en med ett fullständigt omfång från 50 till 900.

Typografisk skala

Instrument Serif för display, Halyard Text för brödtext. Komplett hierarki från display till etiketter.

Responsivt rutnät

12-kolumner för skrivbord, 6 för surfplatta och 4 för mobil med smarta marginaler.

Dubbel styling

CSS-variabler som används av både Tailwind-verktyg och SCSS-mixins.

Typsäkra API:er

tRPC-integration för typsäkerhet hela vägen mellan klient och server.

Varumärkesprofilering i CMS

PayloadCMS-driven profilering med logotyp, företagsinformation och sociala länkar.

Live-demo

Typsäkra API-anrop

Upplev tRPC i praktiken. Skriv ditt namn nedan för att se API-svar i realtid med full TypeScript-inferens.

1

Publika procedurer fungerar utan autentisering

2

Skyddade rutter kräver en aktiv session

home_trpcClientComponent

home_trpcPublicResponse

{ "message": "Enter your name below..." }

home_trpcProtectedResponse

{ "error": "Not authenticated" }
Paletter

Levande färgsystem

10 noggrant framtagna paletter med fullständiga färgskalor från 50 till 900.

Golden Yellow

Primary accent
50
100
200
300
400
500
600
700
800
900

Winter Blue

Primary accent
50
100
200
300
400
500
600
700
800
900

Pine Green

Primary accent
50
100
200
300
400
500
600
700
800
900

Blossom Pink

Primary accent
50
100
200
300
400
500
600
700
800
900

Sand Beige

Primary accent
50
100
200
300
400
500
600
700
800
900

Red

Error states
50
100
200
300
400
500
600
700
800
900

Blue

Information states
50
100
200
300
400
500
600
700
800
900

Orange

Warning states
50
100
200
300
400
500
600
700
800
900

Green

Success states
50
100
200
300
400
500
600
700
800
900

Grey

Inactive/Disabled
50
100
200
300
400
500
600
700
800
900
Typografi

Elegant typskala

Instrument Serif ger elegans åt display-texter och rubriker. Halyard Text säkerställer läsbarhet för brödtext.

Display

Vackra display-stilar

H1Rubrik
H2Rubrik
H3Rubrik
H4Rubrik
H5Rubrik

Exempel på brödtext

Preamble • 24px

Ingresser lockar läsare till ditt innehåll.

Body Large • 20px

Stor brödtext fungerar utmärkt för utvalda innehållsblock.

Body Medium • 16px

Standardbrödtext för det mesta innehållet på din webbplats.

Body Small • 14px

Sekundär information, bildtexter och metadata.

Label LG

LABEL

Label SM

LABEL

Komponenter

Redo att användas

Färdiga komponenter som följer designsystemets riktlinjer.

Light Theme Variants

Use these variants on light backgrounds. Hover, focus (tab), and click to see states.

Disabled State

Dark Theme Variants

Use these variants on dark backgrounds. Hover, focus (tab), and click to see states.

With Arrows

Storleksskala

Three sizes available: Large (48px), Medium (40px), and Small (32px).

48px
40px
32px

Arrow Buttons

Buttons can include optional left or right arrows for navigation and CTAs.

Shadcn UI

Kompatibel med alla Shadcn/ui-komponentvarianter.

Avståndsskala

1
4px
2
8px
4
16px
8
32px
16
64px
32
128px

Radie och lyft

Hörnradie
Skuggor
Layout

Responsivt rutnät

Flexibelt 12-kolumners rutnätssystem som anpassar sig sömlöst över alla brytpunkter.

12
Skrivbord≥1024px • 32px mellanrum
6
Surfplatta≥834px • 16px mellanrum
4
Mobil<834px • 16px mellanrum
1
2
3
4
5
6
7
8
9
10
11
12
6
6
4
4
4
3
3
3
3

Redo att börja bygga?

Börja skapa vackra gränssnitt med KOSA Design System. Allt du behöver ingår.

Öppna adminpanelenVisa på GitHub