# Abpos Design System

> High-contrast monochrome foundation punctuated by deep violet and electric blue gradients, anchored by geometric Poppins headlines.

**Source:** https://abpos.com | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Abpos utilizes a "monochrome plus" strategy where a stark white (#ffffff) and dark charcoal (#212529) foundation supports a vibrant secondary palette of purples and blues. The system relies heavily on **Poppins** for all typographic hierarchy, using weight 600 for display and 400-500 for body. Visual depth is achieved through a mix of flat surfaces, 16px rounded cards, and aggressive drop shadows (e.g., `5px 5px 10px` in gray). The brand uses high-saturation accents like #674bff and #4672ff to denote interactivity and section transitions.

## Signature DNA
1. **The 16px Radius Standard:** Almost every container, from feature cards to content blocks, utilizes a consistent 16px corner radius, creating a soft-tech aesthetic.
2. **Achromatic Typography:** Despite the colorful accents, 100% of functional text is either pure white (#ffffff) or dark gray (#212529), ensuring high legibility against saturated backgrounds.
3. **Shadow-Driven Depth:** Unlike flat SaaS systems, Abpos uses explicit, offset shadows (5px 5px) to lift cards off the canvas, visible on the main feature grids.

## Family Map
Not captured in source (no sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Background, text on dark, button text | 89 | 1 | `--bs-white` |
| `{color.dark}` | `#212529` | Primary body text | 47 | 1 | `--bs-body-color` |
| `{color.black}` | `#000000` | Section backgrounds, headers | 9 | 1 | `--PrimaryColor6` |
| `{color.gray-dark}` | `#404040` | Secondary text | 5 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary-vivid}` | `#674bff` | Surface background, primary accent | 4 | 1 | `--PrimaryColor1` |
| `{color.blue-electric}` | `#4672ff` | CTA buttons, accent surfaces | 3 | 1 | `--PrimaryColor4` |
| `{color.purple-deep}` | `#3b2a62` | Decorative text, section accents | 4 | 0.6 | Computed |
| `{color.navy-dark}` | `#080a3b` | Footer/Hero backgrounds (decorative) | 2 | 1 | `--PrimaryColor5` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 400, 500, 600 | Display, Heading, UI | Poppins (Google Fonts) | OFL |
| system-ui | 400, 500 | Body, metadata | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 40px | 48px | normal | 600 | Section Hero | `h2.section3-h2` |
| `{text.h2}` | 32px | 38.4px | normal | 600 | Section Headers | `h2.section8-h2` |
| `{text.h3}` | 26px | 30.72px | normal | 500 | Feature Titles | `h3.section3-h3` |
| `{text.p-lead}` | 21px | 31.2px | normal | 600 | Intro Paragraphs | `p.section3-p` |
| `{text.body-lg}` | 19px | 28.8px | normal | 500 | Feature Body | `p.section2-item-p` |
| `{text.body}` | 16px | 24px | normal | 400 | Default Copy | `div.section2-item` |
| `{text.body-bold}` | 16px | 24px | normal | 600 | Emphasized Body | `p.section9-item-p` |
| `{text.link}` | 16px | 24px | normal | 400 | Nav/Footer Links | `a.section1-a` |

### Principles
1. **Heading Weight Consistency:** All major section headings (H2) must use weight 600 Poppins.
2. **Line Height Ratio:** Body copy maintains a strict 1.5x ratio (16px/24px) for readability.
3. **Achromatic Priority:** Text color is never a brand accent; it is strictly white or dark gray.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 16px | 12 |
| `{space.md}` | 24px | 13 |
| `{space.lg}` | 32px | 13 |
| `{space.xl}` | 48px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Page sections, sharp containers | 74 occurrences |
| `{radius.card}` | 16px | Feature cards, pricing, images | 44 occurrences |
| `{radius.panel}` | 80px | Large pill-shaped accents | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default surfaces | Card (Tier 2) |
| `{shadow.standard}` | `rgb(136, 136, 136) 5px 5px 10px 0px` | Feature grid cards | Card (Tier 3) |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.25) 0px 10px 30px 0px` | Floating UI elements | Card (Tier 2) |

## Components
### Tier 1: Foundational
#### Surface
**Role:** Base container for section content.
**Pages observed:** https://abpos.com
**Spec:** Background: transparent / Text: #212529 / Radius: 16px / Padding: 0px
**States observed:** Default: captured

### Tier 2: Patterns
#### Glass Card
**Role:** Semi-transparent overlay cards for dark backgrounds.
**Pages observed:** https://abpos.com
**Spec:** Background: rgba(255, 255, 255, 0.15) / Text: #ffffff / Border: 1px rgba(255, 255, 255, 0.3) / Radius: 16px / Padding: 25.6px 16px
**States observed:** Default: captured

#### Shadow Card
**Role:** Elevated content containers on light backgrounds.
**Pages observed:** https://abpos.com
**Spec:** Background: rgba(255, 255, 255, 0.05) / Text: #212529 / Shadow: rgba(0, 0, 0, 0.25) 0px 10px 30px 0px / Radius: 16px
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Accent Pill Card
**Role:** High-visibility feature highlights.
**Pages observed:** https://abpos.com
**Spec:** Background: #4672ff / Text: #ffffff / Radius: 80px / Padding: 8px 16px
**States observed:** Default: captured

#### Offset Shadow Card
**Role:** Legacy-style feature cards with hard gray shadows.
**Pages observed:** https://abpos.com
**Spec:** Background: transparent / Text: #212529 / Shadow: rgb(136, 136, 136) 5px 5px 10px 0px / Radius: 16px / Padding: 24px 19.2px
**States observed:** Default: captured

#### Interactive Card
**Role:** Hover-ready content blocks.
**Pages observed:** https://abpos.com
**Spec:** Background: transparent / Border: 1px rgba(255, 255, 255, 0.25) / Shadow: rgba(0, 0, 0, 0.25) 0px 10px 25px 0px / Radius: 16px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1320px (standard Bootstrap container) |
| Gutter | 24px |
| Section Padding | 80px - 100px vertical |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | <768px | Stacked cards, font-size reduction to 85% |
| Desktop | 1440px | Multi-column grids (3-up or 4-up) |

## Imagery & decoration
Abpos uses high-quality photography of people in business settings (restaurants, retail) often treated with soft focus or placed within 16px rounded containers. Icons are thin-stroke (2px) and often enclosed in circular or square badges with brand accent backgrounds.

## Do's
- Use Poppins 600 for all H2 headers.
- Maintain a 16px border radius on all content cards.
- Use #ffffff text when the background is any brand accent color.
- Apply `5px 5px 10px` shadows to cards on white backgrounds.
- Keep body copy at 16px with 24px line height.

## Don'ts
- **Wrong:** Using #674bff for body text. **Right:** Use #212529. **Reason:** Brand accents are for surfaces and CTAs, not long-form reading.
- **Wrong:** Mixing sharp corners with rounded cards. **Right:** Use 16px radius consistently. **Reason:** Visual cohesion.
- **Wrong:** Using sub-brand colors (like orange/yellow tokens) as the main page background. **Right:** Use #ffffff or #000000. **Reason:** Parent brand is monochrome-dominant.
- Do not use shadows on "Glass Card" variants.
- Do not exceed 40px for display typography.

## Similar brands
- Stripe (for typography and card layouts)
- Square (for business-centric monochrome photography)
- Toast (for industry-specific vertical layouts)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --primary: #000000;
  --accent-blue: #4672ff;
  --accent-purple: #674bff;
  --text-main: #212529;
  --radius-card: 16px;
  --shadow-standard: 5px 5px 10px 0px rgb(136, 136, 136);
  --font-display: 'Poppins', sans-serif;
}
```

## Agent prompt examples
- "Generate a feature card using a 16px border radius, #ffffff background, and a 5px 5px gray drop shadow, with Poppins 600 for the title."
- "Create a section hero with a #000000 background, white Poppins text at 40px, and a primary CTA button in #4672ff."
- "Design a 3-column grid of cards using rgba(255, 255, 255, 0.15) background and 1px white borders."

## Known gaps
- Hover states for buttons were not explicitly captured in the computed style array.
- Mobile-specific breakpoint tokens (e.g., 390px) were observed but not declared in the CSS variables.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Homepage | https://abpos.com | 1440px | 2026-06-06 |
| Mobile View | https://abpos.com | 390px | 2026-06-06 |