--- version: alpha name: "holographik.space" description: "Design system extracted from https://holographik.space/ on 2026-10-28" colors: background: "#ffffff" surface: "#f1f1f1" surface-2: "#c8c8c8" foreground: "#ffffff" primary: "#000000" on-primary: "#ffffff" border: "#ffffff" typography: headline-display: fontFamily: "KH Teka" fontSize: "26px" fontWeight: 700 lineHeight: "32.5px" letterSpacing: "0.052px" headline-lg: fontFamily: "KH Teka" fontSize: "69.12px" fontWeight: 500 lineHeight: "65.664px" letterSpacing: "-1.52064px" headline-md: fontFamily: "KH Teka" fontSize: "24px" fontWeight: 400 lineHeight: "1.4" body-md: fontFamily: "KH Teka" fontSize: "13px" fontWeight: 400 lineHeight: "15px" letterSpacing: "0.052px" label-md: fontFamily: "KH Teka" fontSize: "12px" fontWeight: 400 lineHeight: "1.17" letterSpacing: "0.052px" button: fontFamily: "KH Teka" fontSize: "13px" fontWeight: 500 lineHeight: "15px" rounded: none: "0px" full: "9999px" sm: "4px" lg: "12px" md: "7px" spacing: unit: "4px" 1: "4px" 2: "8px" 3: "12px" 4: "16px" 5: "20px" 6: "28px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "9999px" height: "29px" padding: "7px 14px" button-secondary: backgroundColor: "#f1f1f1" textColor: "#000000" typography: "{typography.button}" rounded: "0px" height: "27px" padding: "6px 12px" --- # holographik.space ## Overview Holographik Space — Event Space and Coffee Bar in Zagreb: 180 m² in Trešnjevka, Zagreb: specialty coffee by day, cocktails from five, and a space that becomes an exhibition, a dinner, a concert or a photo studio. Pill-shaped controls, one soft shadow for depth, restrained display type at 26px / 700, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 273 rendered elements at 1440px wide on 2026-10-28. Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot: - `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold - `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/brand-favicon-source.png`: Favicon source - `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r3-context.jpg`: r3 context: page context - `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold - `screenshots/tablet-768-fold.png`: Tablet 768, above the fold - `screenshots/phone-390-fold.png`: Phone 390, above the fold - `screenshots/phone-390-full.jpg`: Phone 390, full page - `screenshots/phone-390-menu.png`: Phone 390, navigation menu open - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png - `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp - `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png - `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png - `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png - `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png - `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png - `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico - `screenshots/c-button-1--rest.png`: Button 1 ("Book the SpaceBook"), rest - `screenshots/c-button-1--hover.png`: Button 1 ("Book the SpaceBook"), hover - `screenshots/c-button-1--focus.png`: Button 1 ("Book the SpaceBook"), focus - `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest - `screenshots/c-icon-button-1--hover.png`: Icon button 1, hover - `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus - `screenshots/c-close-button-1--rest.png`: Close / dismiss button 1 ("×"), rest - `screenshots/c-close-button-1--hover.png`: Close / dismiss button 1 ("×"), hover - `screenshots/c-close-button-1--focus.png`: Close / dismiss button 1 ("×"), focus - `screenshots/c-text-input-1--rest.png`: Text input 1, rest - `screenshots/c-text-input-1--focus.png`: Text input 1, focus - `screenshots/c-text-input-1--disabled.png`: Text input 1, disabled - `screenshots/c-text-input-1--filled.png`: Text input 1, filled - `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Holographik SpaceH.S."), rest - `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("Holographik SpaceH.S."), hover - `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Holographik SpaceH.S."), focus - `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1, rest - `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1, hover - `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by menu-button - `screenshots/c-menu-button-1--open.png`: Menu / dropdown trigger 1, open (trigger) - `screenshots/c-card-1--rest.png`: Card 1 ("Happening today Afterwor"), rest - `screenshots/c-card-1--hover.png`: Card 1 ("Happening today Afterwor"), hover - `screenshots/c-image-1--rest.png`: Image / figure 1, rest - `screenshots/c-newsletter-form-1--rest.png`: Newsletter / signup form 1 ("→"), rest - `screenshots/c-button-2--rest.png`: Button 2 ("→"), rest - `screenshots/c-button-2--hover.png`: Button 2 ("→"), hover - `screenshots/c-button-2--focus.png`: Button 2 ("→"), focus - `screenshots/c-link-2--rest.png`: Text link 2 ("Happening today Afterwor"), rest - `screenshots/c-link-2--focus.png`: Text link 2 ("Happening today Afterwor"), focus ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#ffffff` | Page background | | surface | `#f1f1f1` | Cards, panels, raised or recessed surfaces | | surface-2 | `#c8c8c8` | Secondary surface | | foreground | `#ffffff` | Primary text | | primary | `#000000` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. | | on-primary | `#ffffff` | Text on the accent | | border | `#ffffff` | Hairlines, dividers, input borders | Full painted palette by area (largest first): `#000000`, `#ffffff`, `#616161`, `#141414`, `#f1f1f1`, `#c8c8c8`. The accent `#000000` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral. ## Typography - **KH Teka** for h1, h2, body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | KH Teka | 26px | 700 | 32.5px | 0.052px | | headline-lg | KH Teka | 69.12px | 500 | 65.664px | -1.52064px | | headline-md | KH Teka | 24px | 400 | 1.4 | normal | | body-md | KH Teka | 13px | 400 | 15px | 0.052px | | label-md | KH Teka | 12px | 400 | 1.17 | 0.052px | | button | KH Teka | 13px | 500 | 15px | normal | - headline-md: fallback (source h3); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. Type scale in use: 11px, 12px, 13px, 15px, 26px, 69px. Base body size 13px. The hero heading (h1) renders at 26px / 700, start aligned, up to 1px wide, tracking 0.052px. Sample: "Holographik Space — a 180 m² space in Trešnjevka, Zagreb for events, exhibitions". See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## Layout - Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 28 (px). - Flex and grid gaps: 12, 16 px. - Content max width: not detected (fluid). - Breakpoints: 640px, 760px, 761px, 900px, 901px. - Header: 56px tall, fixed, background `rgba(0, 0, 0, 0)`; 5 nav links at 13px / 500 (Holographik SpaceH.S. · About · Projects · News · Book the SpaceBook). ## Elevation & Depth Shadows in use, most common first: - shadow-1: `rgba(0, 0, 0, 0.28) 0px 8px 30px 0px` ## Shapes - Buttons: 9999px - Inputs: 0px - Cards and panels: 0px - Images and media: 0px - Radius scale: none 0px, full 9999px, sm 4px, lg 12px, md 7px ## Components ### Button, primary Background `#000000`, text `#ffffff`, border none, radius 9999px, height 29px, padding 7px 14px, 13px / 500. Sample label: "Book the SpaceBook". ### Button, secondary Background `#f1f1f1`, text `#000000`, border none, radius 0px, height 27px, padding 6px 12px, 13px / 500. Sample label: "Instagram". ### Link Colour `#000000`, no underline at rest, weight 500. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (17 of 87 in the checklist, 20 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 18 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | ink, ghost lg, secondary | hover, focus | "Book the SpaceBook" | | Icon button | outline | hover, focus | | | Text link | plain, plain | focus | "Design Exhibition & Audiovisua" | | Close / dismiss button | ghost | hover, focus | "×" | | Text input | outlined-icon-right | focus, disabled, filled, placeholder | | | Header / navbar | default | rest only | "Holographik SpaceH.S. ZAG | 01" | | Navigation link | plain | hover, focus | "Holographik SpaceH.S." | | Menu / dropdown trigger | secondary | hover, open | | | Footer | default | rest only | "Holographik Space Ulica Franje" | | Footer link | underlined | rest only | "Careers" | | Card | elevated-with-media | hover | "Happening today Afterwork DJ S" | | Image / figure | aspect-1, aspect-1.58 | rest only | | | Video / media embed | default | rest only | | | Newsletter / signup form | default | rest only | "→" | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Carousel / slider, Logo strip, Icon, Eyebrow / kicker, FAQ block, Call-to-action band, Search results / listing row, Content container, Grid of items, Sticky bar. ## Dark Mode No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute. ## Responsive Behavior | Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | desktop 1440px | fluid | 19px | 13px | 26px, 0 lines, start | 56px, 5 links, 2 CTA | text only | 3→3 col | content-width | | laptop 1024px | fluid | 19px | 13px | 26px, 0 lines, start | 56px, 5 links, 2 CTA | text only | 3→3 col | content-width | | tablet 768px | fluid | 19px | 14px | 28px, 0 lines, start | 54px, 5 links, 2 CTA | text only | | content-width | | phone 390px | fluid | 9px | 14px | 28px, 0 lines, start | 52px, 5 links, 2 CTA | text only | | content-width | - H1 goes 26px → 28px (108%), 0 → 0 lines. - No hamburger observed at 390px; 5 navigation links remain visible. - Body text 13px → 14px. - Phone side gutter 9px. - Section top padding 116px → 118px. ## Interaction & Motion 57 elements carry transitions; typical 0.15s with ease, mostly on opacity, color, background. No running keyframe animations at rest. - Hover on button-primary: no visible change; cursor pointer; transition background, color | 0.15s, 0.15s | ease, ease | delay 0s, 0s. - Hover on button-secondary: background transparent → #ffffff1a, text #b7b7b2 → #ffffff, icon/inner colour → #ffffff; cursor pointer; transition color, background | 0.15s, 0.15s | ease, ease | delay 0s, 0s. - Hover on nav-link ("Holographik SpaceH.S."): opacity 1 → 0.55; cursor pointer; transition opacity | 0.15s | ease. - Focus on button-primary: outline 2px solid rgb(0, 0, 0), offset 2px. - No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding. - No dropdown menus found in the header. - No scroll-reveal: content is visible without scrolling into view. Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`. ## Do's and Don'ts - Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Use `#000000` where supported by measured component or regional evidence; its accent role is inferred. - Do keep body text at 13px in KH Teka. - Do match corner radii per element class (buttons 9999px, cards 0px); do not pick one radius for everything. - Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from body; large surface colors remain in the palette. - Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents. - Note: Body text contrast is 1.0:1 against the page background (below 4.5:1).