Anson Ng LLC — Design System
System

Unified Design System

This page consolidates typography, colors, components, layout, and utilities for Anson Ng LLC™. All future pages inherit this baseline to stay consistent and mobile-friendly.

Typography — IBM Plex Sans

Spec

Body: 12px / 1.85
Headings: letter-spacing 0.06–0.18em
Weights: 400, 500, 600

Use system fallbacks only if IBM Plex is unavailable.

Preview

Regular 400 — reliable, legible body text for long reading.

Medium 500 — balanced for subheads and buttons.

SemiBold 600 — titles, section headers, emphasis.

CSS

body{font-family:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}

Colors — Core Tokens

Click any swatch to copy its value.

Components

Buttons

Primary Default Success Warning Danger

Demo-only buttons are inert: no scroll, no reload.

Badges

System Alpha Restricted

Badges use dashed borders and glass surfaces for consistency.

Cards

Cards use linear-gradient(180deg,var(--glass1),var(--glass2)) plus a subtle border var(--line). Hover raises by 2px with a soft shadow.

Form Controls

We’ll only use this to contact you back.
Send (demo)

Layout & Header

Header Rules

  • Fixed at 54px (50px on small screens), centered title.
  • Title truncates with ellipsis to avoid overflow.
  • Logo uses your hosted PNG; no remote control.

Grid & Spacing

  • Max width: 1040px; side padding: 18px (12px mobile).
  • Sections: 16px vertical rhythm; glass panels for depth.
  • Progress bar on scroll; back-to-top appears after 300px.

Accessibility

  • High contrast text on dark surfaces.
  • Focus styles via border + inner glow.
  • Reduced motion respected (system setting).

Changelog & To-Be-Updated

[Now] Buttons and demo send are inert (no scroll to top). Footer legal expanded with IBM Plex Sans attribution.

[Planned] Component states (active/disabled), table styles, toast/notice banners, and form validation patterns.

↑