Samsungapps Brand Design System Deep Dive

1. Brand Overview

Samsungapps here is not the consumer-facing Galaxy Store landing page—it’s the seller portal. This is the cockpit for app developers and content providers who publish into Samsung’s ecosystem. The audience is technical but not purely engineers—product managers, indie developers, maybe QA folks. The design is functional. Little fluff. It’s built to get you logged in, get your data, manage your listings.

The vibe? Corporate minimalism with a tech undertone. There’s a sense of "this is a tool, not a showroom." The brand inherits some of Samsung’s broader design DNA, but here it’s stripped down. No cinematic imagery. No big gradients. Blue is still present (Samsung’s signature), but it’s a muted, utilitarian blue (#2a5e9c, #3c87e7) rather than the full-gloss Galaxy marketing hue. Neutrals dominate: greys from #666666 down to #dddddd, plenty of white (#ffffff), and some very light greys (#f6f6f7) for background separation.

The typography mix is interesting. SamsungOne (custom corporate font) is in play for headings and some links, but Verdana—yes, Verdana—is used heavily for buttons, captions, and certain headings. This is unusual: Verdana is a system font, wide and utilitarian. It screams “UI text from the early 2000s,” but it’s readable and consistent across environments. This suggests the seller portal is prioritizing reliability over brand flourish.

Spacing is on an 8px grid, but with some odd values like 3px and 5px sprinkled in—these are probably legacy quirks from old table-based layouts or pixel-perfect tweaks.

Overall, the philosophy is: functional, minimal, low-risk. The design choices minimize cross-browser rendering issues, keep text legible, and make sure nothing distracts from task completion. If you’re building components in this system, you need to respect that utilitarian DNA. No wild animations. No half-opacity pastel overlays. This is a workhorse UI.

2. Color System

2.1 Primary Colors

Samsung’s corporate blue is the hero here, but in this portal it’s not the only blue. We see:

• Primary CTA Blue: #2a5e9c (rgb(42, 94, 156)) — darker, serious, stable. Good for trust and authority.
• Secondary Accent Blue: #3c87e7 (rgb(60, 135, 231)) — brighter, used sparingly for highlights or secondary buttons.
• Button Blue in components: rgb(40, 134, 211) — slightly different from palette blues, tuned for button contrast.

These blues are cooler and more subdued than, say, Google Play’s green or Apple’s pure black/white. They convey professionalism and align with Samsung’s tech brand. Compared to competitors, Samsungapps’ blues feel less playful than Microsoft’s Fluent UI (#0078D4) and more muted than Facebook’s #1877F2.

2.2 Complete Palette

Here’s every color extracted, mapped with role and usage:

2.3 Color Relationships

Contrast is decent. Primary blue (#2a5e9c) with white text passes WCAG AA easily. Dark gray (#666666) on white background is borderline for small text—contrast ratio around 4.5:1, so it’s just at AA compliance for normal text.

The palette doesn’t show a dedicated dark mode—these colors assume a light background. Transparent blacks are used for overlays and pagination states, not for inversion.

2.4 Usage Guide

Works well:

• Primary CTA Blue (#2a5e9c) with white text — high contrast, brand-aligned.
• Bright blue (#3c87e7) with dark gray text — subtle accent without overpowering.
• Orange (#f4804f) as status color against light gray backgrounds — draws attention.

Avoid:

• Orange (#f4804f) on blue backgrounds — poor contrast, clashes.
• Light gray (#dddddd) text on white — too low contrast.
• Using multiple blues in one component — pick one for clarity.

3. Typography

3.1 Font Families

Two main players:

• SamsungOne — custom corporate font. No fallbacks listed. Used for headings and some links.
• Verdana, arial — system font stack. Used for buttons, captions, some headings. Verdana’s wide letterforms and pixel-clarity make it safe for UI text in a portal setting.

No Google Fonts or Adobe Fonts here—everything is either proprietary (SamsungOne) or system-safe.

3.2 Type Scale

3.3 Hierarchy

Large SamsungOne at 40px is rare—probably only for portal titles. 22px and 18px sizes are more common for section headings. Verdana in bold weights shows up in smaller headings and UI labels. The variety of sizes (down to 11px) indicates dense data tables and compact UI elements. Line heights are tight—1.0 for small text—keeping vertical space minimal.

4. Spacing & Layout

4.1 Spacing Scale

Base grid is 8px, but many values don’t fit neatly—legacy quirks.

4.2 Layout

No explicit breakpoints extracted—likely fixed-width containers in desktop view. Spacing values suggest tight component padding (3px–15px) and larger section gaps (40px, 60px).

5. Visual Elements

• Border Radius: Only 2px, 3px, and 100% (full circle) are used. 2px for small buttons, 3px for pagination, 100% for avatars/icons.
• Shadows: Minimal use—only rgba(0, 0, 0, 0.25) 0px 5px 5px 0px in 2 places. Mostly flat design relying on borders.
• Borders: Strong light blue 3px solid for selection, thin 1px gray borders for dividers. Some unusual multi-side borders (6px 1px 1px deep blue).

6. Components

6.1 Buttons

Primary (sing_btn):

• Bg: rgb(40, 134, 211)
• Text: rgb(246, 246, 247)
• Padding: 4px 15px 0px
• Radius: 2px
• Border: none
• Font: Verdana 13px, weight 400

Pagination (btn_pagination):

• Bg: rgba(0, 0, 0, 0.2)
• Text: #666666
• Radius: 3px
• No padding
• Font size: 0px (!) — likely icon-only

Pagination active (btn_pagination now_item):

• Bg: rgba(0, 0, 0, 0.6) or rgb(50, 50, 50)
• Text: #666666
• Radius: 3px or 0px — inconsistent

Secondary small (small_bnr_prev):

• Bg: rgb(244, 245, 247)
• Text: #666666
• Border: 1px solid #999999
• Radius: 0px

6.2 Links

Three styles:

• Dark gray (#666666) — standard UI links, no underline.
• Light gray (#aaaaaa) — disabled or secondary.
• White (#f6f6f7) — on dark bg.

No hover styles extracted—likely minimal change (underline or color shift).

6.3 Forms

No explicit input styles in data—probably standard HTML inputs with custom borders.

6.4 Cards

No dedicated card component—panels use light gray backgrounds (#f6f6f7) and thin borders.

7. Design Tokens

:root {
  /* Colors */
  --color-neutral-dark-gray: #666666;
  --color-transparent-black-20: rgba(0,0,0,0.2);
  --color-charcoal-gray: #4d4c4c;
  --color-primary-dark-blue: #2a5e9c;
  --color-bright-blue: #3c87e7;
  --color-orange-accent: #f4804f;
  --color-white: #ffffff;
  --color-neutral-mid-gray: #aaaaaa;
  --color-light-gray: #dddddd;
  --color-lightest-gray: #f6f6f7;
  --color-mid-gray: #999999;
  --color-dark-gray: #424242;
  --color-transparent-black-10: rgba(0,0,0,0.1);
  --color-light-blue-border: rgb(128, 204, 255);
  --color-deep-blue-border: rgb(67, 83, 179);
  --color-divider-gray: #dedede;
  --color-button-blue: rgb(40, 134, 211);
  --color-pagination-gray: #666666;
  --color-button-gray: rgb(244, 245, 247);

  /* Typography */
  --font-samsungone: "SamsungOne";
  --font-verdana: "Verdana", "arial";

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-13: 13px;
  --space-15: 15px;
  --space-18: 18px;
  --space-19: 19px;
  --space-20: 20px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-43: 43px;
  --space-60: 60px;
  --space-80: 80px;
  --space-110: 110px;
  --space-117: 117px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.25) 0px 5px 5px 0px;
}

8. AI Coding Assistant Prompt

# Samsungapps Design System Specification

You are a Samsungapps design expert. Build UIs matching their visual language exactly.

## Brand Context
Samsungapps seller portal is a functional, minimal interface for app publishers. It prioritizes clarity, reliability, and low visual noise. Color and typography are utilitarian, with subtle brand cues from Samsung's corporate design.

## Color Palette
- Neutral Dark Gray: #666666 — Body text, inactive icons
- Transparent Black 20%: rgba(0,0,0,0.2) — Overlays, pagination background
- Charcoal Gray: #4d4c4c — Secondary text
- Primary Dark Blue: #2a5e9c — Primary links, headings
- Bright Blue: #3c87e7 — Secondary buttons, highlights
- Orange Accent: #f4804f — Warnings, status indicators
- Pure White: #ffffff — Backgrounds, text on dark bg
- Neutral Mid Gray: #aaaaaa — Disabled text, secondary icons
- Light Gray: #dddddd — Form backgrounds, dividers
- Lightest Gray: #f6f6f7 — Panel backgrounds
- Mid Gray: #999999 — Secondary text
- Dark Gray: #424242 — Strong secondary text
- Transparent Black 10%: rgba(0,0,0,0.1) — Hover/focus overlays
- Light Blue Border: rgb(128, 204, 255) — Selection outlines
- Deep Blue Border: rgb(67, 83, 179) — Emphasis borders
- Divider Gray: #dedede — Table dividers
- Button Blue: rgb(40, 134, 211) — Primary button background
- Pagination Gray: #666666 — Pagination icons
- Button Gray: rgb(244, 245, 247) — Secondary button background

## Typography
Fonts:
- Headings: "SamsungOne"
- Body/UI: "Verdana", "arial"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 40px | 600 | 1.20 | Page titles |
| H2 | 22px | 600 | 1.36 | Section headings |
| H3 | 18px | 700 | — | Subheadings |
| Body-Small | 16px | 300 | 1.25 | Body text |
| Link | 16px | 300 | 1.50 | Navigation links |
| Subheading | 15px | 700 | 1.00 | UI labels |
| Button | 13px | 400 | 1.00 | Button text |
| Caption-Bold | 13px | 700 | — | Strong captions |
| Link-Small | 12px | 400 | — | Secondary links |
| Caption | 12px | 400 | — | Table captions |
| Link-XSmall | 11px | 400 | — | Inline links |
| Caption-XSmall | 11px | 400 | — | Compact captions |

## Spacing & Grid
Base: 8px grid, but includes custom values.
Scale: 2px, 3px, 4px, 5px, 7px, 8px, 10px, 13px, 15px, 18px, 19px, 20px, 30px, 32px, 40px, 43px, 60px, 80px, 110px, 117px.
Component mapping:
- Button padding: 4px vertical, 15px horizontal
- Card padding: 15px–20px
- Section gaps: 40px or 60px

## Border Radius
- sm: 2px — small buttons
- md: 3px — pagination
- full: 100% — avatars/icons

## Shadows & Depth
Mostly flat design. One shadow: rgba(0,0,0,0.25) 0px 5px 5px.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: rgb(40, 134, 211);
  color: #f6f6f7;
  padding: 4px 15px 0;
  border-radius: 2px;
  font-family: Verdana, arial;
  font-size: 13px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Pagination Button
```css
.btn-pagination {
  background: rgba(0,0,0,0.2);
  color: #666666;
  border-radius: 3px;
  border: none;
  font-size: 0;
}
.btn-pagination.active {
  background: rgba(0,0,0,0.6);
}
```

### Secondary Button
```css
.btn-secondary {
  background: rgb(244, 245, 247);
  color: #666666;
  border: 1px solid #999999;
  border-radius: 0;
}
```

## Layout & Responsive Rules
- Fixed-width desktop-first layout
- Section padding: 40px–60px
- No breakpoints in data; assume minimal mobile optimization

## Interaction Rules
- State changes: 150ms ease
- Focus outlines: Use light blue border rgb(128, 204, 255)

## DO
- Use only palette colors
- Keep 8px grid where possible
- Use SamsungOne for headings, Verdana for body/UI
- Maintain tight line heights for compact UI
- Use full-radius only for avatars/icons

## DON'T
- Invent new colors
- Add heavy shadows
- Mix rounded and square corners in same component
- Increase line height for small text beyond 1.0

## Code Examples

### Primary Button
```css
.sing_btn {
  background-color: rgb(40, 134, 211);
  color: #f6f6f7;
  padding: 4px 15px 0;
  border-radius: 2px;
  border: none;
  font-family: Verdana, arial;
  font-size: 13px;
}
```

### Card
```css
.card {
  background-color: #f6f6f7;
  border: 1px solid #dddddd;
  padding: 15px;
  border-radius: 3px;
}
```

### Input
```css
.input {
  border: 1px solid #999999;
  border-radius: 2px;
  padding: 5px;
  font-family: Verdana, arial;
}
.input:focus {
  border-color: rgb(128, 204, 255);
  outline: none;
}
```

9. Summary

TL;DR: Samsungapps seller portal design is functional, minimal, and built for clarity. The color palette leans on subdued blues and greys, typography mixes corporate SamsungOne with utilitarian Verdana, and components are flat, border-driven, with minimal shadows.

Brand Keywords: utilitarian-tech, corporate-minimal, blue-gray, function-first, legacy-safe