FMK Cosmetics

Overview

FMK Cosmetics embodies 'Clinical Minimalism'—a design philosophy that merges laboratory precision with refined restraint. The brand serves professionals and skincare enthusiasts seeking efficacy without compromise, delivering advanced booster formulations through a visual language of clarity, transparency, and scientific authority. The aesthetic evokes a high-tech laboratory reimagined as a serene sanctuary: cool teal-gray backgrounds (#505050, #6c757d) provide calm containment, while the signature cobalt blue accent (#226699) punctuates key interactions and product highlights, creating visual hierarchy through strategic color restraint rather than saturation. The UI communicates confidence through whitespace, precise typography, and minimal ornamentation—every pixel serves function.

The brand voice is precise, approachable, and unapologetically professional. Vocabulary favors clinical terms ('booster ritual,' 'advanced results,' 'activate') paired with everyday accessibility ('everyday routine,' 'professional care'). The tone avoids breathlessness; instead, it speaks with quiet authority. Example: 'Advanced results, everyday routine'—a statement that positions efficacy as normal, not aspirational.

Colors

Color strategy in FMK operates on a principle of 'Functional Restraint': the palette is deliberately limited to maximize impact and clarity. The primary color, cobalt blue (#226699), is reserved exclusively for call-to-action elements, interactive states, and brand-critical highlights. This color appears sparingly on the page—perhaps 5–8% of total surface area—ensuring that when users encounter it on a button or link, the visual signal is unmistakable and urgent. The secondary palette consists of neutral grays: #505050 (dark text), #6c757d (secondary text and borders), #e9ecef (light container backgrounds), and #d0d0d0 (dividers). These grays create a calm, professional foundation without competing for attention. The surface stack is anchored in pure white (#ffffff) for maximum contrast an

Typography

The type system employs a two-family strategy: Montserrat (geometric, modern) for headlines and labels, and Noto Sans KR (humanist, accessible) for body text and UI copy. This pairing creates visual distinction between brand-forward messaging and functional content. Display and headline levels (60px, 40px, 28px) use Montserrat at weights 600–700, with aggressive negative letter-spacing (-0.04em to -0.01em) to create visual compression and authority. Body text (18px, 16px) uses Noto Sans KR at weight 400 with +0.01em to +0.02em letter-spacing, improving readability across Korean and Latin characters. Labels (14px, 12px) employ Montserrat at weights 500–600 with +0.05em to +0.08em letter-spacing, creating a technical, precise appearance suitable for UI controls. All type is rendered with -we

Layout

The page grid operates on a 12-column fluid system with a max-width of 1280px, centered on desktop viewports. Horizontal gutters are set to 24px (md spacing), creating breathing room between content sections without excessive whitespace. Vertical rhythm follows a strict 8px unit scale: section separations use lg spacing (40px), component padding uses md spacing (24px), and internal element spacing uses sm (12px) or xs (4px). The layout philosophy prioritizes negative space as an active design element—sections are separated by 40–64px of white background, allowing the eye to rest and content to breathe. Container backgrounds (surface-container: #e9ecef) are used sparingly to denote distinct content zones (product cards, filter panels, testimonial blocks) rather than wrapping entire sections

Elevation & Depth

Depth in FMK is conveyed through subtle shadow layering and strategic use of background color variation rather than dramatic drop shadows. The elevation system defines three discrete levels: Level 1 (Base) uses no shadow, relying on outline-variant borders (#adb5bd, 1px) to define edges. Level 2 (Standard Cards, Inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffuse shadow that suggests gentle lift without visual drama. Level 3 (Modals, Elevated Containers) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius (24px) and vertical offset (8px) tha

Shapes

The shape language is 'Architectural Precision'—sharp enough to feel modern and technical, soft enough to remain approachable. Border-radius is applied conservatively: buttons and standard inputs use 4px (0.5rem / DEFAULT), creating a subtle softness that prevents the UI from feeling rigid. Cards and elevated containers use 12px (0.75rem / md), providing slightly more visual relief while maintaining geometric clarity. Modals and full-width overlays use 16px (1rem / lg) at the top corners only, respecting the browser's natural edge. Badges and pill-shaped elements use full border-radius (9999px

Components

Action Elements Buttons are the primary interaction mechanism and must command attention through color and scale, not decoration. Primary buttons use background-color: #226699 (primary), color: #ffffff (on-primary), padding: 12px 24px, height: 48px, border-radius: 4px, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background shifts to #1a5a8f (a darker blue, -20% lightness) and shadow increases to 0 8px 24px rgba(0, 0, 0, 0.12), with transition: background-color 200ms ease-out, box-shadow 200ms ease-out. On active/pressed state, background becomes #0d3a5c (even darker) and shadow returns to none, creating tactile feedback. Secondary buttons use a transparent background with a 2px solid border in #226699, text color #226699, and the same padding/height. On hover, secondar

Do's and Don'ts

**Do**

• Do use the cobalt blue (#226699) exclusively for primary CTAs, focus states, and brand-critical highlights—never for backgrounds or secondary UI.
• Do maintain consistent 24px gutters and 40px section separations to create visual breathing room and reinforce the minimalist aesthetic.
• Do apply Montserrat (700) to all headlines and Noto Sans KR (400) to body text to create clear visual distinction between brand messaging and functional content.
• Do use the three-level shadow system (none, 0 3px 8px, 0 8px 24px) to convey depth; avoid hard shadows or multiple shadow layers.
• Do test all interactive elements (buttons, inputs, cards) for hover and active states to ensure tactile feedback is clear and consistent.

**Don't**

• Don't use warm colors (oranges, reds, yellows) in the primary palette; the brand's cool, scientific temperature must be preserved throughout.
• Don't apply border-radius greater than 16px to any component; the shape language must remain architecturally precise, not organic.
• Don't use drop shadows on text or apply text-shadow except when necessary for legibility over busy backgrounds (use 0 2px 4px rgba(0, 0, 0, 0.25) only).
• Don't mix Montserrat and Noto Sans KR within a single line of text; maintain clear family separation between headlines and body.
• Don't exceed 8% of the page surface with primary color; restraint is the brand's visual signature, and overuse dilutes impact.