North Century Pharmacy

Overview

North Century Pharmacy embodies a 'Trusted Minimalism' aesthetic—a design philosophy that prioritizes clarity, human connection, and professional warmth over visual complexity. The brand serves patients seeking personalized pharmaceutical care, custom compounding, and curated wellness solutions. The UI evokes a sense of calm competence: deep navy backgrounds paired with warm, approachable accent tones create an environment that feels both authoritative and inviting. The visual language communicates expertise without coldness, combining serif headlines (Georgia) for timeless credibility with clean sans-serif body copy (DM Sans) for modern accessibility.

The brand voice is conversational yet knowledgeable—never patronizing, always direct. Tone patterns include phrases like 'Support you can trust. Simplicity you can feel.' and 'It's not complicated. It's personal.' The vocabulary emphasizes human outcomes (wellness, support, care) over technical jargon. Example sentence in brand voice: 'Your pharmacist knows your story—we customize every solution to fit your life, not the other way around.'

Colors

The color system balances professional authority with human warmth. Primary (#d4956d) is a warm terracotta-tan used exclusively on call-to-action buttons, interactive focus states, and key brand moments—it signals trust and approachability without aggression. Secondary (#203d5b), a deep navy, anchors the brand identity and appears in hero sections, navigation, and emphasis contexts; it conveys stability and expertise. Tertiary (#eb001b), a clinical red, is reserved for error states and urgent alerts—use sparingly to maintain brand coherence.

The surface stack progresses from pure white (#ffffff) for primary content areas through soft grays (#f9fafb, #eaecf0, #e6eef8) for container hierarchy. On-surface text (#344054) provides 7.2:1 contrast against white for WCAG AAA compliance. The inver

Typography

The type system pairs Georgia serif for headlines (display, headline-lg, headline-md) with DM Sans sans-serif for body and labels, creating a 'professional-yet-approachable' hierarchy. Georgia at 48–60px with -0.04em letter-spacing and 700 weight commands attention on hero sections and major headings; its serifs evoke pharmacy tradition and medical credibility. DM Sans at 16–18px with 400 weight and 24–28px line-height ensures readability in dense product descriptions and instructional content. Label-md (14px, 600 weight, 0.01em tracking) is used for buttons, badges, and form labels—the increased weight and tracking create visual distinction without size inflation. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text overlaid on photography or dark backgrounds to ensure legibilit

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, centered on viewport. Hero sections span full-width with 64px (lg spacing) top/bottom padding; content sections use 24px (md spacing) gutters between columns. Container padding is consistently 24px on desktop, reducing to 16px on tablets and 12px on mobile. White-space is generous: section separation uses lg spacing (40px), card-to-card gaps use md spacing (24px), and internal card padding uses md spacing (24px). The rhythm creates visual breathing room that reinforces the 'simplicity' brand promise. Navigation and header use 12px (sm spacing) for internal element gaps. All container max-widths reference the 1280px token; never hardcode breakpoints—use the spacing scale semantically (xs for micro-interactions, sm for for

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not dramatic drop-shadows. Level 1 (Base): flat surfaces with no shadow (cards on white background). Level 2 (Elevated): 0 3px 8px rgba(0, 0, 0, 0.15) applied to interactive cards, modals, and hover states—this 15% black shadow at 8px blur creates gentle separation. Level 3 (Modal/Overlay): 0 8px 24px rgba(0, 0, 0, 0.12) for full-page modals and floating panels. Shadows are always neutral black with reduced opacity (12–18%), never colored. Transitions between levels use 200ms cubic-bezier(0.4, 0, 0.2, 1) easing. Avoid stacking multiple sha

Shapes

The shape philosophy is 'Refined Pragmatism'—rounded corners are used strategically to soften technical interfaces without sacrificing clarity. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel inviting and modern; this applies to primary and secondary buttons uniformly. Cards and containers use lg (1rem / 16px) border-radius for a balanced, professional appearance. Input fields and form elements use DEFAULT (0.5rem / 8px) for subtle rounding that maintains visual hierarchy without distraction. Badges and small UI elements use full (9999px) to emphasize their seconda

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use #d4956d background, white text, 44px height, 11.5px vertical padding, and full border-radius (9999px). On hover, shift to #c17d54 with a 200ms transition. Secondary buttons (button-secondary) use white background with 1px #dedede border, on-surface text, and md border-radius (12px); on hover, shift to surface-container-low (#eaecf0). All buttons use label-md typography (14px, 600 weight). Never apply box-shadow to buttons; use background-color transitions only.

Containers & Surfaces Cards (card) use white background (#ffffff), lg border-radius (16px), md padding (24px), and sm elevation (0 3px 8px rgba(0, 0, 0, 0.15)). On hover, shift to surface-container-lowest (#f2f4f7) and md ele

Do's and Don'ts

**Do**

• Do use primary (#d4956d) exclusively for CTAs, focus states, and brand-critical moments—it's the visual anchor that builds recognition.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and interactive surfaces to create subtle depth without visual noise.
• Do pair Georgia serif headlines with DM Sans body copy to balance authority with approachability—never reverse this pairing.
• Do use lg spacing (40px) between major sections and md spacing (24px) between cards to enforce the 'simplicity' brand promise through generous white-space.
• Do apply 200ms transitions on all hover/focus state changes to create a sense of responsive, thoughtful interaction.

**Don't**

• Don't use secondary (#203d5b) or tertiary (#eb001b) for interactive elements—reserve secondary for backgrounds/headers and tertiary for errors only.
• Don't apply multiple stacked shadows; use a single appropriately-sized shadow per element (sm, md, or lg elevation only).
• Don't use sharp corners (0px border-radius) on any interactive element; minimum DEFAULT (8px) for inputs, lg (16px) for cards, full (9999px) for buttons.
• Don't reduce line-height below 24px for body text or below 28px for headlines—readability is non-negotiable.
• Don't hardcode hex colors inside component definitions; always use token references like {colors.primary} so the system remains maintainable and themeable.