스퀴즈비츠 DESIGN.md

Design System Inspiration of SqueezeBits

Overview

Visual Theme & Atmosphere

SqueezeBits (스퀴즈비츠) is a Korean deep-tech AI company whose product is efficiency itself — model quantization, compression, and inference optimization (OwLite, Fits on Chips, Yetter, RoBoost). Its design language runs on two deliberately different surfaces. The flagship marketing homepage is a dark, immersive stage: near-black indigo sections (#060211, #050311) and pure black (#000000) backdrops carry an enormous 92px Pretendard hero ("Unlock the Potential of AI") in white (#ffffff), while a single saturated brand orange (#cc5a16) burns through as the one accent — the top announcement banner fill, the word "SqueezeBits" set in orange inside section titles, and every "View more" link. The effect is a GPU-in-a-dark-datacenter mood: quiet, technical, and confident, with orange as the heat signature.

The second surface — the official Tech blog (blog.squeezebits.com) — flips to light. It is a clean, editorial, engineer-to-engineer reading environment on a white (#ffffff) canvas with a zinc neutral ladder (ink #09090b, body #52525b, muted #71717a) and a warm-grey nav (#2c2925). Here the display face switches from Pretendard to IBM Plex Sans at weight 600 — a monospace-adjacent humanist sans that reads as research-grade and code-literate, exactly right for posts about vLLM, Intel Gaudi, and quantization-aware training. The brand orange returns as a slightly brighter fill (#ee781f) on the primary Subscribe button, tying the two surfaces together.

What unifies both surfaces is restraint with depth: live inspection found box-shadow: none across heroes, nav, cards, buttons, and inputs on both domains. Separation comes from flat tint (#f4f4f5 zinc surface, #f8f6f1 warm cream, #f9fafb on the homepage's light bands) and thin #e4e4e7 hairlines rather than elevation. Interactive chrome is small-radius (6px on the blog, 8px on the homepage menu) and orderly. The system reads like the company: performance-obsessed, precise, and allergic to decoration that costs cycles.

Key Characteristics:

• Two-surface split — dark immersive homepage (Pretendard) + light editorial blog (IBM Plex Sans headings)
• A single saturated brand orange as the only accent: #cc5a16 on the homepage, brighter #ee781f as the blog CTA fill
• Near-black indigo homepage stage (#060211, #050311, #000000) with white (#ffffff) display type
• Zinc neutral ladder on the blog: ink #09090b, near-black #020a0f, body #52525b, muted #71717a, tab-muted #646470
• Warm-grey blog nav text (#2c2925) at IBM Plex Sans weight 560 — a variable-weight fingerprint
• Flat, shadow-free system — separation via tint (#f4f4f5, #f8f6f1, #f9fafb) and #e4e4e7 hairlines
• Slate section heads on light homepage bands (#1f2937); faint grey (#d9d9d9) for muted copy on the dark stage
• Small, orderly radii — 6px blog chrome, 8px homepage controls; no pills, no heavy rounding

Primary tasks

• Read reproducible benchmarks before deciding how to cut serving cost
• Evaluate a quantization toolchain on its accuracy and latency curve
• Search the blog and fall back to categories when nothing matches
• Subscribe to the blog to follow new posts
• Open the View more link under a product block to read its detail

Brand Narrative

SqueezeBits (스퀴즈비츠) is a Korean AI systems company built around a single thesis: the potential of AI is unlocked not by bigger models but by running them efficiently. Its name is the thesis — squeezing bits, i.e. quantization and compression, so that large models "fit on chips." The product line makes the mission literal: OwLite (quantization-centered model optimization with QAT to restore near-original accuracy), Fits on Chips (a serving-framework research tool that tunes lightweight models to specific GPU/NPU hardware), Yetter (an integrated full-stack inference engine and GenAI API service combining OwLite and Fits on Chips), and RoBoost (a Physical-AI synthetic-data generation platform for robotics and autonomous driving).

The company's stated promise on its homepage — "Deploy your AI with maximal efficiency on CPU, GPU, or NPU" — positions it at the systems layer between models and silicon. Its engineering blog reinforces the identity: deep, reproducible write-ups on vLLM, SGLang, Intel Gaudi, Qualcomm NPUs, disaggregated inference, and techniques like GraLoRA and vocabulary trimming. This is a company that publishes benchmarks, not brochures.

In 2026 SqueezeBits announced it is joining Rebellions, the Korean NPU/AI-accelerator company — a natural pairing of a model-efficiency team with a chip maker, and the reason the site's top banner reads "SqueezeBits is joining Rebellions!" What the design refuses is telling: no institutional-SaaS gloss, no shadow-stacked cards, no second accent color competing with the orange heat signature. What it embraces is a dark, instrument-panel homepage and a light, research-grade blog — both flat, both fast, both engineered.

Principles

1. Efficiency is the product — and the aesthetic. The brand sells fewer wasted cycles; the UI wastes none either. UI implication: flat, shadow-free surfaces, small orderly radii, one accent color — nothing renders that doesn't inform.
2. Numbers over adjectives. Trust is earned with measured outcomes (3.1× faster, 70% cheaper), not superlatives. UI implication: lead callouts and benefit heads with figures; reserve prose for the mechanism.
3. One accent, marking the action. The orange (#cc5a16 / #ee781f) is the single heat signature. UI implication: use orange only for the brand word, the next action, or a live banner — never as decoration.
4. Two surfaces, one discipline. A dark immersive marketing stage and a light editorial blog can differ in mood but share the same flat, precise grammar. UI implication: keep type roles fixed (Pretendard display / IBM Plex Sans headlines) and depth flat across both.
5. Engineer as first-class reader. The blog treats ML engineers as peers with reproducible benchmarks. UI implication: long-form legibility, IBM Plex Sans headings, zinc ink, generous reading width — documentation is a design surface.

Personas

Personas below are fictional archetypes informed by publicly observable SqueezeBits audiences (ML systems engineers, inference-infra teams, hardware/NPU partners), not individual people.

민준, 34, 서울. An inference-infrastructure engineer at a Korean AI startup deciding how to cut serving cost on B200 GPUs. Reads the SqueezeBits blog for reproducible vLLM/quantization benchmarks and trusts the brand because it publishes numbers, not slogans.

Aisha, 29, Toronto. An ML engineer evaluating quantization toolchains. Cares that OwLite's QAT restores accuracy to near-original and that the docs show the accuracy/latency trade curve. Would dismiss a vendor whose site was all adjectives and no figures.

Dr. Park, 45, 대전. A hardware partner at an NPU company assessing full-stack optimization fit. Values that Fits on Chips models the hardware's cost-performance curve explicitly, and reads the "joining Rebellions" news as strategic alignment.

Leo, 38, Berlin. A robotics lead exploring synthetic training data. Interested in RoBoost's physics-grounded validation and the promise of higher usable-data yield per GPU-hour; skims the blog's Physical-AI posts before booking a call.

Colors

Brand

• Brand Orange (#cc5a16): The flagship brand accent on the homepage — announcement-banner fill, the orange "SqueezeBits" wordmark inside section titles, and every "View more" inline CTA. The system's single "heat" color and the primary_color.
• Bright Orange (#ee781f): A brighter tint of the brand orange used as the blog's primary button fill (Subscribe). Same identity, lighter surface.

Homepage (Dark Stage)

• Night Indigo (#060211): Primary near-black indigo backdrop for immersive hero sections.
• Night Indigo Alt (#050311): Companion near-black indigo for the tallest hero band.
• Pure Black (#000000): Maximum-contrast hero background and banner text color.
• Slate (#1f2937): Section titles on the homepage's light bands and the mobile menu icon.
• Faint Grey (#d9d9d9): Muted/secondary copy on the dark stage where white would be too loud.
• Surface Grey (#f9fafb): Light section-band background on the homepage.

Blog (Light Surface) — Ink & Neutrals

• Ink (#09090b): Primary heading and body ink on the blog — a near-black zinc.
• Ink Strong (#020a0f): The darkest text, used on pill labels and the search field.
• Nav Warm (#2c2925): Warm-grey product-nav link color (Yetter / OwLite / Fits on Chips).
• Body Slate (#52525b): Zinc-600 secondary body copy.
• Muted (#71717a): Zinc-500 tertiary text, metadata, descriptions.
• Tab Muted (#646470): Inactive category-filter tab text.

Surface & Borders

• Canvas (#ffffff): White page background on the blog, card surfaces, and text on dark/orange.
• Surface (#f4f4f5): Zinc-100 tinted surface — "See All" pills, quiet chips, card fills.
• Surface Warm (#f8f6f1): Warm cream surface for occasional soft blocks on the blog.
• Hairline (#e4e4e7): Zinc-200 thin borders, dividers, card outlines, and input strokes — the primary separation device given the shadow-free system.

Typography

Font Family

• Display (homepage): Pretendard (with Pretendard Fallback) — drives the 92px hero and the 56px section titles, and is the document default / body font on the homepage.
• Heading (blog): IBM Plex Sans (with Pretendard fallback) — drives every blog headline at weight 600, giving posts a research-grade, code-literate voice.
• Body: Pretendard for reading text; blog body flows in the same zinc ink.

Hierarchy

Principles

• Two faces, two jobs: Pretendard owns the immersive homepage display and all body reading; IBM Plex Sans owns the blog headlines. They never swap roles — Plex signals engineering rigor, Pretendard signals Korean-premium clarity.
• Weight 600 is the headline weight: Every blog headline and homepage section title runs at 600 — assertive but never black-heavy. The homepage hero is the one exception, running lighter at 400 so the 92px scale carries the presence.
• Variable-weight fingerprint: Blog nav lands at an unusual 560, language toggles at 540 — the system leans on IBM Plex Sans's variable axis for fine-grained UI weight rather than jumping between named weights.
• Normal tracking: Unlike letter-spaced display systems, SqueezeBits keeps tracking at normal across sizes; scale and weight do the hierarchy work.

Layout

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px
• Notable: Blog chrome uses tight paddings (8px 16px buttons, 6px 14px pills, 4px 12px inputs); the homepage breathes with tall full-viewport hero bands (700–1060px)

Grid & Container

• Homepage: full-bleed vertical scroll of alternating dark (#060211/#050311/#000000) and light (#f9fafb) product bands, each anchored by a 56px section title and a "View more" link
• Blog: centered content column with a sticky top nav, a category-tab row, a featured hero post, then a responsive grid of hairline-outlined article cards
• Trusted-by logo strip and product blocks (Yetter / RoBoost / OwLite / Fits on Chips) stack vertically down the homepage

Whitespace Philosophy

• Immersive dark, editorial light: the homepage uses large empty dark space to make the orange accent and white hero pop; the blog uses calm white space for long-form reading.
• Flat segmentation: sections separate by background (dark band vs #f9fafb light band on the homepage; #ffffff vs #f4f4f5 on the blog) and #e4e4e7 hairlines — never by shadow.

Border Radius Scale

• Small (6px): blog buttons, inputs, pills, cards, nav items — the workhorse
• Medium (8px): homepage menu / control buttons
• Large (16px): larger containers when used
• Full (9999px): reserved for the rare avatar / circular control

Responsive Behavior

Breakpoints

Touch Targets

• Subscribe button at 36px height with 8px 16px padding
• Nav items at 38px height with 0px 10px padding
• Category tabs and pills sized with 6px 14px padding for comfortable tapping

Collapsing Strategy

• Homepage: 92px hero compresses on mobile; alternating dark/light bands maintain full-width treatment
• Blog: featured hero post stays full-width; the article grid reflows multi-column → single column
• Sticky nav condenses product links into a menu on narrow viewports

Image Behavior

• Blog post-card thumbnails sit inside 6px-radius, hairline-outlined cards with no shadow at any size
• Homepage product visuals sit directly on the dark stage without framing chrome

Elevation & Depth

Shadow Philosophy: SqueezeBits is a shadow-free system on both surfaces — live inspection returned box-shadow: none across heroes, nav, article cards, buttons, and inputs. Depth is communicated by background inversion (the near-black homepage stage against light bands) and by flat tint plus #e4e4e7 hairlines on the blog. When emphasis is needed the system reaches for the orange accent (#cc5a16 / #ee781f) or the dark stage, never elevation — a clean, fast, engineered look that matches a company selling efficiency.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none

Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and restrained, matching the flat, engineered aesthetic. The homepage uses scroll-triggered reveals as content enters the dark stage (motion-slow / ease-enter), with the orange accent settling last as the focal point. Blog interactions are quiet — hover and tab changes at motion-fast, card and section reveals at motion-standard / ease-enter. No bounce or spring: a company selling deterministic efficiency signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the scroll reveals resolve immediately; the site remains fully functional.

Components

Buttons

Subscribe (Primary)

• Background: #ee781f
• Text: #ffffff
• Radius: 6px
• Padding: 8px 16px
• Font: 16px / 500 / IBM Plex Sans
• Height: 36px
• Use: Blog primary call-to-action ("Subscribe") — the one filled button

View More (Inline Link)

• Text: #cc5a16
• Font: 18px / 600 / Pretendard
• Padding: 0px 0px 4px
• Use: Homepage inline "View more" CTA under each product block — an underline-gap text link, not a filled button

Inputs

Search

• Background: #ffffff
• Border: 1px solid #e4e4e7
• Radius: 6px
• Padding: 4px 12px
• Font: 14px / 400
• Height: 36px
• Use: Blog "Search posts" field

Cards & Containers

Article Card

• Background: #ffffff
• Border: 1px solid #e4e4e7
• Radius: 6px
• Use: Blog post card — flat, hairline-outlined, no shadow

Announcement Banner

• Background: #cc5a16
• Text: #000000
• Padding: 0px 16px
• Height: 48px
• Use: Top full-width announcement bar ("SqueezeBits is joining Rebellions!")

Badges

See-All Pill

• Background: #f4f4f5
• Text: #020a0f
• Radius: 6px
• Padding: 6px 14px
• Font: 14px / 600
• Use: "See All" / more-link pill on the blog

Tabs

Category Filter

• Text: #646470
• Padding: 6px 14px
• Font: 14px / 500
• Active: text #09090b
• Use: Blog category filters ("Tech Insight", "Product")

Navigation

• Background: #ffffff
• Text: #2c2925
• Font: 15px / 560 / IBM Plex Sans
• Radius: 6px
• Padding: 0px 10px
• Height: 38px
• Use: Blog product nav ("Yetter", "OwLite", "Fits on Chips", "SqueezeBits")

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.squeezebits.com/ (dark marketing homepage, live DOM); https://blog.squeezebits.com/ (official Tech blog, live DOM); https://github.com/SqueezeBits (official GitHub org) Tier 2 sources: getdesign.md/squeezebits — 0 DESIGN.md files (not listed); styles.refero.design/?q=squeezebits — not listed (generic/trending results only) Conflicts unresolved: none (two-surface orange split #cc5a16 homepage / #ee781f blog documented as intentional in .verification.md conflict matrix)

States

Do's and Don'ts

Do

• Use a single brand orange as the only accent — #cc5a16 on dark marketing surfaces, #ee781f as the blog CTA fill
• Set the homepage on a near-black indigo stage (#060211 / #050311 / #000000) with white (#ffffff) display type
• Use Pretendard for the immersive homepage display and all body; use IBM Plex Sans weight 600 for blog headlines
• Keep depth flat — separate with tint (#f4f4f5, #f8f6f1, #f9fafb) and #e4e4e7 hairlines, never drop shadows
• Use the zinc ink ladder on the blog: #09090b for headings, #52525b body, #71717a muted
• Keep radii small and orderly — 6px blog chrome, 8px homepage controls
• Render "View more" as an orange (#cc5a16) inline underline-gap link, not a filled button

Don't

• Add a second accent hue — orange is the only saturated color; everything else is neutral
• Use drop shadows for elevation — the system is flat on both surfaces
• Swap the type roles — never set blog headlines in Pretendard or the homepage hero in IBM Plex Sans
• Use pure black (#000000) for blog body text — reserve near-black zinc #09090b / #020a0f
• Apply pill or heavy rounding to buttons and cards — keep the 6px / 8px small-radius rhythm
• Spread the orange across many elements — it marks the single next action or the brand word only
• Letter-space the display type — SqueezeBits tracks at normal and lets weight/scale do the work

Voice & Tone

SqueezeBits speaks like a systems engineer who measures everything — precise, benefit-first, and quietly confident about performance numbers. The homepage register is direct and technical: "Deploy your AI with maximal efficiency on CPU, GPU, or NPU," "Do you need optimization?", "Maximize Inference Speed." Copy leads with a concrete capability or a measurable outcome (3.1× faster inference, 70% cost reduction) rather than adjectives. The blog voice is even more peer-to-peer — reference-implementation-grade write-ups on vLLM, Intel Gaudi, Qualcomm NPU, and quantization-aware training, addressed to ML engineers as equals.

Voice samples (verbatim from live surfaces):

• "Deploy your AI with maximal efficiency on CPU, GPU, or NPU" — homepage hero subline (capability, hardware-specific). (verified live 2026-07-02)
• "OwLite is SqueezeBits' core AI model optimization solution. Centered around industry-leading Quantization technology..." — homepage product copy (technical, precise). (verified live 2026-07-02)
• "SqueezeBits is joining Rebellions! Read more" — top announcement banner (factual, unhyped). (verified live 2026-07-02)

Forbidden register: vague hype ("revolutionary", "game-changing"), marketing superlatives untethered from a number, consumer-app exclamation stacking, and undefined jargon presented without a concrete benefit. If a claim can carry a measured figure, it should.

Agent Prompt Guide

Quick Color Reference

• Brand accent (marketing): Brand Orange (#cc5a16)
• Brand accent (blog CTA): Bright Orange (#ee781f)
• Homepage stage: Night Indigo (#060211), Night Indigo Alt (#050311), Pure Black (#000000)
• Homepage light band: Surface Grey (#f9fafb)
• Blog canvas: White (#ffffff)
• Blog ink: #09090b (headings), #020a0f (strongest), #52525b (body), #71717a (muted)
• Blog nav text: Nav Warm (#2c2925)
• Inactive tab: Tab Muted (#646470)
• Muted on dark: Faint Grey (#d9d9d9)
• Surface / hairline: #f4f4f5, #f8f6f1, #e4e4e7
• Slate section head: #1f2937

Example Component Prompts

• "Create a dark hero: near-black indigo #060211 background, full viewport. Headline at 92px Pretendard weight 400, white #ffffff, 'Unlock the Potential of AI'. One orange inline link 'View more' at 18px Pretendard weight 600, color #cc5a16, with a 4px underline gap. No shadow."
• "Design a blog post card: white #ffffff background, 1px solid #e4e4e7 border, 6px radius, no shadow. Title 22px IBM Plex Sans weight 600, line-height 1.375, color #09090b. Meta 14px, color #71717a."
• "Build a primary button: #ee781f background, white #ffffff text, 6px radius, 8px 16px padding, 16px IBM Plex Sans weight 500 — 'Subscribe'."
• "Create a category-tab row: inactive tabs 14px weight 500 in #646470, active tab text #09090b, 6px 14px padding, no underline. Beside it a 'See All' pill: #f4f4f5 background, #020a0f text, 6px radius, 6px 14px padding, 14px weight 600."
• "Top announcement banner: full-width #cc5a16 background, black #000000 text, 48px height, 0px 16px padding."

Iteration Guide

1. One orange only — #cc5a16 on dark surfaces, #ee781f as the blog fill; everything else neutral
2. Pretendard for homepage display + body; IBM Plex Sans weight 600 for blog headlines — never swap
3. No shadows — separate with #f4f4f5 / #f8f6f1 / #f9fafb tint and #e4e4e7 hairlines
4. Blog ink is zinc #09090b, never pure black for body
5. Small radii — 6px blog chrome, 8px homepage controls
6. Dark homepage stage is #060211 / #050311 / #000000, not neutral grey
7. "View more" is an orange inline link, not a filled button

---

Governance

Known Gaps

• Contrast, button-subscribe. Text #ffffff on #ee781f measures 2.86:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.