{"_id":"@akdenizcse/design-system","_rev":"2-de4216aad09a877fc972e208a93c6f91","name":"@akdenizcse/design-system","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.0":{"name":"@akdenizcse/design-system","version":"0.1.0","keywords":["design-system","akdeniz","akdeniz-universitesi","tokens","react","ui-kit"],"license":"UNLICENSED","_id":"@akdenizcse/design-system@0.1.0","maintainers":[{"name":"tahayigitalkan","email":"tahayigitalkan@windowslive.com"},{"name":"akdenizcse-admin","email":"akdenizcse@gmail.com"}],"homepage":"https://github.com/akdenizcse/design-system#readme","bugs":{"url":"https://github.com/akdenizcse/design-system/issues"},"dist":{"shasum":"f242f306d07552af7532519f34c6b1933fb9cdde","tarball":"https://registry.npmjs.org/@akdenizcse/design-system/-/design-system-0.1.0.tgz","fileCount":49,"integrity":"sha512-dWlpDaDc+qsjAog/uDiuH3nqdRmcecyAvAnT5OFb0LjGM0u4BHQib6kr44sLfSpkhGZRnp87ocDwGqMq4awCtA==","signatures":[{"sig":"MEUCIHLUlQk5qEQ4USRSt2V/U9NZjEXTBtpevYR7LnTAxHZnAiEAsWnjJTu/8GJI3Gq3doINxBePsnAvZx8JOT6yavsrV5w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6090390},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js"},"./fonts/*":"./fonts/*","./assets/*":"./assets/*","./components":"./src/components/index.js","./tokens.css":"./colors_and_type.css","./components/*":"./src/components/*.js","./package.json":"./package.json"},"gitHead":"20dc7352f560c10d2dd703f712c314fcc5f58e23","private":false,"scripts":{"release:major":"npm version major -m 'release: %s' && npm publish","release:minor":"npm version minor -m 'release: %s' && npm publish","release:patch":"npm version patch -m 'release: %s' && npm publish","release:prerelease":"npm version prerelease --preid=rc -m 'release: %s' && npm publish --tag next"},"_npmUser":{"name":"tahayigitalkan","email":"tahayigitalkan@windowslive.com"},"repository":{"url":"git+https://github.com/akdenizcse/design-system.git","type":"git"},"_npmVersion":"11.8.0","description":"Akdeniz University design system — colors, typography, fonts, brand assets and React UI kit components for the academic portal.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.13.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.0_1778858783220_0.4425503892753919","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@akdenizcse/design-system","version":"0.1.5","description":"Akdeniz University design system — colors, typography, fonts, brand assets and React UI kit components for the academic portal.","license":"UNLICENSED","private":false,"type":"module","sideEffects":["*.css"],"main":"./src/index.js","module":"./src/index.js","types":"./src/index.d.ts","exports":{".":{"import":"./src/index.js","types":"./src/index.d.ts"},"./tokens.css":"./colors_and_type.css","./components":"./src/components/index.js","./components/*":"./src/components/*.js","./assets/*":"./assets/*","./fonts/*":"./fonts/*","./package.json":"./package.json"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":true}},"devDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"publishConfig":{"access":"public"},"scripts":{"version":"node -e \"require('fs').writeFileSync('src/version.js','export default \\''+process.env.npm_package_version+'\\';\\n')\" && git add src/version.js","release:patch":"npm version patch","release:minor":"npm version minor","release:major":"npm version major","release:prerelease":"npm version prerelease --preid=beta"},"keywords":["design-system","akdeniz","akdeniz-universitesi","tokens","react","ui-kit"],"repository":{"type":"git","url":"git+https://github.com/akdenizcse/design-system.git"},"engines":{"node":">=18"},"gitHead":"6e781ce1670b49fae264ddc3804eb89943ac0cca","_id":"@akdenizcse/design-system@0.1.5","bugs":{"url":"https://github.com/akdenizcse/design-system/issues"},"homepage":"https://github.com/akdenizcse/design-system#readme","_nodeVersion":"20.20.2","_npmVersion":"11.14.1","dist":{"integrity":"sha512-knEqkh/C5jRS7JkMkTjnIH3csXxFu7WDMkHcqanPgDl4s153ijliqIxQ72vmowbdD5ogeqhRJ0n6HYk5MULGeA==","shasum":"b537e650cc42b6575850f3eae27f70ff28b77207","tarball":"https://registry.npmjs.org/@akdenizcse/design-system/-/design-system-0.1.5.tgz","fileCount":49,"unpackedSize":6090373,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@akdenizcse%2fdesign-system@0.1.5","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCG1QOpGlwQGw16U1DDU5iKDuJ4PU3mxfyaD39NxoCXZQIgIxPyjVp2CaojqCevNVrPabZy2tnyRTCF6R5eOj4b0w0="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:c5f335e0-4052-4270-af5c-25889805e300"}},"directories":{},"maintainers":[{"name":"tahayigitalkan","email":"tahayigitalkan@windowslive.com"},{"name":"akdenizcse-admin","email":"akdenizcse@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.1.5_1778862688459_0.8128485333554074"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-15T15:26:23.143Z","modified":"2026-05-15T16:31:29.207Z","0.1.0":"2026-05-15T15:26:23.507Z","0.1.5":"2026-05-15T16:31:28.760Z"},"bugs":{"url":"https://github.com/akdenizcse/design-system/issues"},"license":"UNLICENSED","homepage":"https://github.com/akdenizcse/design-system#readme","keywords":["design-system","akdeniz","akdeniz-universitesi","tokens","react","ui-kit"],"repository":{"type":"git","url":"git+https://github.com/akdenizcse/design-system.git"},"description":"Akdeniz University design system — colors, typography, fonts, brand assets and React UI kit components for the academic portal.","maintainers":[{"name":"tahayigitalkan","email":"tahayigitalkan@windowslive.com"},{"name":"akdenizcse-admin","email":"akdenizcse@gmail.com"}],"readme":"# Akdeniz University Design System\n\nA modern design system for Akdeniz University's information systems — websites, student/staff portals, dashboards, and internal tools.\n\n> Akdeniz Üniversitesi is a public research university in Antalya, Türkiye, on the Mediterranean (\"Akdeniz\") coast. Founded 1982. The brand draws on the sun, sea and the warm Mediterranean climate of southern Anatolia.\n\n## Sources & inputs\n\nThis system was assembled from materials provided by the brand team:\n\n| Source | Path | Notes |\n|---|---|---|\n| Official seal | `assets/logo.png` | Circular seal — orange stylised \"A\" with stars + rays on deep navy, \"AKDENİZ ÜNİVERSİTESİ · 1982 · ANTALYA\". Use this in UI. |\n| Official wordmark / logotype | `assets/logo.pdf` | Vector PDF, Adobe Illustrator export. Original file titled `Akdeniz_Universitesi`, generated 2017-12-04. Authoritative — use this where high-fidelity reproduction matters. |\n| Brand typeface — Gotham Narrow | `fonts/GothamNarrow-*.otf` | 16 weights, all italics. **License is the customer's responsibility** — Gotham Narrow is licensed by Hoefler & Co. Confirm institutional license before publishing assets. |\n| Brand typeface — Gotham X Narrow | `fonts/GothamXNarrow-*.otf` | 16 weights — for tight headlines and large-display use. |\n| Primary colors | spec from brand team | `#1D366A`, `#0063AA`, `#F47524` — see `colors_and_type.css`. |\n| Background | spec from brand team | `#F7F8FC` — system base background. |\n\n> Cards in `preview/` and the portal UI kit use the official PNG seal directly. The vector PDF is preserved alongside it for high-resolution print and merch.\n\n---\n\n## Index — what's in this folder\n\n| File / folder | What it is |\n|---|---|\n| `README.md` | This file. Brand context, content + visual rules, iconography, manifest. |\n| `SKILL.md` | Skill manifest. Use this directory as a Claude Code skill. |\n| `colors_and_type.css` | All color and type CSS custom properties — base tokens **and** semantic aliases. Import in any HTML file. |\n| `fonts/` | Gotham Narrow + Gotham X Narrow OTF files (32 total). |\n| `assets/` | Logo PDF, mark SVG, brand imagery and supporting graphics. |\n| `preview/` | Self-contained design-system review cards (colors, type, components, etc). |\n| `ui_kits/portal/` | High-fidelity UI kit for the Akdeniz student & staff portal. JSX components + interactive `index.html`. |\n| `src/` | npm package source — ESM React components, type definitions, version constant. |\n| `package.json` | npm publishable manifest (`@akdeniz-uni/design-system`). |\n| `CHANGELOG.md` | Versioned release notes. |\n| `PUBLISHING.md` | How to bump versions, publish to npm / GitHub Packages, and release via CI. |\n\n---\n\n## Brand at a glance\n\n- **Identity** — Akdeniz Üniversitesi (Akdeniz University). Often shortened to **AÜ**. Always written with the dotted Ü when referring to the institution in Turkish.\n- **Tagline territory** — Akdeniz'in Üniversitesi (\"The University of the Mediterranean\"). The brand leans into place: warm light, deep sea, citrus and pomegranate, ancient ruins, modern research.\n- **Audience** — current students, prospective students, staff, alumni, researchers, the Antalya community, international visitors.\n- **Voice** — institutional but warm; serious about scholarship, generous about place and people. Bilingual (TR/EN) where the audience warrants.\n\n---\n\n## Content fundamentals\n\nHow copy is written across the system:\n\n**Tone.** Calm, civic, academic. Reads like a public institution that takes itself seriously without being stiff. Writes the way a registrar speaks at a welcome assembly: clear, useful, unhurried. Slight warmth from the Mediterranean setting — never beachy or casual.\n\n**Casing.** Sentence case for all body, navigation, and most headings. Title Case is reserved for proper nouns (faculty names, programs, place names) and for very large display headlines on hero sections. **Never** ALL CAPS for body — only for short labels (badges, section eyebrows) where it acts typographically.\n\n**Voice — I, you, we.**\n- Use **\"siz\"** (formal you) in Turkish; the institutional voice is plural, never the informal \"sen\".\n- In English, use **\"you\"** for the reader and **\"we\"** sparingly, for the university speaking as one body (\"we offer 24 faculties\"). Avoid first-person singular entirely.\n\n**Bilingual handling.** Turkish copy comes first; English follows as a parallel translation, not a paraphrase. Don't mix the two in a single sentence. Where space is tight (badges, nav), pick one language and stick with it for that surface.\n\n**Numbers, dates, units.** Turkish locale: `12.345,67`, `12 Mayıs 2026`. English locale on EN pages. Times in 24-hour: `09:00 – 17:00`.\n\n**Examples — yes:**\n\n> Akademik takvim her yıl Senato tarafından onaylanır. Güz dönemi 16 Eylül 2026'da başlar.\n> The academic calendar is approved annually by the Senate. Fall semester begins 16 September 2026.\n\n> Başvurunuzu eksiksiz tamamlamak için kimlik belgenizi ve transkriptinizi yükleyin.\n> Upload your ID and transcript to complete your application.\n\n**Examples — no:**\n\n> 🎓 Hey there! Ready to crush your application? Let's go! 🚀\n> *(too informal, emoji as decoration, exclamation, \"let's\" as exhortation — all wrong for this brand.)*\n\n**Emoji — almost never.** Not in marketing, not in UI labels, not in announcements. The one acceptable place is informal student-life social posts authored by student clubs — those have their own voice and aren't governed by this system.\n\n**Buttons.** Verb-led, short, lowercase except first letter. `Başvuruyu gönder` / `Submit application`, never `CLICK HERE` or `→ Submit ←`.\n\n**Empty states & errors.** Plain. Tell the user what happened and what to do next. No jokes, no apologies-as-personality.\n\n> Henüz hiç ders eklemediniz. Sol menüden bir bölüm seçin.\n> You haven't added any courses yet. Pick a department from the left.\n\n---\n\n## Visual foundations\n\nThe brand's visual personality is **clean institutional + Mediterranean warmth**. Restrained layout system; flat surfaces; type-led; one orange accent that punches through deep navy and sea blue.\n\n### Color\n\nThree primary brand colors, one near-white background, plus a neutral ramp and a small semantic set. See `colors_and_type.css` for tokens.\n\n- **Deep Blue `#1D366A`** — primary identity color. Headers, primary text on light, full-bleed backgrounds for hero/section starters.\n- **Sea Blue `#0063AA`** — primary action color. Links, primary buttons, focus rings, key chart series.\n- **Sun Orange `#F47524`** — accent. Used sparingly: highlights, current-state indicators, one-of-many emphasis. Never as a large area fill behind body text.\n- **Background `#F7F8FC`** — the canvas. Pages sit on this; cards sit on `#FFFFFF` above it.\n\nThe system does **not** use gradients as decoration. Do not introduce purple/pink gradients, glassy blurs, or rainbow swatches. Color carries meaning, not mood.\n\n### Type\n\n- **Gotham Narrow** — body, UI, long-form. Book (400) for body, Medium (500) for UI text and emphasis, Bold (700) for buttons and small headers.\n- **Gotham X Narrow** — display only. Use at 40px and above. Bold and Black for big numerics, names, large hero phrases.\n- Line-height 1.5 for body, 1.15–1.25 for headlines, 1.0 for display numerics.\n- Tracking: −0.01em on display sizes (≥40px), 0 on body, +0.04em on small all-caps labels.\n\nIf Gotham is unavailable in a delivery context, the fallback stack defined in CSS prefers `\"Inter Tight\"` then `system-ui`. Document any substitution.\n\n### Spacing\n\n8-point base. Scale: `4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96`. Most layout gaps land on 16/24/32. Form field vertical rhythm is 12. Card inner padding is 24 on desktop, 20 on mobile.\n\n### Backgrounds & imagery\n\n- The system surface is solid `#F7F8FC`. Pages lay clean horizontal bands of color (`#FFFFFF`, `#F7F8FC`, `#1D366A`) and never use textures, patterns, or noise as decoration.\n- Photography is documentary — buildings, students at work, ceremonies, the campus and the Antalya coast. **Warm-leaning** color (golden-hour skin tones, sea blues, warm stone). Never b&w by default; never heavy filters; no grain.\n- Full-bleed photography is allowed on hero modules, with a **dark protection gradient** from the bottom edge (`linear-gradient(0deg, rgba(29,54,106,0.85), rgba(29,54,106,0))`) so white display type stays legible.\n- No hand-drawn illustration. No isometric 3D. No emoji as decoration.\n\n### Cards & surfaces\n\n- White (`#FFFFFF`) on the page background.\n- Border-radius **8px** for compact cards, **12px** for primary content cards, **16px** for hero surfaces. No pill cards.\n- Border `1px solid rgba(29, 54, 106, 0.08)` is preferred over shadow for definition.\n- Shadow is reserved for elevation, not decoration. The system uses two: `--shadow-1` (resting cards) and `--shadow-2` (popovers, menus, modals). Both are cool-tinted (blue-tinted black, not pure black) so they sit naturally next to navy.\n- No inner shadows. No glassmorphism. No coloured borders as a decorative left-stripe accent.\n\n### Borders & dividers\n\n- 1px solid `--border` for structural lines.\n- Dotted/dashed reserved for \"incomplete / in-progress\" affordances (e.g. drop targets), never as a decorative pattern.\n- Section dividers are full-width, 1px, on `--border-strong` only when the visual rhythm needs the help — otherwise rely on whitespace.\n\n### Corner radii\n\n| Token | Value | Use |\n|---|---|---|\n| `--radius-sm` | 4px | Inputs, badges, tags |\n| `--radius-md` | 8px | Buttons, list rows, compact cards |\n| `--radius-lg` | 12px | Primary content cards, panels |\n| `--radius-xl` | 16px | Hero modules, modal containers |\n| `--radius-full` | 999px | Avatars, status dots, pills |\n\n### Animation\n\nThe system is mostly static. Where motion appears:\n\n- **Easing** — `cubic-bezier(0.2, 0.0, 0, 1)` (a confident decel) for most UI transitions.\n- **Duration** — `120ms` for hover, `200ms` for press/focus, `260ms` for entrance/exit, `400ms` for page-level transitions. Nothing slower without reason.\n- **Fade + lift** is the default entrance pattern — opacity 0 → 1 with `translateY(4px)`. No bounce, no spring, no scale-overshoot.\n- **No scroll-jacked animations**, no parallax, no auto-playing carousels.\n\n### Hover & press states\n\n- **Hover (links, secondary buttons)** — color shifts from `--blue-600` (`#0063AA`) to `--blue-700` (`#004C84`). 120ms.\n- **Hover (primary buttons)** — background darkens 8% via `oklch` lightness reduction.\n- **Hover (cards)** — border darkens to `--border-strong`; shadow lifts from `--shadow-1` to `--shadow-2`. No translation.\n- **Press** — background goes one further step darker; element scales `0.98` only on tappable mobile primary actions. Desktop press = darken only, no scale.\n- **Focus visible** — 2px outer ring in `--blue-600` at 0px offset, with 2px inner halo in `#FFFFFF` so the ring stays visible on any background.\n\n### Transparency & blur\n\nUsed sparingly. Two acceptable cases:\n\n1. The hero protection gradient described above.\n2. A 60% white scrim (`rgba(255,255,255,0.6)`) plus `backdrop-filter: blur(10px)` on a sticky top header — only when the header sits above content that scrolls under it. Otherwise headers are solid.\n\nNo frosted side panels, no tinted glass cards, no foggy hero sections.\n\n### Layout rules (fixed elements)\n\n- Top header is sticky, full-width, 64px on desktop, 56px on mobile.\n- Side navigation, where it exists, is 240px on desktop, collapsing to a 56px rail at <1024px and a drawer at <768px.\n- Page max-width is **1280px** with 24px gutters; long-form reading max-width is **720px**.\n- Footer is solid `--blue-900` (a notch darker than `--blue-800` for separation), full-width, never sticky.\n\n### Visual rhythm — system in use\n\nA typical screen alternates these surface bands top to bottom:\n\n1. **Solid `#FFFFFF`** sticky header.\n2. **`#F7F8FC`** page surface with white cards.\n3. **`#1D366A` deep band** for a feature/hero module — full bleed, big display type, optional photo with protection gradient.\n4. Back to `#F7F8FC` with another band of cards.\n5. **`#0F2655` darker band** for the footer.\n\nTwo bands of color per page is normal. Three is the maximum. Avoid more than one orange-saturated module per page — orange is a punctuation, not a paragraph.\n\n---\n\n## Iconography\n\nThe university's brand materials don't ship a custom icon system. UI surfaces use a single open-source icon family for consistency.\n\n- **Library — [Lucide](https://lucide.dev)** (24×24, 1.75–2px stroke, rounded ends).\n- **Why Lucide** — calm, geometric, neutral; reads at the same density as Gotham Narrow; aligns visually with the institutional tone. Heroicons would also fit; Phosphor or Tabler (with their playful-end variants) would not.\n- **CDN usage** — `https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.min.js`. The kit pulls icons by name (`<i data-lucide=\"search\"></i>` → `lucide.createIcons()`).\n- **Substitution flagged** — this is a design-system choice, not a brand-team mandate. Confirm with the brand team whether they want a bespoke set.\n- **Stroke + fill** — stroke icons only in this system. No filled-icon pairs, no duotone, no gradient icons. Active/pressed states change icon color, not its shape.\n- **Sizing** — 16px (inline with body), 20px (default UI), 24px (emphasis), 32px (feature). Always pixel-aligned.\n- **Emoji** — not used as iconography. Don't substitute emoji for icons.\n- **Unicode glyphs** — only `→` `↑` `↓` `×` `·` are acceptable as inline glyphs in copy. `✓` is fine inside a status badge but not floating in text. No box-drawing, no math arrows, no decorative dingbats.\n- **Logos** — `assets/logo.png` is the official seal used throughout the system; `assets/logo.pdf` is the authoritative vector source.\n\n---\n\n## Files & next steps\n\n- Browse `preview/` to review the system on the **Design System** tab.\n- Open `ui_kits/portal/index.html` to see the components in context.\n- Open `colors_and_type.css` to copy tokens into a new project.\n\n","readmeFilename":"README.md"}