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.

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

Tier 1 live inspect (2026-07-02) via playwright getComputedStyle on two surfaces:

• — 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.
• — 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. –>

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

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.