---
version: alpha
name: "Nguyen Coffee Supply"
description: "Token-first design system reference for Nguyen Coffee Supply."

colors:
  background: "#000000"
  surface: "#0032c8"
  surface-elevated: "#0e0e0e"
  ink: "#ffffff"
  ink-muted: "#86a4ff"
  on-background: "#ffffff"
  on-surface: "#ffffff"
  primary: "#0032c8"
  on-primary: "#ffffff"
  primary-container: "#86a4ff"
  secondary: "#ff5787"
  on-secondary: "#ffffff"
  text-hover: "#003cf0"  # was rgba(0,50,200,var) hover tint — Google format requires hex
  focus-ring: "#0032c8"
  focus-tint: "#003cf0"
  border: "#0032c8"
  border-muted: "#1a1a1a"
  shadow-soft: "#000000"
  error: "#ef4444"
  warning: "#f59e0b"
  success: "#22c55e"

typography:
  display-hero:
    fontFamily: "Bebas Neue, Arial Narrow, Arial, sans-serif"
    fontSize: 70px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
  display:
    fontFamily: "Bebas Neue, Arial Narrow, Arial, sans-serif"
    fontSize: 62px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
  heading-section:
    fontFamily: "Bebas Neue, Arial Narrow, Arial, sans-serif"
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Work Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "Work Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Work Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Work Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: 0.8px
  button-ui:
    fontFamily: "Work Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Work Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0px
  label-upper:
    fontFamily: "Work Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.27
    letterSpacing: 0.45px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 60px
  3xl: 80px
  4xl: 120px

rounded:
  none: 0px
  sm: 5px
  md: 10px
  lg: 24px
  pill: 30px

components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.on-background}"
    textColor: "{colors.secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.secondary}"
  button-secondary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 10px
    borderColor: "{colors.primary}"
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 10px
  card:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.primary}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.focus-ring}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-pink:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
---

# Nguyen Coffee Supply Design System

## Overview

Nguyen Coffee Supply's website is a provocation dressed as a coffee shop — a jet-black canvas (`{colors.background}`) lit up by a single, electric cobalt blue (`{colors.primary}`) and punctuated by a hot-pink accent (`{colors.secondary}`) that reads like a neon sign in a Saigon alley. The visual premise is deliberately confrontational for the specialty-coffee category: while most roasters default to craft-earth aesthetics, natural textures, and serif-heavy restraint, Nguyen Coffee Supply leans hard into Vietnamese American boldness, treating the brand as a cultural statement as much as a product. The result feels closer to streetwear or a music-festival poster than a third-wave café — and that contrast is entirely intentional.

The typographic engine is Bebas Neue, a condensed geometric display face that runs UPPERCASE through every headline from 28px to 70px. It's a confident workhorse — blocky, tight, impossible to ignore — and it carries the brand's defiant tone by itself. Work Sans handles all body copy, navigation, and button labels with disciplined neutrality, providing the horizontal breathing room that the compressed display faces deliberately deny. The pairing is asymmetric in the best way: one face shouts, the other simply states.

What elevates Nguyen Coffee Supply from "dark theme with blue" into a genuine system is the restraint with which cobalt blue is deployed. `{colors.primary}` isn't just a color — it's the brand's claim on Vietnamese heritage, specifically the Phin filter blue and the blue of Vietnamese ceramic tiles. It lands on borders, call-to-action outlines, input fields, nav headers, and the logo wordmark simultaneously. The hot-pink `{colors.secondary}` is used with even more discipline — only primary "Add to cart" and key promotional CTAs — keeping it energetic rather than routine.

**Key Characteristics:**
- Black canvas (`{colors.background}`) with zero warm neutrals — the dark is deliberate, not incidental
- Cobalt blue (`{colors.primary}`) as a heritage marker: logo, nav, borders, form fields, and primary surfaces
- Hot pink (`{colors.secondary}`) as the action signal — reserved exclusively for primary CTAs and key callouts
- Bebas Neue UPPERCASE for all display — condensed, weight 700, locked to 1.0 line-height on headlines
- Work Sans at 400/500 for body, nav links, button labels — neutral and un-flashy by design
- Light blue (`{colors.primary-container}`) as a tint for muted text, secondary labels, and link hover states
- 30px pill radius on every button and input — nothing sharp touches an interactive element
- 10px radius on cards, sections, and image containers — the system's mid-tier surface radius
- Minimal shadow usage — two soft shadows appear sparingly (`rgba(0,0,0,0.2)` drops at 3px), otherwise flat
- `infiniteLoop` marquee animation (50s, linear) for brand logo strip and promotional text

