Designsystem
En översikt över de grundläggande designelementen som används i Coworken. Använd denna sida som referens vid feedback och framtida utveckling.
Varumärke & Logotyp
Huvudlogotyp (Bred)
logo.png (Mörk på ljus)
logo_bw.png (Alternativ med webbadress)
logo_w.png (Ljus på mörk)
Ikon (Kvadratisk)
icon.png
icon_tp.png
Typsnitt & Rendering
Display / Profil
Fraunces
Används för rubriker. Ger en organisk och premium känsla.
System-alternativ: Georgia, Garamond, serif
Sans / Brödtext
DM Sans
Optimerad för läsbarhet på skärm. All brödtext och nav.
System-alternativ: Inter, Helvetica, sans-serif
Mono / Branding
Courier New
Används för varumärket "coworken" och tekniska detaljer.
System-alternativ: Courier, Typewriter, monospace
Web-rendering
Automatisk kantutjämning (antialiased) används för att bibehålla skärpa på skärm.
Radavstånd
Standard radavstånd är 1.6 (leading-relaxed) för maximal läsbarhet.
Google Docs / Word
Använd Bold för rubriker (600/700) och Normal/Regular för brödtext.
Textbaserad profil
coworken
coworken.se
Som ett alternativ till den grafiska logotypen kan namnet skrivas ut i DM Sans med font-bold och tracking-tight. Detta rekommenderas i sammanhang där en renare, textbaserad look önskas. Namnet ska alltid skrivas med gemener.
Färgkarta
Primary
--primary
#0f172a
Primary Light
--primary-light
#122d44
Accent
--accent
#06b6d4
Accent Soft
--accent-soft
#ecfeff
Complementary
--complementary
#f97316
Complementary Soft
--complementary-soft
#fff7ed
Secondary
--secondary
#64748b
Background
--background
#ffffff
Foreground
--foreground
#0f172a
Muted
--muted
#f8fafc
Border
--border
#e2e8f0
Success
--color-success
#16a34a
Warning
--color-warning
#ca8a04
Error
--color-error
#dc2626
Info
--color-info
#2563eb
Typografi & Rubriker
.font-display (Fraunces)
Rubrik 1 (5xl)
Rubrik 2 (4xl)
Rubrik 3 (3xl)
.font-sans (DM Sans) .font-bold
Rubrik 4 (2xl)
Rubrik 5 (xl)
Brödtext (.font-sans)
Detta är en paragraf med brödtext. Vi använder DM Sans för optimal läsbarhet på skärm. Coworken strävar efter en modern och inbjudande känsla där texten får andas.--font-sans: 'DM Sans'
Display-font
Fraunces används för en mer karakteristisk och elegant framtoning i rubriker.--font-display: 'Fraunces'
.text-secondary
Sekundär text används för detaljer och mindre viktig information.
Knappar
.btn .btn-primary
.btn .btn-outline
.btn-ghost
.btn-danger .btn-sm
Kanter & Ytor
Standard Card
InfoAnvänds för nästan allt innehåll. Har en subtil border och skugga.
.card
Interactive Card
Har en hover-effekt som lyfter kortet och ändrar bakgrund.
.card-interactive
Dark Container
Används för att skapa kontrast i layouten.
.bg-primary .rounded-2xl
.border-dashed .border-2
Gradient Panel
Custom gradient för accent-ytor.
Badges
.badge
.badge-success
.badge-warning
.badge-error
.badge-info
.badge-accent
Listor
Osorterad lista
- Första punkten i listan
- Andra punkten med mer text för att se radbrytning
- Tredje punkten
- Innestuvad punkt
- Ännu en underpunkt
Sorterad lista
- Steg ett i processen
- Steg två som kräver uppmärksamhet
- Steg tre och slutförande
Avatarer & Ikon-bubblor
.avatar-sm
.avatar
.avatar-lg
.online-indicator
.icon-bubble-sm
.icon-bubble-md
.icon-bubble-lg
.icon-bubble-square
Banners & Aviseringar
Tabeller
| Namn | Status | Roll | Senast aktiv |
|---|---|---|---|
| Erik Österberg | Aktiv | SuperAdmin | Idag 14:20 |
| Anna Andersson | Pausad | Member | Igår 09:15 |
| Johan Karlsson | Inaktiv | SiteLead | 3 dagar sedan |
.table-wrapper > table
Formulär & Sök
.label & .input
Inga resultat
Vi hittade inget som matchade din sökning.
.empty-state
Hörnradie (Radius)
Radius SM
.rounded-md
0.375rem
Radius MD
.rounded-lg
0.5rem
Radius LG
.rounded-xl
1rem
Radius XL
.rounded-2xl
1.5rem
Full
.rounded-full
9999px
Skuggor (Shadows)
Shadow SM
.shadow-sm
Shadow MD
.shadow-md
Shadow LG
.shadow-lg