oem.care — Design System

1. Visual Theme & Atmosphere

oem.care presents itself as a premium, minimal healthcare or wellness brand with a distinctly editorial aesthetic. The design philosophy is reduction: near-pure black (#040404) as the canvas, white as the counter-surface, no color accents. Two custom typefaces — Diatype and Tiny — do the heavy lifting. This is not a corporate health site buried in blue gradients and stock photography; it reads more like a boutique fashion or beauty brand that happens to serve a wellness audience. The tone is calm, precise, and slightly austere. Every element earns its space. Decoration is not in the vocabulary.

2. Color Palette & Roles

What’s absent: No hue anywhere. No brand blue, no accent orange, no success green. The entire chromatic vocabulary is black and white with opacity-modulated grays. This is a deliberate rejection of conventional healthcare color conventions (the “medical blue”). The #040404 near-black (rather than pure #000000) for body text adds a microscopic warmth that prevents harshness.

3. Typography Rules

Two custom typefaces anchor the identity:

• Diatype ("diatype", sans-serif) — A neo-grotesque, geometric sans by ABC Dinamo. Primary UI and body typeface. Rational, contemporary, authoritative.
• Tiny ("tiny", sans-serif) — A micro typeface for labels, captions, or decorative fine print. Its presence signals attention to typographic detail at every scale.
• System fallback: ui-sans-serif, system-ui, sans-serif with emoji sets — used where custom fonts haven’t loaded or in utility contexts.

Letter-spacing: Normal throughout. No tracking adjustments — Diatype’s own metrics are considered sufficient. Text transform: None by default.

4. Component Stylings

• Buttons (filled): Black #000000 background, white #fff text. Outline variant uses rgba(0,0,0,0.5) border. Both styles are stark and confident.
• Buttons (outlined): Transparent fill, #00000080 border. Star icon in #000000. Juniper review integration (--junip* variables) uses the same black/white system.
• Form inputs: 16px system font, standard padding. The border-radius and padding weren’t extracted explicitly — expect minimal styling consistent with the brand.
• Announcement overlay: Custom announcements-overlay__item and announcement-dot components suggest a banner/notification system — likely a top bar with minimal styling.
• Header: A header element with defined spacing; sticky or fixed treatment likely given the --vh: 8px variable (viewport-height tracking).

5. Layout Principles

• Base unit: 8px (inferred from standard spacing; --vh: 8px is a JS-injected viewport height unit for mobile Safari fixes).
• Spacing values observed: 5px, 8px, 13px, 15px, 16px, 24px. Tight increments suggesting an 8px grid with 4px half-steps.
• Content width: Not explicitly tokenized — likely a max-width centered container.
• Whitespace philosophy: Luxurious. A brand of this restraint demands air between elements. The color system’s near-invisibility means whitespace carries the entire layout rhythm.

6. Depth & Elevation

• Border: rgba(0, 0, 0, 0.08) — At 8% opacity, card and input borders are barely perceptible, more texture than structure.
• No box-shadows detected. Elevation is non-existent as a concept — surfaces sit flat on the page. The design’s depth comes from contrast between black type and white surface, not light simulation.
• --rc-active-bg: #efefef provides the only elevation-adjacent treatment: a light gray fill for selected/active states.

7. Do’s and Don’ts

Do:

• Use Diatype for all primary text — it’s the voice of the brand
• Keep buttons in pure black-on-white or white-on-black — no color variants
• Use rgba(0,0,0,0.08) for borders — never a heavier stroke
• Let whitespace be the primary design element

Don’t:

• Don’t add color accents — not even a subtle brand blue or green
• Don’t use Tiny at sizes above 11–12px; it’s a detail typeface
• Don’t use shadows or elevation — keep surfaces flat
• Don’t deviate from the near-black #040404 for body text; it’s warmer than #000000 by design

8. Responsive Behavior

The --vh: 8px variable indicates JavaScript-assisted viewport height calculation for mobile Safari’s dynamic toolbar. This is a production-grade solution to the classic mobile viewport unit bug. Typography uses px units suggesting a fixed-size approach; the 16px body on inputs satisfies iOS’s minimum to prevent auto-zoom. The system-UI fallback ensures text remains legible even on devices where Diatype hasn’t loaded.

9. Agent Prompt Guide

Quick reference:

• Text: #040404 | Background: #ffffff
• Active surface: #efefef
• Border: rgba(0,0,0,0.08)
• Primary font: Diatype (neo-grotesque), fallback system-ui
• Detail font: Tiny (micro captions)
• Buttons: #000000 filled / rgba(0,0,0,0.5) outlined

Prompt starters:

• “Ultra-minimal wellness brand: near-black #040404 text on white, Diatype typeface, zero color accents, flat surfaces, rgba(0,0,0,0.08) borders.”
• “Editorial health brand aesthetic: black-and-white only, custom Diatype sans-serif, micro Tiny typeface for labels, stark button styles, no shadows.”

Generated by Sparkbites — extracted from live CSS analysis