---
id: squeezebits
name: SqueezeBits
display_name_kr: 스퀴즈비츠
country: KR
category: ai
homepage: "https://www.squeezebits.com/"
primary_color: "#cc5a16"
logo:
  type: favicon
  slug: "https://www.google.com/s2/favicons?domain=squeezebits.com&sz=128"
verified: "2026-07-02"
added: "2026-07-02"
omd: "0.1"
tokens:
  source: live-extract
  extracted: "2026-07-02"
  note: "Two-surface system. primary = flagship marketing brand orange (#cc5a16 — banner / wordmark / View-more); primary-bright = brighter blog CTA-fill orange (#ee781f). Homepage is a dark immersive surface (Pretendard, near-black #060211/#050311/#000000). Blog is a light zinc surface (IBM Plex Sans headings, #09090b ink). Flat, shadowless."
  colors:
    primary: "#cc5a16"
    primary-bright: "#ee781f"
    ink: "#09090b"
    ink-strong: "#020a0f"
    slate: "#1f2937"
    nav: "#2c2925"
    body: "#52525b"
    muted: "#71717a"
    tab-muted: "#646470"
    faint: "#d9d9d9"
    canvas: "#ffffff"
    surface: "#f4f4f5"
    surface-warm: "#f8f6f1"
    surface-gray: "#f9fafb"
    hairline: "#e4e4e7"
    black: "#000000"
    night: "#060211"
    night-alt: "#050311"
  typography:
    family: { display: "Pretendard", heading: "IBM Plex Sans", body: "Pretendard" }
    hero:       { size: 92, weight: 400, use: "Homepage hero headline (Unlock the Potential of AI), Pretendard" }
    section:    { size: 56, weight: 600, use: "Homepage section titles (Squeeze / Benchmark / Why SqueezeBits?), Pretendard" }
    subhead:    { size: 32, weight: 600, use: "Homepage benefit subheads (Maximize Inference Speed), Pretendard" }
    blog-hero:  { size: 48, weight: 600, lineHeight: 1.0, use: "Blog hero H1, IBM Plex Sans" }
    blog-h2:    { size: 32, weight: 600, lineHeight: 1.25, use: "Blog featured post title, IBM Plex Sans" }
    card-title: { size: 22, weight: 600, lineHeight: 1.375, use: "Blog post card title, IBM Plex Sans" }
    nav:        { size: 15, weight: 560, use: "Blog product nav links, IBM Plex Sans" }
    button:     { size: 16, weight: 500, use: "Subscribe button label" }
    caption:    { size: 14, weight: 500, use: "Category tabs, metadata" }
    body:       { size: 16, weight: 400, use: "Body reading text, Pretendard" }
  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
  rounded: { sm: 6, md: 8, lg: 16, full: 9999 }
  shadow:
    none: "none"
  components:
    button-subscribe: { type: button, bg: "#ee781f", fg: "#ffffff", radius: "6px", padding: "8px 16px", font: "16px / 500 IBM Plex Sans", use: "Blog primary CTA (Subscribe)" }
    button-viewmore: { type: button, fg: "#cc5a16", font: "18px / 600 Pretendard", use: "Homepage inline View-more link CTA, 4px underline gap" }
    announcement-banner: { type: card, bg: "#cc5a16", fg: "#000000", padding: "0px 16px", height: "48px", use: "Top full-width announcement bar" }
    article-card: { type: card, bg: "#ffffff", border: "1px solid #e4e4e7", radius: "6px", use: "Blog post card, flat (no shadow)" }
    category-tab: { type: tab, fg: "#646470", active: "text #09090b", use: "Blog category filter tabs (Tech Insight / Product)" }
    search-input: { type: input, bg: "#ffffff", border: "1px solid #e4e4e7", radius: "6px", padding: "4px 12px", font: "14px / 400", use: "Blog search input" }
    seeall-pill: { type: badge, bg: "#f4f4f5", fg: "#020a0f", radius: "6px", padding: "6px 14px", font: "14px / 600", use: "See-All / more-link pill" }
  components_harvested: true
---

# Design System Inspiration of SqueezeBits

## 1. 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

## 2. Color Palette & Roles

### 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.

## 3. Typography Rules

### 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

| Role | Font | Size | Weight | Line Height | Notes |
|------|------|------|--------|-------------|-------|
| Homepage Hero | Pretendard | 92px | 400 | normal | "Unlock the Potential of AI" — white on dark stage |
| Homepage Section | Pretendard | 56px | 600 | normal | "Squeeze", "Benchmark", "Why SqueezeBits?" |
| Homepage Subhead | Pretendard | 32px | 600 | normal | Benefit heads ("Maximize Inference Speed") |
| Blog Hero | IBM Plex Sans | 48px | 600 | 1.0 (48px) | Blog H1 on dark hero |
| Blog Featured H2 | IBM Plex Sans | 32px | 600 | 1.25 (40px) | Featured / recap post title |
| Blog Card Title | IBM Plex Sans | 22px | 600 | 1.375 (30.25px) | Post-card headline |
| Blog Nav | IBM Plex Sans | 15px | 560 | normal | Product nav links (variable weight) |
| Button | IBM Plex Sans | 16px | 500 | normal | Subscribe CTA label |
| Caption | IBM Plex Sans | 14px | 500 | normal | Category tabs, metadata |
| Body | Pretendard | 16px | 400 | normal | Standard reading text |

### 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.

## 4. Component Stylings

### 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)