## Colors

### Primary
- **Brand Black** (`{colors.background}`): The page canvas — pure ink black. Sets the nightlife-poster tone that makes cobalt and pink pop.
- **Cobalt Blue** (`{colors.primary}`): The brand's heritage color — deployed on the logo, header bar, nav links, input borders, and CTA outlines. Every structural element that defines "Nguyen" lives in cobalt.
- **White** (`{colors.ink}`): All body text, headline text, icon fills on black surfaces. Pure white, never off-white.

### Brand Accent
- **Hot Pink** (`{colors.secondary}`): The primary CTA color — "Add to Cart", "Shop Now" fill buttons. Used sparingly so it never dilutes its punch. Also appears as an outline button stroke for secondary actions.
- **Light Blue** (`{colors.primary-container}`): A desaturated cobalt tint applied to muted copy, secondary labels, and link-hover affordance states. Bridges white ink and cobalt surface without jarring contrast.

### Text States
- **Text Hover** (`{colors.text-hover}`): Deep cobalt intensified for interactive link hover — `#003cf0` over `{colors.primary}`.
- **Focus Ring** (`{colors.focus-ring}`): Same cobalt as `{colors.primary}` applied as a 0.5px solid outline ring on focused inputs.
- **Border** (`{colors.border}`): Cobalt blue — buttons, inputs, section dividers all share this color. Chrome and brand color are the same in this system.
- **Border Muted** (`{colors.border-muted}`): Near-black `#1a1a1a` for subtle inner-section containers on the black canvas.
- **Shadow** (`{colors.shadow-soft}`): Black — the two light shadows (`rgba(0,0,0,0.2)` and `rgba(0,0,0,0.5)`) are flattened opaque approximations for token reference.

### Surface Hierarchy
- **Surface** (`{colors.surface}`): The cobalt panel — used for the sticky header bar, feature callout sections, and branded full-bleed highlights.
- **Surface Elevated** (`{colors.surface-elevated}`): Near-black `#0e0e0e` for product cards and content containers that need to lift off the main canvas without going full cobalt.

## Typography

### Font Family
- **Display**: `Bebas Neue` — condensed geometric all-caps display face. Commercial font; Google Fonts carries it. Fallback: `Arial Narrow`, then `Arial`.
- **Body / UI**: `Work Sans` — a clean humanist grotesque designed for legibility at mid and small sizes. Google Fonts. Fallback: `Helvetica Neue`, `Arial`.
- **No monospace**: the system has no code or mono typeface.
- **OpenType**: No special font-feature-settings detected. Bebas Neue relies entirely on its condensed metrics; letter-spacing is applied at the semantic level (0.8px on nav/label tokens).

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Main hero headlines — "SPECIALTY COFFEE", "ORIGINS", 70px UPPERCASE |
| `display` | Section openers, collection titles, 62px UPPERCASE |
| `heading-section` | Sub-section anchors, product category titles, 42px UPPERCASE |
| `heading-sub` | Card titles, editorial sub-heads, Work Sans 24px |
| `body-large` | Lead paragraphs, intro copy, 21px Work Sans 500 |
| `body` | Standard reading text, product descriptions, 18px Work Sans 400 |
| `nav-link` | Navigation items, 16px uppercase with 0.8px tracking |
| `button-ui` | CTA labels, 16px Work Sans 500 |
| `label-upper` | Badge labels, form field labels, 15px uppercase 0.45px tracking |
| `caption` | Meta text, footer, fine print, 12px Work Sans 400 |

