Darkyn - Creative HTML Template
Темний, типографічний шаблон для креативної агенції з великими роздвоєними заголовками, помаранчевим акцентом і кастомним круглим курсором.
Враження
Vайб — Darkyn
Darkyn — це похмурий, типографічно орієнтований шаблон для креативної агенції. Уся сцена побудована на майже-чорному тлі з єдиним іржаво-помаранчевим акцентом (#dc5f00) і щедрим використанням Clash Display від ультралегких до середніх насичень. Герой перетворює сам брендовий вислів на каркас сторінки: гігантський заголовок ("Aim" / "sky") розділений по лівій і правій колонках тристовпцевої сітки, а середня колонка тримає абзац, посилання на проєкти й блок-слоган із лівою помаранчевою лінією. Фіксований круглий курсор діаметром 70px з помаранчевою рамкою рухається за вказівником (підмінюючи системний курсор на десктопі), збільшується над тайлами портфоліо й показує напис "View / Work" — той самий штрих, який мала б збирати окремо невелика студія.
Решта сторінки читається як редакційне досьє: смуга партнерів між тонкими лініями, блок із чотирьох статистичних карток у блокових кольорах із крапкою-маркером у кутку, нумерований список послуг, де кожен рядок виштовхує праворуч широку округлену фотографію, дзеркальні картки Mission/Vision із помаранчевим квадратом як композиційним стрижнем, охайна сітка портфоліо у три колонки, відгуки у дві колонки та вертикальний блог-лист із круглою кнопкою-стрілкою. Усе побудоване на звичайному CSS Grid + flex; анімації — це поява/зсув від Webflow IX2 (експорт містить лише jquery.min.js і вебфлоу-плагін plugins.js).
Шаблон пасує креативним агенціям, дизайн-студіям, фотографам і портфоліо моушн-дизайнерів, що хочуть впевнений монохромно-з-акцентом вигляд без важкого стеку GSAP/Lenis. Він не годиться для контентно-насичених продуктів (немає docs/dashboard-розкладок), eCommerce чи проєктів, де потрібен повноцінний рантайм анімацій — IX2-таймлайни достатні для появ, але не для скролл-скрабованих послідовностей. Зауваж: це Webflow-експорт ("webflow" відсутнє у словнику бібліотек каталогу, тож у libraries записано лише jquery); якщо переноситимеш дизайн на інший стек, доведеться відтворити hover/scroll-ефекти IX2 у GSAP або Framer Motion і знову зібрати кастомний курсор, прив'язаний через data-w-id.
Палітра
Типографіка
Бібліотеки
Сторінки
- Home
index.html - About
about.html - Works
works.html - Work Details
singlework.html - Blog
blog.html - Blog Details
singleblog.html - Contact
contact.html
Ключові фішки
Wordmark hero split across a three-column grid
- Де знайти
- index.html .hero-section .hero-grid, css/style.css .hero-big-text
- Чому цікаво
- The brand statement is broken into two oversized words ('Aim' / 'sky') flanking a middle column with the paragraph and CTA, turning the hero copy itself into the layout grid.
- Коли використовувати
- Agency or portfolio sites that want a strong type-led hero without a hero image carrying the load.
- Техніка
- CSS Grid (1fr 1fr 1fr) with 140px Clash Display, Webflow IX2 opacity reveal.
Custom circular 'View Work' cursor
- Де знайти
- index.html .cursor-wrapp, css/style.css .cursor / .project-cursor-text, js/plugins.js Webflow IX2
- Чому цікаво
- Body sets cursor:none and a fixed 70px orange-outlined disc tracks the pointer; over portfolio items it scales up and reveals 'View / Work' text. Disabled below 991px to restore the native cursor.
- Коли використовувати
- Cinematic portfolio or agency sites that want immediate tactile feedback on interactive media.
- Техніка
- CSS fixed positioning, mix-blend-mode, jQuery mousemove, Webflow IX2 hover interactions.
Color-blocked stats cards with corner dot tokens
- Де знайти
- index.html .numbers-section, css/style.css .numbers-item / .number-circle
- Чому цікаво
- Each card uses a different background (rust orange, mid grey, near-black, light grey) and starts with a small contrasting dot — a Swiss-poster device that reads as both decoration and a count marker.
- Коли використовувати
- Agency stats strips that want personality without resorting to icons or illustrations.
- Техніка
- Plain CSS Grid with hand-picked palette tokens; Webflow IX2 staggered fade-in.
Mirrored mission / vision composition with offset paragraph
- Де знайти
- index.html .who-we-are-section .mission-grid, css/style.css .mission-content / .mission-paragraph-right
- Чому цікаво
- Two bordered cards mirror each other: one anchors text top-left and image bottom-right, the other inverts both, with a small orange square acting as a fixed visual pivot.
- Коли використовувати
- About-style sections that need to communicate two complementary statements in one frame.
- Техніка
- CSS Grid + flex; small accent square (.mission-orange-box) as composition anchor.
Services as numbered rows with side-aligned wide photo
- Де знайти
- index.html .services-section .services-wrapp, css/style.css .services-item / .service-img
- Чому цікаво
- Instead of icon cards, each service is a horizontal row: 01-04 chip, oversized 40px service name, then a 600px-wide rounded photograph pushed to the right. Reads like a print contents page.
- Коли використовувати
- Studio/agency sites where each offering deserves its own hero-class image without forcing a separate page.
- Техніка
- Flex row with margin-left:auto on the image; bottom hairline border per row.
Компоненти
Pill-shaped dark navbar with logo, uppercase menu, and orange underline for the active item.
Three-column hero that splits a brand wordmark (Aim / sky) across the gutter with a paragraph and CTA between.
Infinite horizontal partner-logo strip framed by hairline rules under the hero.
Four colored cards (orange, grey, dark, light) with corner dot markers and large stat numbers.
Numbered services list where each row reveals a wide thumbnail aligned to the right.
Mirrored two-card mission/vision block with plus icon, paragraph, accent square, and inset photograph.
Three-up portfolio grid with image, project title, and small uppercase category chip.
Two-up testimonial cards with quote glyph, name divider, and circular author avatar.
Vertical blog rows with category chip, large title, author avatar, arrow button, and right-aligned thumbnail.
Centered email/phone block with social row above a copyright bar and a back-to-top pill.
Fixed circular orange-bordered cursor that follows the pointer and reveals 'View Work' text on portfolio hover.