## 5. Layout Principles

### 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

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page backgrounds, hero, nav, most surfaces |
| Tint (Level 1) | `#f4f4f5` / `#f8f6f1` / `#f9fafb` background shift | Card / section separation without elevation |
| Hairline (Level 2) | `1px solid #e4e4e7` border | Blog card outlines, dividers, input strokes |
| Contrast (Level 3) | Dark stage (`#060211` / `#050311` / `#000000`) vs light | Homepage section depth by background inversion |

**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.

## 7. 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

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Homepage hero scales down from 92px; blog grid collapses to a single column; nav becomes a hamburger (8px-radius menu button) |
| Tablet | 640–1024px | 2-up article cards on the blog; moderate homepage band padding |
| Desktop | 1024–1440px | Full layout; multi-column blog card grid; full-viewport homepage bands |

### 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

## 9. 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

---

## 10. 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.

| Context | Tone |
|---|---|
| Homepage hero | Declarative, aspirational-but-technical. "Unlock the Potential of AI." |
| Product blocks | Question + capability. "Do you need optimization?" then a precise one-liner on what the product does. |
| Benefit callouts | Numbers-first. "3.1× faster inference", "70% cost reduction", "near-original accuracy via QAT". |
| Blog posts | Engineer-to-engineer. Benchmarks, architecture, hardware specifics; examples precede conclusions. |
| CTAs | Plain and low-pressure. "View more", "Subscribe". |
| Announcements | Factual, unhyped. "SqueezeBits is joining Rebellions! Read more." |

**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.

## 11. 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.

## 12. 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.

## 13. 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.

## 14. States

| State | Treatment |
|---|---|
| **Empty (blog search, no results)** | White (`#ffffff`) canvas. Single Ink (`#09090b`) line at body size explaining no posts match, with a path back to all categories. No illustration. |
| **Empty (category, none yet)** | Muted (`#71717a`) single line stating the category is empty, plus a link to "See All". Calm, factual. |
| **Loading (blog list fetch)** | Skeleton cards on the white canvas at final dimensions, 6px radius, `#e4e4e7` hairline. Flat pulse — no shadow shimmer, consistent with the shadowless system. |
| **Loading (homepage section reveal)** | Content fades in on scroll into the dark stage; the orange accent appears last so the eye lands on it. |
| **Error (fetch failed)** | Inline message in Ink (`#09090b`) with a plain-language explanation and a retry — never a bare "오류가 발생했습니다". States what to do next. |
| **Error (subscribe / form validation)** | Field-level message below the input in a clear tone; describes what is valid, not just "required". |
| **Success (subscribed)** | Brief inline confirmation in a calm tone near the Subscribe button; no celebratory emoji. |
| **Skeleton** | `#f4f4f5` blocks at final dimensions, 6px radius, flat pulse. |
| **Disabled** | Faint Grey (`#d9d9d9`) text on reduced-opacity surface; the orange action fades rather than switching to grey, to preserve the brand read. |

## 15. Motion & Easing

**Durations**:

| Token | Value | Use |
|---|---|---|
| `motion-fast` | 120ms | Hover, link/tab press, focus |
| `motion-standard` | 220ms | Card / section reveal, dropdown, sheet |
| `motion-slow` | 360ms | Homepage scroll-triggered hero and band reveals |

**Easings**:

| Token | Curve | Use |
|---|---|---|
| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — cards, sections, dropdowns |
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |

**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.

<!--
OmD v0.1 Sources — Philosophy Layer (sections 10–15)

Tier 1 live inspect (2026-07-02) via playwright getComputedStyle on two surfaces:
- https://www.squeezebits.com/ — dark marketing homepage: Pretendard hero 92px/400 white;
  56px/600 section titles; brand orange #cc5a16 on banner/wordmark/"View more"; near-black
  indigo stage #060211/#050311/#000000; light band #f9fafb; slate section head #1f2937;
  box-shadow none throughout.
- https://blog.squeezebits.com/ — official Tech blog: IBM Plex Sans headlines 48/32/22px @600;
  zinc ink #09090b, #52525b, #71717a; #ee781f Subscribe button; #f4f4f5 pill; #e4e4e7 hairline;
  #2c2925 nav @560; box-shadow none.

Token-level claims (§1-9) are sourced from this live inspection (see .verification.md Raw samples).

Voice samples (§10) are verbatim from the live homepage (hero subline, product copy, announcement banner).

Brand narrative (§11): product line (OwLite, Fits on Chips, Yetter, RoBoost) and mission
("Deploy your AI with maximal efficiency on CPU, GPU, or NPU") are quoted/paraphrased from the
live homepage; the "joining Rebellions" fact is from the live top-banner announcement. SqueezeBits
is a Korean AI model-optimization/quantization company; broader company details are general public
knowledge, not directly quoted from a verified SqueezeBits statement in this turn.

Personas (§13) are fictional archetypes informed by publicly observable SqueezeBits audiences
(ML systems engineers, inference-infra teams, hardware/NPU partners). Names are illustrative;
they do not refer to real people.

Interpretive claims (e.g., "efficiency is the product and the aesthetic", "one accent as heat
signature") are editorial readings connecting SqueezeBits' observed design to its positioning,
not directly sourced SqueezeBits statements.
-->


---
Source: https://oh-my-design.kr/design-systems/squeezebits · Raw twin of references/squeezebits/DESIGN.md
Install 400 verified references for your AI coding agent: npx oh-my-design-cli install-skills