Design System Inspiration of Bito

1. Visual Theme & Atmosphere

Bito (滿滿大平台) is a leading Taiwanese motion-design and creative-branding studio out of Taipei, and its portfolio site is a master-class in restraint as a frame for maximalist work. The site itself is almost monastically plain: a pure white canvas (#ffffff), pure black ink (#000000) for nearly all type, and absolutely no rounding — every corner is a hard 0px. There are no drop shadows anywhere; separation comes from raw whitespace and full-bleed image tiles, never elevation. This is the classic agency move: the chrome disappears so the work can shout. Bito is a studio-as-reference (in the spirit of Goodpatch) — the interest is not in a product UI but in how a world-class motion/branding house presents craft.

The studio's personality erupts through its imagery, and the one place that energy leaks into the system tokens is color. Bito's signature is a vivid red-orange — a family running from #f92c16 through #ff5529 and #e74118 — that appears as full-bleed backgrounds behind project thumbnails and the contact block, turning entire viewport-sized tiles into blocks of saturated warmth. Around it orbit other electric accents lifted straight from project art: an electric blue (#4419fe), a cobalt (#126dff), a hot magenta (#fb76ff), and a deep green (#166b22). None of these are buttons or links — they are the work itself, used architecturally as full-screen color fields.

Typography is the other half of the identity. Latin text is set in Neue Haas Unica — a precise, neutral grotesque in the Helvetica lineage — paired with Noto Sans TC for Traditional Chinese, the bilingual reality of a Taipei studio. Weights stay disciplined: 400 for nav, body, and tags; 500 for labels and project titles. There is no heavy display weight and no italics — the type stays quiet and even, letting the kinetic imagery carry the drama. The result is editorial and confident: a gallery wall painted white, hung with loud, brilliant work.

Key Characteristics:

• Pure black ink (#000000) on pure white canvas (#ffffff) — stark editorial gallery
• Zero border-radius everywhere (0px) — hard, sharp, architectural corners
• No shadows at all — separation by whitespace and full-bleed tiles, never elevation
• Signature red-orange accent family (#f92c16 / #ff5529 / #e74118) as full-bleed tile backgrounds
• Secondary electric accents from project art: blue (#4419fe), cobalt (#126dff), magenta (#fb76ff), green (#166b22)
• Neue Haas Unica (Latin) + Noto Sans TC (Traditional Chinese) bilingual type stack
• Restrained weights — 400 for nav/body/tags, 500 for labels/titles; no heavy display
• Faint grey (#bebebe) for inactive tags, mid grey (#707070) for secondary meta, #e2e2e2 hairlines

2. Color Palette & Roles

Primary Accent (Bito Red-Orange)

• Bito Red-Orange (#f92c16): The signature accent — saturated red-orange used as full-bleed background behind project thumbnails and contact blocks. The studio's "hot" color.
• Accent Orange (#ff5529): Brighter orange variant of the same family, used on alternate full-bleed tiles.
• Accent Deep (#e74118): Deeper red-orange variant, seen on the contact/social full-bleed block.
• Accent Red (#ff2700): Pure-red end of the warm family for the most intense tiles.

Secondary Accents (from project art)

• Electric Blue (#4419fe): Vivid cobalt-violet blue pulled from project covers — used as a full-screen color field, never as a link.
• Cobalt (#126dff): Brighter blue accent on other project tiles.
• Hot Magenta (#fb76ff): Saturated pink-magenta decorative accent.
• Deep Green (#166b22): A grounded forest green accent for contrast tiles.

Ink & Canvas

• Ink Black (#000000): Primary text, nav, headings, labels — pure black, true to the high-contrast editorial system.
• Canvas White (#ffffff): Page background, card surfaces, and text reversed out over the warm/dark tiles.

Neutral Scale

• Mid Grey (#707070): Secondary metadata and muted captions.
• Faint Grey (#bebebe): Inactive filter tags (genre/service labels), lowest-emphasis text.
• Hairline (#e2e2e2): Thin dividers and subtle separators in the otherwise shadow-free layout.

3. Typography Rules

Font Family

• Latin: neue-haas-unica (with Noto Sans TC and system fallbacks) — a neutral, precise grotesque used for all Latin nav, titles, body, and tags.
• Traditional Chinese: Noto Sans TC — the bilingual companion for the studio's Taiwanese (Traditional Chinese) content.

Hierarchy

Principles

• Neutral grotesque, not display: Neue Haas Unica is chosen for its evenness — the type recedes so the motion/branding imagery dominates. No serif, no italic, no heavy display weight.
• Two weights only: 400 carries nav, body, and tags; 500 carries section labels and project titles. The hierarchy is built from size and color, not weight extremes.
• Bilingual by default: Every text style falls back to Noto Sans TC, reflecting the Taipei studio's Traditional-Chinese-and-English reality.
• Normal tracking: Letter-spacing stays normal across the system — the grotesque is left to its native metrics.

4. Component Stylings

Navigation

Top Nav Link

• Background: transparent
• Text: #000000
• Radius: 0px
• Font: 16px Neue Haas Unica weight 400
• Active: ink #000000 label, no underline indicator
• Use: Header nav items (Work, News, About, Bitween)

Language Toggle

• Background: transparent
• Text: #000000
• Radius: 0px
• Font: 16px Neue Haas Unica weight 400
• Use: EN / 中 language switch in the header

Cards & Containers

Warm Project Tile

• Background: #f92c16
• Text: #ffffff
• Radius: 0px
• Use: Full-bleed warm project thumbnail in the Work grid (also #ff5529 and #e74118 variants)

Dark Project Tile

• Background: #000000
• Text: #ffffff
• Radius: 0px
• Use: Black project cover tile, sharp-cornered, no shadow

Badges & Tags

Filter Label

• Text: #000000
• Radius: 0px
• Font: 24px Neue Haas Unica weight 500
• Use: Genre / Service / Sector filter heading

Tag Chip (Inactive)

• Text: #bebebe
• Radius: 0px
• Font: 16px Neue Haas Unica weight 400
• Use: Inactive genre/service tag (Live Action, Event, Ceremony, Branding…)

Footer

Footer Link

• Text: #000000
• Font: 16px Neue Haas Unica weight 400
• Use: Footer contact / social link (Facebook, Instagram, Behance, info@bito.tv)

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 2 brand-owned surfaces) Tier 1 sources: https://bito.tv/ (home — nav, Work grid, project tiles, footer) | https://bito.tv/work/148/The-60th-Golden-Horse-Awards-Branding (project page — H3 title, Credits label, accent tiles) Tier 2 sources: getdesign.md/bito — not listed (studio, not in catalog) | styles.refero.design ?q=bito — no matching style page Conflicts unresolved: none

5. Layout Principles

Spacing System

• Header padding measured at 32px 40px (vertical / horizontal) on the 96px-tall top bar
• Scale: 4px, 8px, 16px, 24px, 32px, 40px, 96px (section)
• Notable: Generous whitespace is the primary layout device — sections breathe, and full-bleed image tiles butt edge-to-edge with no gutter

Grid & Container

• The Work index is a dense, edge-to-edge grid of full-bleed project tiles — many at full viewport width (1440px) or half (668px)
• Project pages stack large media with a centered title (28px) and a Credits / Genre / Service / Sector metadata block
• No max-width "reading column" chrome — the layout is gallery-first, image-led
• Header is a 96px transparent bar with nav left/center and language + socials right

Whitespace Philosophy

• Negative space as frame: The white canvas is the matte around the work; restraint is the point.
• Edge-to-edge tiles: Project thumbnails extend full-bleed, color fields with no rounding or border, abutting directly.
• No decorative chrome: No cards-with-shadows, no rounded containers — the system trusts whitespace and full-bleed color.

Border Radius Scale

• The entire system is 0px — there is no radius scale. Every tile, label, and container is hard-cornered. This sharpness is a deliberate editorial signature.

6. Depth & Elevation

Shadow Philosophy: Bito is a fully shadowless system. Live inspection found box-shadow: none across the nav, Work grid, project tiles, and footer. Depth is not simulated — the studio relies on raw figure-ground contrast: a brilliant full-bleed color field (the Bito red-orange #f92c16, or electric blue #4419fe) reads as foreground against the white canvas, and black tiles (#000000) recede or advance by tonal weight alone. This is the agency aesthetic in its purest form: no skeuomorphic elevation, just flat planes of color and type.

7. Do's and Don'ts

Do

• Keep the canvas pure white (#ffffff) and ink pure black (#000000) — maximum editorial contrast
• Use 0px radius on every element — the hard corner is the brand's signature sharpness
• Reserve the Bito red-orange family (#f92c16 / #ff5529 / #e74118) for full-bleed project/contact tiles
• Use the secondary accents (#4419fe blue, #fb76ff magenta, #166b22 green) as full-screen color fields, not as buttons or links
• Set Latin type in Neue Haas Unica and Traditional Chinese in Noto Sans TC
• Stay within weights 400 (nav/body/tags) and 500 (labels/titles)
• Let whitespace and full-bleed tiles do all the separating
• Use faint grey (#bebebe) for inactive tags and mid grey (#707070) for muted meta

Don't

• Use drop shadows for elevation — Bito is a flat, shadow-free system
• Round any corner — the entire system is 0px radius
• Turn the accent colors into buttons or links — they are architectural color fields, not interactive chrome
• Introduce a heavy display weight or italics — type stays even at 400/500
• Add gutters between project tiles — they butt edge-to-edge, full-bleed
• Use a serif or a non-grotesque Latin face — Neue Haas Unica owns the Latin voice
• Spread the red-orange thinly across small UI — it lives only on large saturated tiles
• Add decorative cards-with-shadows chrome — the white canvas is the only frame

8. Responsive Behavior

Breakpoints

Touch Targets

• Nav links sit in the generous 96px header with comfortable spacing
• Full-bleed project tiles are themselves the tap target — the entire image is interactive
• Language toggle (EN / 中) and social links grouped at the header right

Collapsing Strategy

• Work grid: multi-column full-bleed → 2-up → single-column stacked, always edge-to-edge
• Project pages: large media remains full-width; the title + Credits/Genre/Service block stacks
• Header: full nav row → hamburger toggle on narrow viewports
• Type scale compresses: 28px titles and 24px labels step down on mobile, weights preserved

Image Behavior

• Project thumbnails and covers carry no shadow and no radius at any size — flat full-bleed
• Motion/video work plays edge-to-edge; the white canvas only reappears between sections
• Color-field tiles maintain their saturated accent backgrounds across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary accent (warm tile): Bito Red-Orange (#f92c16)
• Warm variants: Orange (#ff5529), Deep (#e74118), Red (#ff2700)
• Secondary accents: Electric Blue (#4419fe), Cobalt (#126dff), Magenta (#fb76ff), Green (#166b22)
• Ink / text: Black (#000000)
• Background: White (#ffffff)
• Muted meta: Mid Grey (#707070)
• Inactive tag: Faint Grey (#bebebe)
• Hairline: #e2e2e2

Example Component Prompts

• "Create a portfolio grid: pure white (#ffffff) canvas, full-bleed project tiles with 0px radius and no gutter. One tile uses Bito red-orange (#f92c16) background with white (#ffffff) overlay text; another uses electric blue (#4419fe); another pure black (#000000). No shadows anywhere."
• "Design a top nav: 96px transparent bar, Neue Haas Unica 16px weight 400 links in black (#000000) — Work / News / About / Bitween — with an EN / 中 language toggle and social links right-aligned. No background, no shadow."
• "Build a project page header: centered title 28px Neue Haas Unica weight 500 in black (#000000), line-height 1.50. Below it a Credits / Genre / Service / Sector block with 24px weight-500 labels and faint-grey (#bebebe) 16px tag chips. Full-bleed media above, no radius."
• "Make a contact footer block: full-bleed deep red-orange (#e74118) background, white (#ffffff) Neue Haas Unica 16px links — Facebook, Instagram, Behance, info@bito.tv — sharp corners, no shadow."

Iteration Guide

1. Everything is 0px radius — never round a corner
2. No shadows — separate with whitespace and full-bleed color tiles
3. Bito red-orange (#f92c16) and the warm family live only on large saturated tiles, not small UI
4. Type is Neue Haas Unica (Latin) + Noto Sans TC (Traditional Chinese), weights 400/500 only
5. Ink is pure black (#000000), canvas is pure white (#ffffff) — maximum contrast
6. Accent colors (#4419fe, #fb76ff, #166b22) are architectural color fields, never buttons
7. Faint grey (#bebebe) for inactive tags; mid grey (#707070) for muted meta

---

10. Voice & Tone

Bito's verbal voice is spare, bilingual, and craft-forward — the words get out of the way so the work can speak. The site's vocabulary is almost entirely functional English nav (Work, News, About, Bitween) over Traditional-Chinese project context, with no marketing superlatives and no taglines shouting from the homepage. The studio lets the portfolio carry the persuasion; copy is reduced to labels, credits, and contact lines.

Voice samples (verbatim from live site):

• "Work / News / About / Bitween" — the entire primary nav, single-word functional labels. (verified live 2026-06-17, https://bito.tv/)
• "The 60th Golden Horse Awards Branding" — project title, descriptive and proper-noun-led. (verified live 2026-06-17, /work/148)
• "© Bito 2026 — Taipei, Taiwan · info@bito.tv" — footer contact line, plain and direct. (verified live 2026-06-17, https://bito.tv/)

Forbidden register: marketing hype, superlatives ("award-winning", "world-class") in body chrome, exclamation-heavy copy, or any verbal flourish that competes with the imagery. The work wins the argument; the words only label it.

11. Brand Narrative

Bito (滿滿大平台) is a creative studio based in Taipei, Taiwan, working at the intersection of motion design, branding, and live-experience visual systems. Its reputation was built on high-visibility national and cultural commissions — most famously the visual identity and title sequences for the Golden Horse Awards (Taiwan's premier film awards) across multiple editions, alongside Taiwan Lantern Festival identities, Taipei Metro brand films, tourism rebrandings, and government/cultural campaigns. The portfolio reads as a record of Taiwan's contemporary public visual culture.

The studio's positioning is craft-first: it does not sell a product or a SaaS, it sells creative direction and execution at the highest tier. That posture is exactly why its own site is so restrained — a motion studio whose reels are saturated, kinetic, and maximal needs a presentation frame that is the opposite: silent, white, sharp-cornered, and shadow-free, so nothing on the page competes with the work being shown.

What Bito's design refuses, visible in every pixel of the site: decorative UI chrome, rounded "friendly" product geometry, drop shadows, and marketing superlatives. What it embraces: a pure black-on-white editorial canvas, hard 0px corners, full-bleed saturated color fields lifted straight from the work, and a neutral bilingual grotesque (Neue Haas Unica + Noto Sans TC) that lets Taipei's creative output, not the website, be the headline.

12. Principles

1. The work is the interface. The site exists to display reels and case studies, not to be admired itself. UI implication: keep chrome to near-zero — transparent nav, no cards, no shadows — so full-bleed project media dominates every viewport.
2. Sharp, not soft. Hard 0px corners everywhere signal precision and editorial seriousness. UI implication: never round a corner; let tiles butt edge-to-edge as flat planes.
3. Color belongs to the work. The saturated accents (#f92c16, #4419fe) are project art used architecturally, never decoration applied to UI. UI implication: reserve accent color for large full-bleed fields; keep functional UI strictly black and white.
4. Bilingual by default. A Taipei studio speaks Traditional Chinese and English in the same breath. UI implication: every type style must fall back to Noto Sans TC; the language toggle (EN / 中) is first-class.
5. Restraint amplifies craft. A loud reel needs a quiet room. UI implication: use whitespace and neutral grotesque type as the matte; resist every urge to add visual flourish to the frame.

13. Personas

Personas below are fictional archetypes informed by publicly observable Bito audiences (cultural-event organizers, brand directors, motion-design talent, agency peers), not individual people.

陳怡君 (Chen Yi-chun), 38, Taipei. A festival programming director sourcing a studio for a national awards ceremony's visual identity. Scans Bito's Work grid for scale and ambition; trusts the studio precisely because the site gets out of the way and lets the Golden Horse and Lantern Festival reels speak.

Marcus Lin, 29, Taipei. A motion designer evaluating Bito as a place to work. Reads the case studies for craft depth and the Bitween sub-brand for the studio's culture. Values the unflinching black-on-white presentation as a signal of taste and rigor.

Sophie Tan, 34, Singapore. A regional brand lead commissioning a rebrand and a launch film. Wants a studio fluent in both Traditional-Chinese cultural nuance and international design language; reads Bito's bilingual, restrained site as proof of exactly that range.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: As a motion-design studio, Bito's most expressive motion lives inside the embedded reels and project films, not the site chrome — the UI framing stays deliberately calm so it never competes with the work. Tile hovers reveal project titles with a quick motion-standard / ease-enter fade; full-bleed sections crossfade at motion-slow. There is no bounce or spring on the chrome — the steadiness of the frame is what lets the kinetic content feel loud. Under prefers-reduced-motion: reduce, all chrome transitions collapse to instant and autoplaying reels respect the preference; the portfolio remains fully navigable.