Design system / console

A reusable interface kit for dense, trusted, technical products.

Built from the attached Cert Inspector visual direction: dark navy surfaces, cyan active states, mono data readouts, status-first feedback, and crisp panel layouts. Use the same classes for admin dashboards, developer tools, observability screens, compliance portals, or certificate workflows.

Explore components View report pattern Accessible states CSS tokens Responsive

cert.inspector.local

Subject

CNapi.example.internal

IssuerExample Root CA G2

SANsDNS:apiDNS:gateway

Foundation

Color, elevation, spacing, and motion tokens

Semantic tokens power the whole system, so applications can theme once and reuse everywhere.

Core color roles

Canvas
--ds-color-bg-canvas

Surface
--ds-color-surface

Surface 2
--ds-color-surface-2

Border
--ds-color-border

Accent
--ds-color-accent

Text
--ds-color-text

Success
--ds-color-success

Warning
--ds-color-warning

Danger
--ds-color-danger

Token samples

Radius scale

--ds-radius-sm through
                                                    --ds-radius-3xl

rounded

Elevation

--ds-shadow-xs through
                                                    --ds-shadow-lg

layered

Motion

--ds-duration-fast / normal
                                                    / slow

smooth

Spacing

--ds-space-1 through
                                                    --ds-space-24

density aware

Compatibility

--navy, --cyan, --panel,
                                                    --border

legacy-safe

Type scale

Inter for interface, JetBrains Mono for data

The system favors compact, readable UI text with a monospaced layer for identifiers, hashes, logs, and command output.

Headings

.ds-heading-1

Trust center

.ds-heading-2

Certificate inventory

.ds-heading-3

Rotation workflow

.ds-heading-4

Issuer details

.ds-heading-5

Subject alternative names

Body and code

Use body copy for explanatory content, empty states, onboarding, and non-critical descriptions.

Small text supports helper copy, timestamps, metadata, and muted labels.

Inline code looks like openssl x509 -noout -text and keeps technical strings scannable.

GET /v1/certificates/api.example.internal
200 OK
fingerprint: 95:24:CB:71:3A:0E:84:2F
expires_in: 89d

Controls

Buttons, inputs, command bars, and toggles

Core controls share focus rings, hover states, disabled states, and compact density behavior.

Button variants

Forms

Service name Use compact names that match inventory identifiers. Environment

Auto-renew
Request rotation before expiration.

Command bar

CtrlK

Code input

PEM textarea

Feedback

Alerts, banners, tags, progress, skeletons, and empty states

State colors are intentionally strong and readable for operational products where risk status matters.

Banners

System feedback

ACME usage

Compliance score

Risk budget

No risky certificates found in this workspace.

Cards and metrics

Operational dashboards with a console feel

Use stat cards and hover panels to build home pages, monitoring views, or entity detail pages.

Active certs

1,284

+8.4% this month

Expiring soon

37

next 30 days

Revoked

4

needs verification

Automation

92%

ACME enabled

API Gateway

Public TLS certificates for gateway endpoints and regional ingress.

Key Vault

Secrets and private key custody with audit-friendly access states.

Audit Stream

Event feed for issuance, renewal, validation, and revoke actions.

Data display

Tables, tabs, timelines, copy rows, and terminals

Dense components remain legible through muted labels, mono values, clear borders, and active cyan accents.

Certificate inventory

Host	Status	Expires	Owner
`api.example.com`	Valid	89 days	Platform
`checkout.example.com`	Expiring	12 days	Commerce
`legacy.example.net`	Revoked	-	Infra

Timeline

Certificate issued
Issuer validated CSR and completed chain assembly.

Deployed to edge
New artifact reached all regions.

Audit exported
Evidence bundle sent to compliance workspace.

Copy rows

Serial04:18:8A:F2:33:01:CA:7B

SHA-25695:24:CB:71:3A:0E:84:2F:AA:18:10:3E:78:E4

Policy2.23.140.1.2.1

terminal

$ certctl inspect api.example.com
status: valid
issuer: Example Root CA G2
not_after: 2026-09-15T12:00:00Z
san:
  - DNS:api.example.com
  - DNS:gateway.example.com

Application pattern

Dashboard, split-pane, and report layouts

The system includes primitives for app shells, sidebars, split views, and legacy Cert Inspector panes.

Dashboard shell

Split-pane workflow

Input

Output

Decoded metadata appears here.

Compatibility pattern

Cert Inspector report using original class names

Existing classes from the attached HTML still work, while newer .ds-* aliases can be used in larger products.

Subject

Common Namecheckout.example.com

OrganizationExample Commerce Ltd.

CountryHU

Validity

Not beforeTue, 18 Mar 2026 12:00:00 GMT

Not afterTue, 30 Jun 2026 12:00:00 GMT

Renewal SLAAction required

Extensions

Alt names DNS:checkout.example.com DNS:payments.example.com DNS:cart.example.com

Key usageDigital Signature, Key Encipherment

Basic constraintsCA: FALSE

Fingerprints

SHA-25695:24:CB:71:3A:0E:84:2F:AA:18:10:3E:78:E4:BC:40

SHA-14F:92:03:AD:8B:0C:12:44:C9:71

Overlays

Modal, drawer, dropdown, toast, and tooltip examples

Overlay components use the same surface, border, shadow, and focus system as the rest of the kit.

Interactive examples

Dropdown menu