dr. Edin Buljugić
Physical Medicine & Rehabilitation Specialist — design system
Palette
Type scale
displayRehabilitacija
h1Prevencija povreda
h2Sportska medicina
bodyStručno, ali ljudski — kratka objašnjenja stanja, prevencije i oporavka.
captiondr. Edin Buljugić · @dr.edinbuljugic
Heading: Montserrat · Body: Inter. Logo font unconfirmed — these are the agreed stand-ins (swap in tokens.ts when the designer confirms). The scale above is the fixed 1080-canvas ramp (cards); web pages use the fluid --ds-web-size-* ramp (see Web layer below).
Web layer
Component library for web pages — the public site is assembled from these. Tokens: fluid type ramp (--ds-web-size-*), shadows, container, breakpoints. Components + behaviors: shared/web.css + shared/web.js (source in design-system/web/).
Open the web component showcase →
web displayPokret je lijek
web h2Sportska medicina
web bodyFluid (clamp) na širini ekrana — nezavisno od 1080-canvas skale za kartice.
shadow-sm
shadow-md
shadow-lg
Spacing
xs · 8
sm · 16
md · 24
lg · 40
xl · 64
xxl · 96
Logos
stacked
Vertical / profile layouts
monogram
Profile pictures (square)
wordmark
Footers, signatures
horizontal
Headers, banners, covers
Output formats
| Format | Size | Aspect | Safe area (T/R/B/L) | Logo |
|---|---|---|---|---|
| IG / FB square | 1080×1080 | 1:1 | 40/40/40/40 | 1×1 |
| IG portrait | 1080×1350 | 4:5 | 40/40/40/40 | 1×1 |
| Reel / Short | 1080×1920 | 9:16 | 200/180/420/60 | 9×16 |
| Story | 1080×1920 | 9:16 | 250/60/250/60 | 9×16 |
| YouTube video | 1920×1080 | 16:9 | — | 16×9 |
| YouTube thumb | 1280×720 | 16:9 | 30/30/80/30 | 16×9 |
| 1080×1080 | 1:1 | 40/40/40/40 | 1×1 | |
| X / Twitter | 1600×900 | 16:9 | 40/40/40/40 | 16×9 |
| Open Graph / link preview | 1200×630 | 1.91:1 | 40/40/40/40 | 16×9 |
⚠️ The 9×16 animated logo is natively 606×1080 — center it on a brand-color background for reels; don't stretch it to fill 1080 wide.