### Principles
- Bebas Neue is display-only — it runs from 28px to 70px, always UPPERCASE, always weight 700. Work Sans handles everything at 24px and below in the prose layer.
- Line-height 1.0 on all Bebas Neue headlines — the compressed tracking and tight leading stack into dense horizontal bands that read like protest signage.
- Work Sans gets 0.8px letter-spacing on nav links and labels — just enough to open up the caps layer without disrupting the workhorse feel.
- Weight contrast is narrow: Bebas Neue only ships one effective weight (bold); Work Sans uses 400 for reading, 500 for emphasis and buttons, 600–700 only for the most prominent nav/button moments.
- No display serifs anywhere — the system is entirely sans-serif across both typefaces.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Nguyen Coffee Supply runs on a 4/8/16 ladder for micro-spacing and 20/40/60/80px for section breathing. The dominant card-padding unit is 24px. Section-to-section gaps open to 60–80px on desktop, compressed to 40px on tablet and 24px on mobile. Despite the dense dark aesthetic, section spacing is actually generous — blackness creates its own perceived tightness even with adequate padding.

### Grid & Container
- Max content width: ~1240px (maps to the dembrandt breakpoint ceiling)
- Product grids: 2-column on mobile, 3–4 column on desktop
- Hero: full-bleed black panel with display type centered, cobalt accent panels flanking product photography
- Logo scroll strip: infinite marquee at 50s (all brand partner logos on cobalt background, white fill)
- Footer: full-bleed black with cobalt section borders, white body text

### Whitespace Philosophy
- The black canvas does the heavy lifting — generous padding reads as restraint because dark space feels natural
- Display type is tight (Bebas Neue line-height 1.0), so section gaps of 60–80px feel earned
- The cobalt brand-logo marquee strip acts as a visual floor between hero and content — a low-bandwidth separator that costs no whitespace

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, black fill | Page canvas, most content sections |
| Surface Lift (Level 1) | `rgba(0,0,0,0.2) 0px 3px 3px 0px` | Product cards on hover, floating nav elements |
| Card Shadow (Level 2) | `rgba(0,0,0,0.5) 0px 1px 4px 0px` | Modal overlays, popups, quick-buy panels |
| Focus Ring | `{colors.focus-ring} solid 0.5px` | Input and button focus states |
| Color Block | Cobalt panel swap — black to `{colors.surface}` | Section-level "elevation" via color, not shadow |

**Shadow Philosophy**: Nguyen Coffee Supply is functionally flat. The two shadow values extracted (a 3px 0.2 drop and a 1px 4px 0.5 drop) appear only on transient UI — hover cards and modals. Neither is atmospheric or designed to express altitude; they're utility shadows that prevent floating elements from disappearing into the black canvas. The primary depth tool is the cobalt-to-black surface contrast, and that contrast alone does more work than any shadow stack.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, hero panels, flush dividers |
| `sm` | 5px | Badges, small metadata chips |
| `md` | 10px | Product image frames, content cards, section containers, iframes |
| `lg` | 24px | Button-image compound components |
| `pill` | 30px | All buttons, all input fields — the universal interactive radius |

The system is binary in practice: `{rounded.md}` (10px) for containers and `{rounded.pill}` (30px) for anything interactive. The 10px radius makes content modules feel edited and intentional on a full-black canvas. The 30px pill on buttons and inputs is consistent enough that it reads as a brand signature — the cobalt `{colors.primary}` border on a 30px pill input is unmistakably Nguyen.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — Hot pink fill (`{colors.secondary}`), white label, 30px pill. Used for "Add to Cart" and featured promotional CTAs. The "do it now" color in the system.
- **`button-secondary`** — Black fill with hot pink 1px outline, hot pink text. For read-more-style secondary actions — "READ OUR STORY", tertiary product options.
- **`button-ghost`** — Black fill with cobalt blue 1px outline, cobalt text. For form-adjacent CTAs ("SIGN UP"), informational paths, email subscribe. Hover swaps to filled cobalt.

### Cards

Product cards sit on `{colors.surface-elevated}` (`#0e0e0e`) — a barely-lifted dark surface that separates them from the canvas without abandoning the dark aesthetic. Product photography gets `{rounded.md}` (10px) corners; no white card chrome or drop shadows. Title in Bebas Neue 28–33px at line-height 1.0; price and meta in Work Sans 16px.

### Inputs

