Gossamer Frond

About Gossamer Frond

Overview

Gossamer Frond is for premium beauty and skincare storefronts that sell through restraint rather than promotion. The UI stays on the neutral ramp, and product photography supplies the color. One deep botanical green (primary) appears in only four roles: the main action per view, text links, the focus ring and selected states. Whitespace is part of the system. Sections use space.16 to space.24 gaps, and cards keep space.8 padding.

Color

Neutrals are deliberately untinted (R=G=B) so packaging and swatches read accurately. The ramp steps in roughly even lightness increments. The 400 and 500 steps were smoothed to #a6a6a6 and #808080 to remove the mid-ramp gap. Brand green sits at OKLCH hue about 130, a moss and eucalyptus tone rather than emerald. Its chroma peaks at 400 to 600 and tapers toward 50 and 950. The same curve is used for success (cooler teal-green, hue about 160) and danger (crimson, hue about 10), so all status ramps read as one family. Warning is an ochre that shares the brand's yellow lean. Light-mode contrast: - primary brand.600 with white text: 5.4:1. - primary on background: 5.2:1. - destructive danger.600 with white: 6.1:1. - success.700 with white: 7.0:1. - muted-foreground neutral.600: 5.7:1 on background and 5.4:1 on muted. - ring brand.500 on background: 3.6:1. Dark mode is built on near-black #121212. Cards and popovers lift to neutral.900, and secondary and muted surfaces sit at neutral.800. The accent is a soft sage, brand.400, with brand.950 text (6.5:1). It is luminous without turning neon. Destructive in dark mode is danger.400 with danger.950 text (6.1:1).

Typography

The scale uses a 1.333 ratio (perfect fourth) above the 18px body-lg: 24, 32, 42, 56. Body steps run 12, 14, 16, 18. Literata carries display-lg through heading-md at weight 400, with heading-md at 500. Tracking tightens as size grows: -0.022em at 56px, -0.018em at 42px, -0.012em at 32px and -0.006em at 24px. Nunito Sans (400, 500, 600) handles navigation, forms, product detail and buttons. Body line height is 1.65 at 16px and 1.7 at 18px. Fira Code 400 is used only for SKUs, order numbers and code. Caption is 12px, weight 600, uppercase, with 0.08em tracking for eyebrows and category labels.

Layout

Spacious density on a 4px base grid. Section gaps run space.16 (64px) to space.24 (96px) on desktop and space.12 (48px) on mobile. The content column is at most 1120px. Body text runs 60 to 72 characters per line. Prefer one idea per viewport, and let full-bleed imagery sit without overlaid UI.

Elevation

Almost flat. Surfaces are separated by a 1px border token (neutral.200 light, neutral.800 dark) and by whitespace. Shadows are used as follows: - shadow.sm (4% opacity) is the only shadow allowed on cards. - shadow.md is for menus and popovers. - shadow.lg is for dialogs and drawers. - Never combine two shadow tokens on one element.

Shapes

Corners are small for a tailored look: - radius.md (4px) on buttons, inputs and selects. - radius.lg (8px) on cards and dialogs. - radius.sm (2px) on checkboxes and tags. - radius.full only on badges (24px tall), avatars and color swatches.

Do

• Use one primary button per view for the main action, such as 'Add to bag'. Render all other buttons as secondary or ghost.
• Keep desktop section gaps at space.16 (64px) or larger and card padding at space.8 (32px).
• Set Literata only at heading-md (24px) and above: weight 400 for display-lg through heading-lg, 500 for heading-md. Use Nunito Sans for all UI text.
• Set caption uppercase with its 0.08em tracking for eyebrows and category labels, limited to 1-3 words.
• Separate surfaces with a 1px border token (neutral.200 light, neutral.800 dark). Use shadow.md only on menus and popovers, and shadow.lg only on dialogs.
• Show focus as a 2px ring token (brand.500 light, brand.400 dark) offset 2px from the control, on every interactive element.
• Pair success, warning and destructive states with an icon or a text label, such as 'In stock' or 'Only 2 left', so meaning never relies on color alone.

Don’t

• Don't fill large sections or decorative shapes with brand green. Primary is limited to actions, links, focus and selected states.
• Don't set Literata below 24px, above weight 500, or in all caps.
• Don't tint the neutral ramp warm or cool. Grey stays R=G=B so packaging colors stay true.
• Don't exceed radius.lg (8px) on cards or radius.md (4px) on buttons and inputs. radius.full is for badges, avatars and swatches only.
• Don't add shadow.md or shadow.lg to cards in a product grid. Cards use only the 1px border and shadow.sm.
• Don't use success green for primary actions. It is a status color, cooler in hue than brand green.
• Don't reduce card padding below space.6 (24px) or let body text lines exceed 72 characters.