---
title: "Bōjka Studio design system"
variant: extended
source: https://bojka.studio/
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/bojka-studio)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Bōjka Studio · Design System

> Electric green, oversized type, and a studio’s work in focus.

**Theme:** light · **Industry:** agency · **Source:** https://bojka.studio/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Bōjka Studio’s homepage pairs a vivid green canvas with oversized black typography and a restrained portfolio image. A compact Czech introduction and persistent white navigation keep the expressive opening easy to scan.

## North star

Let one uninterrupted electric-green field and oversized black type dominate, with imagery and navigation kept disciplined.

## Overview

The opening is built around a striking, flat green canvas (#0af500), with black (#000000) carrying the oversized studio name and supporting copy. White (#ffffff) is reserved for the persistent bottom navigation strip, creating a crisp boundary against the vivid page field. A single custom sans-serif family supplies both the monumental wordmark-like heading and smaller Czech introduction; the display is regular weight with subtly tight tracking, not a decorative type treatment. The layout is deliberately sparse: the studio name spans nearly the full viewport width, while the short introduction sits left-aligned above a broad, inset portfolio photograph. The image brings muted, natural tones into an otherwise highly controlled palette. Navigation labels are evenly distributed along the white bar, with the language switch aligned to the far edge. Keep surfaces flat and let the unusually saturated green, strong scale contrast, and one carefully framed image provide the visual impact.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary display and body text, navigation labels, links, and occasional dark surfaces. |
| Electric Green | `#0af500` | `--color-electric-green` | brand | Dominant homepage canvas and defining high-visibility brand field. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Persistent bottom navigation surface, sharply separated from the green canvas. |

### Semantic aliases

`--color-canvas` → `#0af500` (Electric Green) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-accent` → `#0af500` (Electric Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#0af500` | 14.07:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#0af500` | `#ffffff` | 1.49:1 | fail |
| `#0af500` | `#000000` | 14.07:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| custom_15364 | `--font-body` | webfont | 400 | Used throughout for the oversized studio name, introduction, and navigation links. | Manrope |

- **custom_15364:** Regular weight throughout; display lettering is very large with subtly negative tracking, while body and links remain clean and unembellished.

### Type scale — Custom (ratio ≈ 7.136, base 22px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 157px | 400 | normal | -0.008em | — | custom_15364 | Oversized Bōjka Studio name across the top of the hero. |
| body | 22px | 400 | normal | 0 | — | custom_15364 | Short Czech studio introduction below the heading. |
| link | 22px | 400 | normal | 0 | — | custom_15364 | Navigation labels and language switch in the bottom bar. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values):  px.
- Section rhythm — · element gap — · card padding — · max content width —.

The first viewport uses a nearly edge-to-edge green canvas, with the oversized studio name aligned to the upper left and spanning almost the full width. A short, left-aligned introduction sits below a generous open interval; a wide portfolio image follows, inset slightly from the page edges. The bottom white navigation bar stays fixed and runs across the viewport, with four links spaced along it and the language control pushed to the far right. The result is comfortable and intentionally sparse rather than card-dense.

## Shape & elevation

- No box shadows measured: the page is flat.

The design is mostly flat: the green canvas, image, and white navigation read as simple neighboring planes. Measured card styling shows no shadow and a zero-radius treatment; the screenshot likewise emphasizes clean, squared edges. Use the photo itself for depth and texture rather than adding elevation, borders, or layered cards.

## Imagery

A wide, rectangular photograph introduces a real studio project beneath the introductory copy. It is framed as a large horizontal panel with a small inset from the green page edges; its soft, neutral scene and visible packaging contrast with the saturated canvas. Keep imagery photographic and project-led, with no decorative illustration or added color effects.

## Components

### Oversized studio title

A very large, regular-weight black studio name sits at the top of the green canvas and nearly fills the viewport width.

### Introductory copy

A compact, left-aligned Czech paragraph in the same custom sans-serif sits between the title and project image.

### Portfolio image

A broad inset photograph presents a studio project, adding muted product and environmental tones to the bright page.

### Fixed navigation

A full-width white bottom strip carries Projekty, Studio, Proces, Kontakt, and a right-aligned ENG language link.

### Text links

Navigation and process links use the page’s regular-weight custom sans-serif and black text, with no measured decoration.

### Measured component styles

- **Link** (“Proces”): transparent background · text #000000 · radius 0px · padding 0px · 400 22px custom_15364
- **Card**: background #000000 · text #282828 · radius 0px · padding 0px · 400 16px -apple-system

## Do

- Use #0af500 as the dominant canvas color.
- Set primary text in #000000.
- Keep the studio title exceptionally prominent.
- Align the introduction and project image to the left.
- Use #ffffff for the fixed bottom navigation surface.
- Let one authentic project photograph provide tonal contrast.

## Don't

- Do not introduce unmeasured palette colors as interface chrome.
- Do not add gradients, shadows, or rounded-card styling.
- Do not crowd the large areas of green negative space.
- Do not compete with the studio title using secondary display treatments.
- Do not turn project imagery into decorative illustration.
- Do not replace the restrained bottom navigation with a large menu.

## Agent prompt

Create a new page in the Bōjka Studio visual style. Use Electric Green (#0af500) as the expansive page canvas, Studio Ink (#000000) for all prominent typography, and Gallery White (#ffffff) for a crisp persistent navigation surface. Use one clean regular-weight sans-serif throughout; make the main title extremely large and nearly full-width, with subtly tight tracking. Keep supporting copy short, left-aligned, and separated from the title by generous open space. Introduce a single broad, inset project photograph as the main visual content. Keep the composition flat, with squared edges, no shadows, and no ornamental cards. Make navigation concise and evenly arranged, reserving a far-edge position for a language switch. Preserve strong contrast and generous breathing room.

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/bojka-studio