# Halaska / Design intelligence studio for startups — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://halaska.com/
Captured: 2026-10-23
CSS measured: 2026-10-23T18:28:14.114Z at 1440×1000 — https://halaska.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

Halaska employs a distinctively minimal and typographic design language that leans heavily on stark contrasts and large, expressive typography. The layout is structured around an ultra-clean, almost clinical white background, allowing the black typography and portfolio imagery to dominate. A key typographic feature is the use of 'FK Raster Roman Compact Smooth', which introduces a pixelated, retro-digital aesthetic, contrasting with the otherwise clean geometric sans-serif ('Inter Display'). The color palette is exceptionally restrained, relying primarily on stark black and white with occasional subtle cool gray/blue tints. Floating pill-shaped navigation components and subtle borders provid

## Classification

- Industry: creative
- Site type: Landing, Portfolio
- Business model: Agency
- Styles: minimal, typographic, retro, high-contrast, portfolio-centric
- Platform: Framer
- Technology: Not identified

## Typography

- Display: FK Raster Roman Compact Smooth — weight 400; size 64px; line-height 70.4px; tracking normal; Regular (90% role confidence, computed values)
- Heading: FK Raster Roman Compact Smooth — weight 400; size 36px; line-height 46.8px; tracking normal; Regular (95% role confidence, computed values)
- Body: Inter Display — weight 400; size 14px; line-height 22.4px; tracking 0.1px; Regular (90% role confidence, computed values)
- Mono: Geist Mono — weight 400; size 12px; line-height 14.4px; tracking normal; Regular (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #F6FCFF: color-2: computed rgb(246, 252, 255); AI role: The dominant, slightly cool off-white background color used across most of the page. (95% role confidence, computed values)
- Primary Action — primary action #1A61EC: color-9: computed rgb(26, 97, 236); AI role: The bright blue (#1A61EC) used specifically for the 'Get in touch' call-to-action buttons. (95% role confidence, computed values)
- Text — text #051A24: color-4: computed rgb(5, 26, 36); AI role: Very dark navy (#051A24) used for primary headings and prominent text, acting as a softer black. (90% role confidence, computed values)
- Muted Text — muted text #425761: color-5: computed rgb(66, 87, 97); AI role: A lighter gray-blue (#425761) used for secondary text like copyright information. (85% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h5",
        "text": "Studio",
        "top": 16960,
        "property": "font"
      },
      {
        "tag": "h5",
        "text": "Services",
        "top": 16960,
        "property": "font"
      },
      {
        "tag": "h5",
        "text": "Tools",
        "top": 16960,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "FK Raster Roman Compact Smooth",
    "fontStack": "\"FK Raster Roman Compact Smooth\", \"FK Raster Roman Compact Smooth Placeholder\", sans-serif",
    "weight": "400",
    "size": "36px",
    "lineHeight": "46.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "We partner with tech founders to bring their products to life",
        "top": 424,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Inter Display",
    "fontStack": "\"Inter Display\", \"Inter Display Placeholder\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "22.4px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "p",
        "text": "From a spark of an idea to industry-leading execution. Strategic brand, product and digital experien",
        "top": 557,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Work",
        "top": 17040,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Halaska OS",
        "top": 17075,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Inter Display",
    "fontStack": "\"Inter Display\", \"Inter Display Placeholder\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Work",
        "top": 24,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Services",
        "top": 24,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Studio",
        "top": 24,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Inter Display",
    "fontStack": "\"Inter Display\", \"Inter Display Placeholder\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Get in touch",
        "top": 22,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Get in touch",
        "top": 50,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Get in touch",
        "top": 17194,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "PP Neue Montreal Medium",
    "fontStack": "\"PP Neue Montreal Medium\", \"PP Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Reach out to Chris",
        "top": 16437,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Reach out to Chris",
        "top": 16469,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "FK Raster Roman Compact Smooth",
    "fontStack": "\"FK Raster Roman Compact Smooth\", \"FK Raster Roman Compact Smooth Placeholder\", sans-serif",
    "weight": "400",
    "size": "64px",
    "lineHeight": "70.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "If your product is better than it looks, let's talk.",
        "top": 16233,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#EBF3F7",
    "alpha": 1,
    "cssValue": "rgb(235, 243, 247)",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 832,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F6FCFF",
    "alpha": 1,
    "cssValue": "rgb(246, 252, 255)",
    "count": 7,
    "contexts": [
      {
        "tag": "body",
        "text": "<iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-PBPV69XD\" height=\"0\" width=\"0\" style=\"d",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "WorkServicesStudioGet in touchGet in touchhtml body { background: var(--token-c998ee98-8215-4628-893",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "footer",
        "text": "StudioWorkHalaska OSClientsApproachAboutDubaiPartnersFAQsNotesContactServicesAI product designAI str",
        "top": 16840,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 112,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 742,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 742,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 1025,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#051A24",
    "alpha": 1,
    "cssValue": "rgb(5, 26, 36)",
    "count": 34,
    "contexts": [
      {
        "tag": "a",
        "text": "Work",
        "top": 24,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Studio",
        "top": 24,
        "property": "text"
      },
      {
        "tag": "h1",
        "text": "We partner with tech founders to bring their products to life",
        "top": 424,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#425761",
    "alpha": 1,
    "cssValue": "rgb(66, 87, 97)",
    "count": 55,
    "contexts": [
      {
        "tag": "p",
        "text": "© Halaska Studio Limited",
        "top": 17733,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1011,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#465660",
    "alpha": 1,
    "cssValue": "rgb(70, 86, 96)",
    "count": 4,
    "contexts": [
      {
        "tag": "g",
        "text": "",
        "top": 1475,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1475,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#0D212C",
    "alpha": 1,
    "cssValue": "rgb(13, 33, 44)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "From a spark of an idea to industry-leading execution. Strategic brand, product and digital experien",
        "top": 557,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#273C46",
    "alpha": 1,
    "cssValue": "rgb(39, 60, 70)",
    "count": 20,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1182,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#1A61EC",
    "alpha": 1,
    "cssValue": "rgb(26, 97, 236)",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "Get in touchGet in touch",
        "top": 16,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#F6FCFF",
    "alpha": 0.8,
    "cssValue": "rgba(246, 252, 255, 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "WorkServicesStudioGet in touchGet in touch",
        "top": 8,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Get in touch",
        "top": 22,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1161,
        "property": "svg-fill"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between major portfolio sections, often exceeding 100px, to isolate individual works.
- Corner style: Mix of sharp corners on portfolio mockups and fully rounded pill shapes for interactive elements like the nav and buttons.
- Radius: Buttons and the navigation bar utilize full-pill radiuses (e.g., likely 999px or 50%), while portfolio frames use softer, smaller radii (e.g., 8-12px).
- Borders: Borders are generally absent on major structural elements, except for subtle frames around mockups or the wavy decorative border in the footer.
- Buttons: Solid fill with full pill rounding; no outlines or heavy drop shadows observed on buttons.
- Content width: Content generally appears constrained to a maximum width (likely around 1200px-1440px), centered in the viewport.
- Density: Low density. The design relies heavily on negative space to give focus to the large typography and portfolio imagery.
- Evidence: Visual inspection of the crops reveals the contrast between the pill-shaped nav and the squarer mockups, as well as the generous spacing separating the mockups.

## Sections

Gallery section count: 5. Each entry corresponds to one gallery capture.

1. **Hero — Halaska Agency Hero and Product Showcase** (Home)
   AI suggestion (97% confidence): Complete page-opening hero with oversized brand mark, concise agency proposition, client logo row, and a substantial mobile product mockup, ending before the next showcase block.
   Capture: 1440×1812px; page bounds 0–1812px of 17774px; source section ID: `6bcb96f8-ce5b-4b7b-81b2-78aa2cea92c5`; image: https://media.designdetails.io/library/f0d962b90dfaf0bf8be7e699550a2ba2f677be26cf0c66e2dec6426f356ddd90/6bcb96f8-ce5b-4b7b-81b2-78aa2cea92c5.webp
   SECTION.md v3.2: `6bcb96f8-ce5b-4b7b-81b2-78aa2cea92c5` (deterministic evidence; editorial review pending)
2. **Gallery — Circuit Identity Showcase** (Home)
   AI suggestion (91% confidence): A complete, visually distinctive case-study gallery block presenting three coordinated Circuit identity designs on a self-contained gradient panel.
   Capture: 1440×960px; page bounds 1911–2871px of 17774px; source section ID: `cbb5f2f4-4d14-4ce8-bd95-557fc2cfaadb`; image: https://media.designdetails.io/library/637c568a44ffed38cb340790289438e384b85d7c59265d66fe24e0d7a62c0e3c/cbb5f2f4-4d14-4ce8-bd95-557fc2cfaadb.webp
   SECTION.md v3.2: `cbb5f2f4-4d14-4ce8-bd95-557fc2cfaadb` (deterministic evidence; editorial review pending)
3. **Logo Cloud — Client and Partner Logo Wall** (Home)
   AI suggestion (96% confidence): Complete, self-contained multi-row logo cloud with consistent spacing and dividers, showcasing a substantial range of recognizable clients and partners.
   Capture: 1440×984px; page bounds 14824–15808px of 17774px; source section ID: `473a66f3-9d94-42f7-99a9-61c1c63a851e`; image: https://media.designdetails.io/library/b7586ab23752d081d14f006548d34ce73fce1a05a66a8c6f6c5db9dd4156ea48/473a66f3-9d94-42f7-99a9-61c1c63a851e.webp
   SECTION.md v3.2: `473a66f3-9d94-42f7-99a9-61c1c63a851e` (deterministic evidence; editorial review pending)
4. **CTA — Product Quality Contact CTA** (Home)
   AI suggestion (98% confidence): Complete standalone conversion panel with a distinctive stepped background, bold message, and direct contact button.
   Capture: 1440×870px; page bounds 15926–16796px of 17774px; source section ID: `4c64fd8a-158c-42d8-b466-082c86048313`; image: https://media.designdetails.io/library/25e4cdc42ed1bde4f7e69681efee79d2327926293926897ffc5109352d3421e5/4c64fd8a-158c-42d8-b466-082c86048313.webp
   SECTION.md v3.2: `4c64fd8a-158c-42d8-b466-082c86048313` (deterministic evidence; editorial review pending)
5. **Footer — Halaska Studio Footer** (Home)
   AI suggestion (99% confidence): Complete page footer with grouped navigation, services, tools, contact details, CTA, oversized brand wordmark, and legal text.
   Capture: 1440×870px; page bounds 16904–17774px of 17774px; source section ID: `31a8c3e0-504a-4994-ab4a-7b8f952fa411`; image: https://media.designdetails.io/library/711f4023b90f5caf60e1f9eaabd373ff11e3730482138fefc1c5ea45ad1f1878/31a8c3e0-504a-4994-ab4a-7b8f952fa411.webp
   SECTION.md v3.2: `31a8c3e0-504a-4994-ab4a-7b8f952fa411` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/2b71ec8eaba65c7e5125c8b23a7fad1d673a9b4e14e6c22640c89ebeb2d6ca2f/desktop_full-61a8ab20-2026-10-23T18-28-14-131Z.jpg
- Mobile screenshot: https://media.designdetails.io/library/e5858c22143a771e5a93174273c2f966d4eff6f324c9fa8644bbc259c704aaa7/mobile_full-61a8ab20-2026-10-23T18-28-55-968Z.webp
- Open Graph image: https://media.designdetails.io/library/006f2ca9d6c1ea18460be696ffb893455dd4bea22400a0fd77bb2f6fa2fc4c1f/og_image-61a8ab20-2026-10-23T18-28-22-750Z.webp
- Full-page video: https://media.designdetails.io/library/4ad1aecea1bb5b89e76066d7555172582bfc47985a45bc919ec8ee90ce291441/motion-1792783506151.mp4
- Video poster: https://media.designdetails.io/library/692d8e2f87ff898d254b607bee55965769087ba2f0518f0e6285d9503c9ade15/motion-poster-1792783506151.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Logo Strip
- Gallery
- Primary Button
- Footer
- Floating Pill Nav
- Wavy Container
- Browser Mockup Frame

## Quality rubric

Overall: 58.4/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Halaska executes a clean, typographically distinctive agency-portfolio page with a few well-chosen bespoke motion touches (scroll-linked logo scaling, a distorting footer wordmark), but much of its structural vocabulary — pill nav, wavy CTA container, uniform browser-mockup case-study frames — draws on common current studio-site patterns rather than a singular point of view, placing it solidly in the competent tier rather than higher.

- Typography (15%): 64 — A deliberate three-tier type system pairs a pixelated retro display face (FK Raster Roman Compact Smooth) for headlines and CTAs with a clean grotesk (Inter Display) for body copy and a mono (Geist Mono) for small nav labels. The contrast between the retro-pixel display type and the neutral sans gives the brand a distinct voice, and sizes scale sensibly from 12px labels to 64px display statements with appropriate line-height.
- Color (10%): 58 — The palette is tightly restrained to a cool off-white canvas, near-black navy text, and a single saturated blue accent for actions — a disciplined, low-risk system. However it is a familiar SaaS/agency formula (white canvas + one accent blue) rather than a distinctive chromatic idea, and the portfolio mockups introduce uncontrolled secondary color that the shell doesn't visually negotiate.
- Layout (20%): 60 — Generous negative space, a consistent constrained content width, and a repeating framing device (browser-mockup windows for case studies) create legible rhythm across a very long page. But the overall structure — floating pill nav, hero, logo strip, stacked case-study mockups, wavy CTA band, footer wordmark — is a now-common agency-portfolio template, and much of the 'layout' is simply screenshots of other products stacked with spacing rather than original compositional invention.
- Motion (20%): 61 — Motion goes beyond generic scroll-reveals: a scroll-linked hero logo that scales down (and reverses when scrolling back up), a continuously undulating wavy border on the CTA container, and a persistent wave-distortion effect on the footer wordmark are specific, bespoke authored choices rather than off-the-shelf fade-ins. However the observation is limited to an automated scroll pass, so hover states, interaction feedback, and easing/frame-rate quality cannot be confirmed.
- Originality (25%): 50 — The pixelated retro display font paired with a clinical minimal shell, and the distorting footer wordmark, are the most memorable, hard-to-substitute ideas on the site. But the floating pill nav, browser-chrome case-study frames, and wavy-edge CTA container are now widely recurring patterns across contemporary studio/agency sites, so the overall concept leans on current trend vocabulary more than a singular point of view.
- Content (10%): 63 — Case studies are integrated through a consistent presentational device (desktop browser-chrome frames showing real product UI for Pascal, Ethereal, nucanon, CollectiveShift, and an NFT storage dashboard), paired with client logos and brief descriptive copy, which supports the studio's claims with concrete, legible work samples rather than abstract imagery.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A huge serif wordmark paired with a small typewriter-style headline gives the studio a confident, editorial feel before any product appears. The page then paces real app screens, dark trading dashboards and glitchy pixel-art logos one project at a time, letting each dark UI screenshot speak for the client work rather than stock imagery.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.