Pill-radius inputs (`{rounded.pill}`, 30px) with cobalt `{colors.primary}` border, `0px 20px` horizontal padding, transparent background. On focus: a 0.5px solid cobalt outline ring appears. Placeholder text in cobalt blue — the same `{colors.primary}` as the border — creating a monochromatic field that dissolves until interaction.

### Badges / Tags

Small 5px-radius chips in cobalt (`{components.badge}`) or hot pink (`{components.badge-pink}`). Label text in Work Sans 12px uppercase with 0.45px tracking. Used for product origin labels ("ROBUSTA", "SINGLE ORIGIN"), availability signals, and collection tags.

### Navigation

- Header bar: full-bleed cobalt `{colors.surface}` background, white wordmark centered
- Nav links: Work Sans 16px uppercase 0.8px tracking (`{typography.nav-link}`), white text on cobalt
- Hover: deep cobalt intensification (`{colors.text-hover}` `#003cf0`) — a subtle but legible shift
- Sticky: header pins at the top; the cobalt bar forms a persistent brand beacon against the black canvas below

## Do's and Don'ts

### Do
- Use pure black `{colors.background}` as the page canvas — even near-blacks like `#111` will make cobalt look dull
- Deploy cobalt `{colors.primary}` for all structural chrome: nav bar, input borders, CTA outlines, logo — let it be the brand signal
- Reserve hot pink `{colors.secondary}` strictly for the primary action — "Add to Cart", hero CTA. One pink per screen maximum
- Set all Bebas Neue display at weight 700, line-height 1.0, UPPERCASE — the condensed lockup is the identity
- Apply `{rounded.pill}` (30px) to every button and input — never a sharp-cornered interactive element
- Use `{rounded.md}` (10px) on all image containers and content cards — consistent mid-radius throughout
- Use Work Sans for body, labels, and UI at 400 or 500 — Bebas Neue above 24px, Work Sans at 24px and below
- Apply letter-spacing 0.45–0.8px on uppercase Work Sans labels and nav links to open up the caps layer
- Use light blue `{colors.primary-container}` for muted copy — a cobalt tint rather than a gray

### Don't
- Don't soften the canvas to charcoal or near-black — the full black `{colors.background}` is the baseline
- Don't use Bebas Neue below 24px — the condensed geometric breaks down at caption scale
- Don't add hot pink to nav links, badges, or non-CTA elements — frequency kills the accent signal
- Don't introduce mid-range border radius (12–20px) — the system is 10px for containers or 30px for interactive
- Don't use white borders on black — cobalt `{colors.primary}` is the only legitimate border color
- Don't use gray text — muted copy gets cobalt-tint `{colors.primary-container}`, not a gray value
- Don't use serif typefaces — the system is entirely sans-serif; no editorial serif exceptions
- Don't add more than two drop shadows per screen — this system is flat, and shadows are emergency tools only
- Don't use the cobalt blue surface `{colors.surface}` for more than one section panel per scroll — repeated cobalt panels dilute the nav-bar's identity anchor
- Don't apply gradient fills to surfaces — every color is solid. Photography carries all tonal variation.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <564px | Single column, hero Bebas Neue drops to 42–48px, stacked CTAs |
| Mobile | 564–750px | Single column, 50–62px display, product cards 2-wide |
| Tablet | 750–1024px | 2–3 column product grid, full nav, 62–70px display |
| Desktop | 1024–1240px | 3–4 column grid, full hero scale, marquee strip active |
| Large Desktop | >1240px | Maximum scale, 70px hero, wide section padding |

### Touch Targets
- Primary pink pill CTAs: 44px minimum tap height from 10px vertical padding
- Nav links in cobalt header: full-row touch targets, 16px padding, link-wide tap zone
- Input pill fields: 40–44px tall via 10px vertical padding, full-width on mobile
- Product card "Add to Cart": stacks below product image on mobile, full-width pill button

### Collapsing Strategy
- **Nav**: Cobalt header bar persists; links collapse to hamburger on mobile. Hamburger icon in white, menu panel in black.
- **Display type**: 70px → 62px → 42px → 32px Bebas Neue; line-height 1.0 maintained throughout
- **Product grids**: 4-col → 3-col → 2-col → 1-col cascade; card `{rounded.md}` held at all breakpoints
- **Marquee strip**: logos compress but scroll continues — the infinite brand parade never pauses
- **Section spacing**: 80px desktop → 60px tablet → 40px mobile — compresses but retains breathing room on dark canvas

### Image Behavior
- Product photography fills available card width at 10px radius
- Hero imagery is full-bleed; crops to center-focused portrait on mobile
- No art-direction swap needed — black canvas adapts cleanly to any viewport

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (`#000000`)
- Text / Headlines: `{colors.ink}` (`#ffffff`)
- Brand Blue / Chrome: `{colors.primary}` (`#0032c8`)
- Action Pink / CTA: `{colors.secondary}` (`#ff5787`)
- Muted Text: `{colors.primary-container}` (`#86a4ff`)
- Border / Outline: `{colors.border}` (`#0032c8`)
- Surface Panel: `{colors.surface}` (`#0032c8`)
- Card Background: `{colors.surface-elevated}` (`#0e0e0e`)

### Example Component Prompts

- "Create a hero section on pure black (`{colors.background}`). Headline: 70px Bebas Neue weight 700, UPPERCASE, line-height 1.0, white (`{colors.ink}`). Sub-head: 21px Work Sans 500 in light blue (`{colors.primary-container}`) at line-height 1.4. Primary CTA: hot pink (`{colors.secondary}`) fill, white text, 16px Work Sans 500, 30px border-radius (`{rounded.pill}`), 10px 20px padding."

- "Build a product card on near-black (`{colors.surface-elevated}`, `#0e0e0e`) with 10px border-radius (`{rounded.md}`), 24px padding. Product image at `{rounded.md}`. Title: 33px Bebas Neue UPPERCASE white, line-height 1.0. Price: 18px Work Sans 400 white, line-height 1.4. CTA: pink pill button using `{components.button-primary}`."

- "Design a cobalt brand panel (`{colors.surface}`) full-bleed. Headline in 62px Bebas Neue UPPERCASE white, line-height 1.0. Body copy: 18px Work Sans 400 white, line-height 1.4. Ghost CTA: `{components.button-ghost}` — black fill, cobalt outline `{colors.border}`, cobalt text, 30px pill, 10px 20px padding."

- "Create an email signup field: pill input (`{rounded.pill}`, 30px radius), transparent background, cobalt border (`{colors.primary}` 1px solid), cobalt placeholder text, 16px Work Sans 400, 10px 20px padding. Adjacent 'SIGN UP' button as `{components.button-ghost}` on focus swap to filled cobalt `{components.button-ghost-hover}`."

- "Design a navigation header: full-width cobalt bar (`{colors.surface}`), 55px tall, white wordmark centered. Nav links: Work Sans 16px 500 UPPERCASE white, 0.8px letter-spacing (`{typography.nav-link}`). Cart and hamburger icons in white. Sticky pinned to viewport top. On mobile: links collapse to hamburger — full-screen black panel overlay."

- "Build a collection tag badge: cobalt fill (`{components.badge}`), 5px radius (`{rounded.sm}`), 4px 8px padding, 12px Work Sans 400 white uppercase, 0.45px letter-spacing. For promotional or sold-out states, swap to pink fill using `{components.badge-pink}`."

### Iteration Guide

1. Always start with `{colors.background}` pure black as the canvas — the entire system assumes dark context
2. Apply `{colors.primary}` cobalt to every structural chrome element first (nav bar, borders, outlines) before reaching for other colors
3. Use `{colors.secondary}` hot pink for exactly one primary CTA per viewport — ration it to preserve punch
4. Set Bebas Neue at weight 700, UPPERCASE, line-height 1.0 — any deviation from this signature erases brand voice
5. Work Sans at 400 for reading, 500 for emphasis — never weight above 600 in body or UI text
6. Pill radius (`{rounded.pill}`, 30px) on every button and input — `{rounded.md}` (10px) on all containers and images
7. Muted text gets cobalt tint `{colors.primary-container}` (`#86a4ff`) rather than any gray value
8. Shadows are emergency tools — only for hover cards and modal overlays, never decorative

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Nguyen Coffee Supply. Brand names and trademarks belong to their respective owners.