Porkbun Design System

Overview

Porkbun's visual identity is built around warmth and approachability without sacrificing the technical authority expected of an ICANN-accredited domain registrar. The design language centers on a signature coral-pink ({colors.primary} — #ef7878) that appears across CTAs, form focus states, the hero background wash, navigation accents, and decorative elements. This is balanced against a crisp white {colors.canvas} foundation and near-black {colors.ink} typography, creating a system that feels both friendly and trustworthy.

The typographic voice relies on Open Sans throughout—a humanist sans-serif chosen for its readability at both display scales (36–42px headlines) and dense UI contexts (14px body copy, 12px labels). Weights stay restrained: headlines sit at 500 (medium), body text at 400 (regular), with occasional 600 emphasis for tertiary headings. There is no bold-as-hierarchy strategy here; size and color carry the distinction instead. System fonts handle fallback gracefully for body text, ensuring native rendering fidelity.

Shape language favors gentle rounding: {rounded.sm} (3px) for inputs and small buttons, {rounded.md} (6px) for cards, and {rounded.pill} (50%) for circular feature icon containers and avatar treatments. This soft geometry reinforces the brand's playful mascot-driven personality while maintaining enough precision for data-dense surfaces like pricing tables and TLD selection grids.

Sub-systems observed include: the Hero/Search dialect (coral-tinted background, oversized 20px search input, attached action button), the Social Proof dialect (star ratings in blue and gold, third-party badges with consistent spacing), and the Feature Grid dialect (circular icon containers on gray backgrounds, centered labels below). Each sub-system maintains the core token vocabulary while adapting proportions for its specific context.

Key Characteristics:

• Signature coral {colors.primary} applied to all interactive voltage points—buttons, borders, focus rings, hero washes
• Open Sans at weights 400/500/600; never bold (700+) for UI text; display headings use {typography.display-lg}
• Rounded corners capped at {rounded.lg} (8px); no sharp 0px-radius elements except special cases like the search-input left edge
• Generous vertical rhythm with {spacing.hero} (80px) section breaks and {spacing.section} (45px) internal banding
• Font Awesome 6 icon library providing consistent stroke-weight iconography at 16–24px scales
• Mascot illustrations (pigs in various poses/scenarios) rendered in flat vector style with {colors.primary} fills
• Shadow system biased toward the brand color ({extensions.shadows.glow} uses coral-tinted opacity)
• Light-mode-only design; dark surfaces reserved for footer ({component.footer-band}) and potential modals

Colors

Brand & Accent

• Primary ({colors.primary} — #ef7878): The signature coral-pink used for CTA buttons, the hero section background tint, form field focus borders, the chat widget trigger, cart badge accents, and all interactive highlights.
• Primary Hover ({colors.primary-hover} — #e66a6a): Darkened coral state for hover interactions on buttons and links.
• Active/Pressed ({colors.active} — #d94f4f): Deeper coral for active/pressed button states, providing clear tactile feedback against the default primary shade.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline surface for the main content area, navigation background, card interiors, and form inputs.
• Surface Soft ({colors.surface-soft} — #fef0f0): Extremely faint coral tint (roughly 95% white, 5% primary) used exclusively as the hero band background wash.
• Surface Gray ({colors.surface-gray} — #f3f3f3): Neutral light gray for feature icon circle containers, dropdown menus, and alternating row backgrounds in tabular data.
• Surface Warm ({colors.surface-warm} — #fff9f9): Near-white with imperceptible warmth, used subtly where separation from pure canvas is needed without introducing gray noise.
• Surface Dark ({colors.surface-dark} — #222222): Near-black reserved for the footer band, creating strong visual termination to the page.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White surface for elevated cards, modals, and dropdown panels (currently identical to canvas but semantically distinct for layering).

Text / Ink

• Ink ({colors.ink} — #000000): Absolute black for maximum-contrast headlines (H1, H2) and primary navigation text.
• Body ({colors.body} — #222222): Very dark gray (87% black) for paragraph text, providing slight warmth over pure black.
• Body Secondary ({colors.body-secondary} — #191919): Slightly lighter than body, used for emphasized body text spans and subheadings.
• Muted ({colors.muted} — #595959): Mid-gray for placeholder text in inputs, secondary descriptions, and de-emphasized metadata.
• Muted Soft ({colors.muted-soft} — #374151): Darker slate gray for tertiary information, timestamps, and subtle labels.
• On Primary ({colors.on-primary} — #000000): Black text atop coral backgrounds (buttons, badges), meeting WCAG AA contrast requirements against the light primary shade.
• On Dark ({colors.on-dark} — #ffffff): White text for footer content, dark modals, and any surface using {colors.surface-dark}.
• On Surface Dark ({colors.on-surface-dark} — #cccccc): Light gray text for secondary/footer content, providing hierarchy against dark backgrounds.

Hairlines & Borders

• Hairline ({colors.hairline} — #dddddd): Default border color for outlined buttons, card dividers, and non-focused input fields.
• Hairline Strong ({colors.hairline-strong} — #cccccc): Slightly darker border for hover states on outlined elements and structural separators.
• Border Accent ({colors.border-accent} — #ef7878): Coral-colored border matching {colors.primary}, used for focused input fields and highlighted UI chrome.
• Border Input ({colors.border-input} — #ef7878): Specifically for the domain search input's default unfocused state—an intentional brand-color border that signals interactivity even before focus.

Semantic

• Success ({colors.success} — #4ade80): Bright green used for Trustpilot star fills, availability indicators, and positive status messaging.
• Link Blue ({colors.link-blue} — #01a0ed): Bright cyan-blue for default hyperlinks (USATODAY, Facebook references) and default star-rating fills.
• Link Facebook ({colors.link-facebook} — #1877f2): Facebook's brand blue used specifically when referencing Facebook as a review source.
• Rating Gold ({colors.rating-gold} — #f1c349): Golden yellow for Forbes/award-star fills in the social proof section, conveying premium recognition.
• Rating Star Default ({colors.rating-star-default} — #01a0ed): Blue star fill for USATODAY and Facebook rating displays.
• Info Badge BG ({colors.info-badge-bg} — #e8f5e9): Pale green background for informational badges (e.g., Trustpilot score container).

Typography

Font Family

The system employs a two-tier font strategy: Open Sans (served via Google Fonts CDN with weights 300, 400, 600, 700 loaded) handles all branded text including headlines, navigation, buttons, and labels. For generic body content and system-level text, the stack falls back to system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif—ensuring native font rendering on each platform while maintaining visual consistency. Open Sans was selected for its excellent legibility at small sizes, neutral but friendly character shapes, and strong numeral clarity essential for displaying domain prices and metrics.

Additionally, Font Awesome 6 Free (solid and regular weights) and Font Awesome 6 Brands are loaded for iconography, providing the pig-bun logo glyph, social media brands, UI icons (search, cart, chevrons), and decorative stars. Legacy Glyphicons Halflings remain in the font-face declarations for backward compatibility with older Bootstrap components.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 42px | 500 | 1.15 | -0.01em | Hero-scale headlines (not visible in current viewport; reserved for campaign pages) | | {typography.display-lg} | 36px | 500 | 1.1 | -0.01em | Main hero headline ("AN ODDLY SATISFYING EXPERIENCE") | | {typography.title-lg} | 32px | 400 | 1.2 | 0 | Section headlines ("ALL-IN-ONE DOMAIN MANAGEMENT TOOLS") | | {typography.title-md} | 21px | 400 | 1.4 | 0 | Feature card titles, sub-section headers | | {typography.title-sm} | 18px | 500 | 1.1 | 0 | Tertiary headings, card titles in dense layouts | | {typography.body-md} | 14px | 400 | 1.4 | 0 | Paragraph text, navigation items, standard UI text | | {typography.body-sm} | 13px | 400 | 1.43 | 0 | Secondary descriptions, legal text, footer links | | {typography.label} | 12px | 400 | 1.43 | 0 | Pricing labels (.COM from $11.08), badges, timestamps | | {typography.button} | 14px | 400 | 1.25 | 0 | Button labels, nav links, interactive text | | {typography.input-search} | 20px | 400 | 1.2 | 0 | Domain search input field (intentionally oversized) |

Principles

The typography system trusts size differentiation over weight variation to establish hierarchy. Notice that {typography.display-lg} (36px) and {typography.body-md} (14px) differ by 22px but only 100 in weight (500 vs 400). This restraint prevents the visual shouting common in startup landing pages. Headlines use a subtle -0.01em letter-spacing tightening that improves perceived professionalism at large sizes without affecting readability.

Color plays a supporting role: the hero sub-headline uses {colors.ink} but at body scale, while pricing labels employ underline decoration rather than weight changes. The domain search input breaks pattern intentionally at 20px—this is a signature typographic moment where the oversized input signals "this is why you're here." Line heights are generous (1.1–1.4x) reflecting the airy, uncluttered layout philosophy.

Open Sans's slightly condensed width allows more characters per line in pricing grids and domain lists—a practical consideration for a registrar displaying numerous TLD options. The absence of italic usage (except potentially in legal footers) keeps the voice direct and utilitarian, appropriate for a transactional tool.

Note on Font Substitutes

Open Sans is available freely from Google Fonts and requires no substitution. If local hosting is preferred, serve the woff2 files from /fonts/open-sans/ with the CSS variable --font-heading: 'Open Sans', sans-serif. For body text, define --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif. No proprietary fonts (Söhne, Cereal, etc.) are in use. Should Open Sans ever need replacement, Nunito (similar warmth, slightly rounder) or Inter (more mechanical, higher x-height) are the closest Google Fonts matches for this design's personality.

Layout

Spacing System

• Base unit: 1px (atomic), with operational clusters at 6px ({spacing.sm}), 10px ({spacing.md}), 15px ({spacing.lg}), and 20px ({spacing.xl}).
• Tokens: {spacing.xxs} (1px — hairlines/borders), {spacing.xs} (4px — tight icon gaps), {spacing.sm} (6px — input padding, button internals), {spacing.md} (10px — component gaps), {spacing.base} (12px — card padding), {spacing.lg} (15px — dominant internal spacing, extracted count 131), {spacing.xl} (20px — section-internal margins), {spacing.xxl} (30px — major element separation), {spacing.section} (45px — between bands), {spacing.hero} (80px — hero vertical breathing room).
• Section padding (vertical): {spacing.hero} (80px) — used in the {component.hero-band}, providing ample space above/below the search interface and mascot illustration.
• Card internal padding: Feature cards use {spacing.xl} horizontal + {spacing.md} vertical internally; social proof cards use {spacing.lg} all-around.
• Gutters: Container gutters appear to be 15px–20px on mobile, scaling to ~30–40px at desktop within the max-width constraint.

Grid & Container

• Max content width: 1440px (explicitly set on <nav>; inferred for main content container based on industry patterns and screenshot proportions).
• Editorial vs marketplace density: Marketplace-dense in the pricing TLD strip (horizontal scrolling list of extensions with inline pricing); editorial-airy in the hero and feature sections. The design comfortably holds both modes.
• Desktop grid behavior: The feature grid ("ALL-IN-ONE DOMAIN MANAGEMENT TOOLS") uses a 4-column equal-width layout with centered text columns. The social proof section uses a flexible 4-column grid with varying content widths per cell (stars + logo + text combinations).
• Hero column split: Approximately 55% left (text + search column) / 45% right (mascot illustration) at desktop viewport, collapsing to single-column stacked on mobile.

Whitespace Philosophy

Porkbun embraces editorial-airy whitespace in brand-expression zones (hero, feature illustrations, mascot presence) while permitting marketplace density in utility zones (TLD pricing strip, navigation menu items, footer link columns). This dual-mode approach signals "we're friendly and thoughtful" in marketing moments while "we're efficient and data-rich" during transactional tasks. The 80px hero padding and 45px section breaks prevent visual crowding despite the amount of information presented.

Header Architecture

+------------------------------------------------------------------+
| [PIG LOGO]  PRODUCTS▼  TRANSFER  SALE!  ABOUT▼  RESOURCES▼   SIGN IN  [$0.00 (0)] |
+------------------------------------------------------------------+
|============================ 1440px max-width ============================|

Navigation uses a standard Bootstrap navbar pattern: logo flush-left, menu items center-left with dropdown carets, utilities (Sign In, Cart) flush-right. Height is approximately 64px. A thin coral accent line runs full-width immediately beneath the nav (visible in screenshot as the pink strip).

Hero Section

+------------------------------------------------------------------+
|                                                                    |
|   AN ODDLY SATISFYING EXPERERENCE.                                 |
|   3+ million domains managed by 600K+ customers...                 |
|                                                                    |
|   [Find your domain............] [bulk search ▼] [🔍]             |
|   .COM from $11.08  .GLOBAL from $31.41  .INC from $257.98 ...     |
|                                                                    |
|                              [PIG MASCOT ILLUSTRATION]             |
|                                                                    |
|   ★★★★★ Ranked #1    ★★★★★ Ranked #1     ★ Trustpilot    4.8 ★★★★☆|
|      USATODAY           Forbes           4.8 score        facebook  |
|                                                                    |
+------------------------------------------------------------------+

The hero is the most complex layout zone: headline → subheadline with bold-highlighted stats → full-width search bar assembly with attached dropdown and button → horizontal TLD pricing strip → four-column social proof grid → mascot illustration floated right (or absolutely positioned in desktop view).

Feature Grid Section

+------------------------------------------------------------------+
|                                                                    |
|            ALL-IN-ONE DOMAIN MANAGEMENT TOOLS                      |
|                                                                    |
|     ○              ○               ○                ○              |
|   (pig icon)    (pig at desk)  (pig w/ mail)   (pig w/ bag)       |
|                                                                    |
|    Domains      Web Hosting     Email Hosting       Transfer       |
|                                                                    |
+------------------------------------------------------------------+

Four equal columns, each containing: circular {component.feature-icon-circle} container (100px diameter, {colors.surface-gray} fill) holding a mascot illustration, followed by a {typography.title-md} label. Vertical spacing between icon bottom and label is approximately {spacing.lg}.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} background | Base page surface, nav bar, footer background | | 1 — Border | 1px solid {colors.hairline} or {colors.border-accent} | Input fields (default), outlined buttons, card boundaries | | 2 — Soft drop | {extensions.shadows.sm} — subtle neutral shadow | Cards on hover, elevated panels | | 3 — Brand glow | {extensions.shadows.md} or {extensions.shadows.glow} — coral-tinted shadow | Primary buttons, chat widget, focused elements | | 4 — Modal | Overlay + centered {colors.canvas} panel | Cookie consent banner, preference modals | | 5 — Decorative | N/A | Pig mascot illustration (appears layered via z-index) |

The depth philosophy is layered-minimal: shadows exist but are restrained. Notably, the primary shadow treatment uses the brand coral color at reduced opacity (rgba(239, 120, 120, 0.4)), making elevation itself a brand expression rather than neutral depth-cueing. Buttons and the chat widget cast a pink-tinted glow that reinforces the {colors.primary} presence without additional border or background cost.

Input fields use border-only elevation (no shadow) by default, acquiring a thicker or colored border on focus rather than a drop shadow. This keeps form surfaces flat and keyboard-friendly. The cookie banner sits at level 4 with a semi-transparent overlay backdrop, though it currently renders with zero inset shadow per extracted data.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 3px | Input fields, small buttons (cookie banner actions), search bar edges | | {rounded.DEFAULT} | 4px | Standard buttons, cart button, nav toggle, default component radius | | {rounded.md} | 6px | Cards, larger containers, moderate rounding needs | | {rounded.lg} | 8px | Feature cards, prominent panel containers | | {rounded.pill} | 50% | Circular icon backgrounds, avatar containers, fully rounded elements | | {rounded.circle} | 9999px | Chat widget FAB (perfect circle guarantee) |

The radius vocabulary is tightly constrained: six values total, with 3px–8px handling 90% of rectangular UI, and 50%/circle handling all circular needs. This prevents the "radius soup" common in less disciplined systems. The asymmetrical radius on the domain search input (3px 0 0 3px on left, 0 3px 3px 0 on button) is a deliberate compound-shape exception to create seamless visual joining between input and button.

Photography Geometry

Imagery in this system consists entirely of flat-vector mascot illustrations (the Porkbun pig character) rendered in the brand coral ({colors.primary}) fill with darker outlines. These appear at multiple scales:

• Hero mascot: Large format (~300–400px tall), full-body pig illustration with arms outstretched, wearing a shirt with the pig-bun logo badge. Positioned right-aligned in hero section.
• Feature icons: Small-format (~60–80px tall) pig vignettes inside {rounded.pill} circles, depicting the pig engaging with domains, laptops, mail, travel bags. Consistent style: simple shapes, coral fill, minimal line detail.
• Logo mark: Compact pig-bun (pig face inside a rounded square or circle) used in navigation and favicon contexts.

No photography, gradients, or 3D renderings appear in the current viewport. All imagery is SVG-optimized vector art with transparent backgrounds, designed for crisp rendering at any scale.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & Interactive Elements

{component.button-primary} — The primary call-to-action button with {colors.primary} background and black ({colors.on-primary}) text. Used for the domain search submit button (with custom asymmetric radius joining the input) and the chat widget trigger. Typography is {typography.button} (14px/400), padding 6px 12px, corner radius {rounded.sm}. On active state, transitions to {component.button-primary-active} with deeper {colors.active} background. Shadows may include {extensions.shadows.glow} for floating actions like the chat widget.

{component.button-primary-active} — Pressed/active state of primary buttons, shifting background to {colors.active} (#d94f4f) for tactile feedback. Maintains identical dimensions and text color as default state.

{component.button-secondary} — White-background button with {colors.ink} text and optional {colors.hairline} border. Used for secondary actions like "Opt Out All", "Save Choices", "Accept All" in cookie preferences. Same sizing as primary ({rounded.sm}, 6px 12px padding).

{component.button-outline} — Variant of secondary with explicit 1px {colors.hairline-strong} border, used for the cart button and nav toggle. Text remains {colors.ink} at {typography.body-md} scale.

{component.domain-search-button} — Specialized primary button variant attached to the right side of the domain search input. Uses {colors.primary} background, oversized {typography.input-search} (20px) for the magnifying glass icon (Font Awesome fa-search), and asymmetric border-radius: 0 {rounded.sm} {rounded.sm} 0 to seamlessly join the input's right-rounded-left edge. Height is locked to 54px to match input height. Active state: {component.domain-search-button-active}.

{component.chat-widget-button} — Fixed-position floating action button (FAB) in lower-right viewport corner. Perfect circle ({rounded.circle}, 56×56px) with {colors.primary} background and white/black icon. Casts {extensions.shadows.glow} for prominence against scrollable content. Triggers support chat interface on click.

{component.cookie-banner-close} — Minimal close button (×) positioned absolute top-right within cookie consent banner. Transparent background, #aaaaaa text, compact 2px 6px padding, 20px font size for easy targeting.

Cards & Containers

{component.hero-band} — Full-width hero section container with {colors.surface-soft} background (the faint coral wash). Contains headline, subheadline, search assembly, TLD strip, social proof grid, and mascot. Vertical padding is generous {spacing.hero} (80px). Text color defaults to {colors.ink}, headline uses {typography.display-lg}.

{component.feature-section-band} — White ({colors.canvas}) full-width band for the "All-In-One Domain Management Tools" section. Padding: {spacing.section} vertically, {spacing.xl} horizontally. Centers a {typography.title-lg} headline above the feature grid.

{component.feature-card} — Individual feature item within the 4-column grid. Transparent background, centered content flow. Contains {component.feature-icon-circle} above a {typography.title-md} label. Internal padding: {spacing.xl} horizontal, {spacing.md} vertical between icon and label.

{component.feature-icon-circle} — Circular container ({rounded.pill}, 100×100px) with {colors.surface-gray} background holding a mascot illustration. The illustration itself uses {colors.primary} as its dominant fill color. No text directly inside; purely illustrative.

{component.social-proof-card} — One cell in the 4-column social proof grid (USATODAY, Forbes, Trustpilot, Facebook ratings). Transparent background, centered alignment, {spacing.lg} internal padding. Contains star rating row (using {component.star-rating} or variants), publication name/logo, and subtitle text (year ranges, review counts). Typography: {typography.body-md}.

{component.footer-band} — Full-width footer container with {colors.surface-dark} (#222222) background. Text uses {colors.on-surface-dark} (#cccccc) at {typography.body-sm} scale. Padding: {spacing.xxl} (30px) vertical minimum. Contains link columns, legal text, and branding.

{component.cookie-banner} — Bottom-fixed or overlay consent banner with {colors.canvas} background. Contains explanatory text ({typography.body-md}), action buttons ({component.button-secondary} × 3), and {component.cookie-banner-close}. Padding: {spacing.lg} (15px). May have semi-transparent overlay backdrop at level 4 elevation.

Inputs & Forms

{component.domain-search-input} — The hero's dominant interactive element: a wide text input with {typography.input-search} (20px, significantly larger than standard inputs). White ({colors.canvas}) background, {colors.border-input} (coral) border even when unfocused—this is an intentional always-branded treatment. Placeholder text in {colors.muted}. Left-edge radius: {rounded.sm}, right edge: 0 (to join button). Height: 54px, padding: 10px 15px. Focus state transitions to {component.domain-search-input-focus} where text color shifts to {colors.ink}.

{component.domain-search-input-focus} — Focused state of the domain search input. Border may intensify or gain a subtle glow; text color becomes full {colors.ink}. Dimensions unchanged.

{component.bulk-search-dropdown} — Dropdown selector appended to the search input's interior-right (before the button). Gray {colors.surface-gray} background, {typography.body-md} text showing "bulk search ▼". No rounding (joins flat between input and button). Height matches input (54px).

{component.text-input} — Generic text input for forms (observed in cookie preferences context). {colors.canvas} background, {colors.hairline} border, {colors.muted} placeholder text. {typography.body-md} scale, {rounded.sm} corners, 6px padding, 38px height. Focus state: {component.text-input-focus} with border transition to {colors.border-accent}.

{component.text-input-focus} — Focused state for generic inputs. Border color transitions to {colors.border-accent} (coral) over 150ms ease-in-out (per extracted transition data: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out). Optional box-shadow ring may appear.

Navigation

{component.top-nav} — Fixed or sticky top navigation bar. {colors.canvas} background, 64px height, max-width 1440px centered. Contains {component.nav-logo-container}, nav links, dropdown toggles, and {component.nav-cart-button}. Full-width coral accent strip runs immediately below (not part of the nav component itself but adjacent).

{component.nav-logo-container} — Left-aligned logo area within nav. Height: 100px (extends below nav bar into hero space per screenshot). Contains the porkbun wordmark and/or pig-bun icon in {colors.primary}. Link-styled with no text decoration.

{component.nav-link} — Top-level navigation menu item (PRODUCTS, TRANSFER, SALE!, ABOUT, RESOURCES). {colors.ink} text at {typography.button} scale, 10px 14px padding, uppercase rendering. Items with dropdowns show a downward caret (▼). Hover/focus would invert to {colors.primary}.

{component.nav-dropdown-toggle} — Specialized nav-link variant indicating expandable submenu. Identical styling to {component.nav-link} with appended Unicode/F-A caret icon.

{component.nav-cart-button} — Right-aligned cart summary button showing "$0.00 (0)". Outlined style with {colors.hairline} border, {rounded.DEFAULT} corners, {typography.body-md} text, 6px 12px padding. Includes shopping cart icon (Font Awesome fa-shopping-cart) before the text.

Sub-Systems & Specialty Components

{component.pricing-label} — Inline TLD pricing label (".COM from $11.08"). Underlined link style, {typography.label} (12px), {colors.ink} text. Appears in the horizontal strip below the search bar. Renders as clickable links to TLD-specific pages.

{component.pricing-label-link} — Individual pricing label as an anchor element. Inherits {component.pricing-label} properties with subtle hover behavior.

{component.star-rating} — Row of filled stars (Font Awesome fa-star solid icons) in {colors.rating-star-default} (blue) or {colors.rating-gold} (gold) depending on the rating source. Sized approximately 16–18px each. Used in social proof cards.

{component.star-rating-gold} — Gold-colored star variant for Forbes/premium award displays using {colors.rating-gold} (#f1c349).

{component.trustpilot-stars} — Green star row ({colors.success} #4ade80) specific to Trustpilot branding, accompanied by green checkmark icon and "TrustScore 4.8 / 23,464 reviews" text in {typography.label} scale.

{component.mascot-illustration} — The hero-scale pig character illustration. Flat vector, {colors.primary} fill color, positioned right-aligned in the hero band. No component background (transparent). Z-indexed above text content but behind any fixed overlays.

{component.modal-overlay} — Semi-transparent backdrop (rgba(0, 0, 0, 0.5)) used for modals and the cookie consent overlay. Covers full viewport, centers child content.

Do's and Don'ts

Do

• Do use {colors.primary} (#ef7878) for all primary CTAs, focus states, and the hero background tint—this is the single color that makes the brand recognizable.
• Do maintain the {typography.input-search} (20px) oversizing on the domain search input—it's a signature moment that signals "start here."
• Do apply {rounded.sm} (3px) to input fields and small buttons; reserve {rounded.lg} (8px) only for feature cards and prominent panels.
• Do use Open Sans at weight 400 for body text and weight 500 for display headings—never exceed weight 600 in UI text except for rare h3 emphasis.
• Do place the full-width coral accent strip (approximately 3–4px height) immediately below the {component.top-nav}—it's a persistent brand signal.
• Do give feature sections {spacing.hero} (80px) or {spacing.section} (45px) vertical padding—the airy feel is intentional and builds trust.
• Do use Font Awesome 6 icons consistently at 16px (inline/text), 20px (buttons), or 24px (feature icons) scales—match the surrounding text size.
• Do keep mascot illustrations in {colors.primary} fill with transparent backgrounds—they must feel integrated, not overlaid.
• Do use {colors.success} green exclusively for Trustpilot/positive-status semantics and {colors.rating-gold} for premium awards—don't repurpose these semantic colors.
• Do ensure the domain search input has a coral ({colors.border-input}) border even when unfocused—it reduces the "find the search field" cognitive load.

Don't

• Don't substitute {colors.primary} with red, orange, or pink alternatives—the exact coral value #ef7878 is the brand identifier.
• Don't bold (weight 700) any UI text outside of exceptional cases—the system uses size and color for hierarchy, not weight.
• Don't remove the asymmetric radius on the search-input/button joint (3px 0 0 3px + 0 3px 3px 0)—it creates a unified control appearance.
• Don't add gradient backdrops to the hero band—the {colors.surface-soft} tint is a flat wash, not a gradient.
• Don't use shadows other than {extensions.shadows.sm}, {extensions.shadows.md}, or {extensions.shadows.glow}—the coral-tinted glow is the only brand-aware elevation.
• Don't let feature icon circles exceed 100–120px diameter or shrink below 80px—the {rounded.pill} container needs to feel substantial.
• Don't apply {colors.surface-dark} (#222222) to anything except the footer band—dark surfaces are not part of the primary UI vocabulary.
• Don't mix icon libraries—if adding new icons beyond Font Awesome, ensure they match FA's stroke weight (2px for solids) and geometric simplicity.
• Don't reduce {spacing.hero} below 60px in the hero section—the mascot illustration needs breathing room to read as friendly, not cramped.
• Don't use {colors.link-blue} for primary navigation links—nav items stay {colors.ink} until interacted with.

Motion & Animation

Transition Tokens

--transition-border: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
--transition-all-fast: all 0.2s ease;
--transition-background: background 0.2s;
--transition-height-collapse: height 0.01s linear;
--transition-generic: all 0.3s ease;

The extracted CSS reveals a mix of transition approaches: Bootstrap-standard all 0.15s ease-in-out for form focus states, shorter 200ms timings for color/background changes, and a degenerate height 0.01s transition (likely for accordion/collapse animations that should appear instant). The all keyword suggests some legacy Bootstrap patterns; prefer explicit property transitions in new implementations.

Keyframe Animations

• fa-beat — Pulsing scale animation on notification/count badges (Font Awesome builtin)
• fa-bounce — Downward bounce on attention-requiring icons
• fa-fade — Opacity fade for decorative icon sequences
• fa-flip — Horizontal/vertical flip for loading or refresh indicators
• fa-spin — Continuous rotation for loading spinners
• mini-pulse — Subtle opacity/scale pulse on the chat widget FAB to attract attention
• pulse-scale — Scale oscillation for promotional or alert elements
• pulse-fade-out — Fade-with-shrink dismissal animation (cookie banners, notifications)
• pbFadeIn — Brand-specific fade-up entrance for page sections
• pulse-dot — Dot indicator pulsing (typing indicator, status lights)
• message-slide-in — Slide-from-bottom entrance for chat messages or toast notifications
• typing-bounce — Bouncing dots animation for "someone is typing" indicators
• progress-bar-stripes — Striped progress bar animation (Bootstrap legacy)

Interaction Patterns

• Focus rings: Form inputs acquire a coral-tinted border-color transition (150ms) on focus, optionally accompanied by a subtle box-shadow expansion using {extensions.shadows.md}.
• Chat widget pulse: The {component.chat-widget-button} FAB likely employs the mini-pulse keyframe (subtle 1.02–1.05x scale oscillation) to draw attention after page load or period of inactivity.
• Cookie banner entrance: The consent banner probably uses pbFadeIn or message-slide-in for a smooth upward slide from viewport bottom on initial page load.
• Collapse/expand: Navbar mobile menu and accordion panels use height 0.01s (near-instant) or standard 350ms Bootstrap collapse timing.
• Star rating hover: Social proof stars may brighten or scale slightly (1.1–1.15x) on hover via fa-beat or custom transform transitions.
• Button press: Primary buttons show immediate {colors.active} background swap (no transition delay) on mousedown/touchstart for responsive feel.
• Scroll-triggered reveals: Feature cards and the mascot illustration may fade-in or slide-up on scroll-into-view using pbFadeIn with IntersectionObserver triggers.

If implementing new motion not present in the extracted CSS, recommended defaults: 200ms duration, ease-out easing for entrances, ease-in for exits, and cubic-bezier(0.25, 0.1, 0.25, 1) for state transitions. Keep motion "subtle"—the brand voice is calm and reassuring, not bouncy or theatrical.

Imagery Style

• Illustration type: Flat-vector mascot artwork featuring anthropomorphic pigs (the "Porkbun" character) in various scenarios (standing proudly, working at laptop, carrying mail, traveling with suitcase).
• Color treatment: Dominant fill color is {colors.primary} (#ef7878) coral-pink; outlines and details use darker tones (#333 or #222); shirts/accessories on the pig use charcoal gray (#555) with the white pig-bun logo badge.
• Style attributes: Clean geometric shapes, minimal shading (flat or 1-level cel shading), no gradients or textures, thick consistent stroke widths (2–3px) on outlines, friendly rounded proportions (large head, small body).
• Subject matter: The pig character engages in activities metaphorically related to the service (domains = pig holding book/laptop, email = pig with envelope, transfer = pig with luggage).
• Scale variation: Hero mascot is large (300–400px tall, full-body), feature icons are small (60–80px, bust/iconic pose inside circle), logo mark is compact (24–40px, head-only or abstracted).
• Backgrounds: Always transparent (PNG/SVG with alpha)—imagery floats on whatever surface it's placed ({colors.canvas}, {colors.surface-soft}, {colors.surface-gray}).
• Role in layout: Illustrations are supportive to text content—they reinforce friendliness and brand recall but never compete with headlines or CTAs for attention. The hero mascot is the sole image that achieves rough visual parity with the headline text block.
• No photography: The system does not use photographs, stock imagery, user-generated content, or photorealistic renders anywhere in the current viewport.
• Icon consistency: All icons (including UI icons like search, cart, chevron) share the flat, geometric aesthetic of the illustrations—even though they're Font Awesome glyphs, their simple construction aligns visually with the mascot art direction.

Icon System

• Library: Font Awesome 6 Free (solid + regular weights) + Font Awesome 6 Brands. Loaded from local path /fontawesome/fontawesome-free-6.5.2-web/css/all.min.css.
• Specific icons observed:
  • fa-search (magnifying glass) — Domain search submit button
  • fa-shopping-cart — Cart button in navigation
  • fa-caret-down / fa-chevron-down — Dropdown indicators on nav items and bulk search selector
  • fa-star (solid) — Rating stars in social proof section (USATODAY, Facebook)
  • fa-bars / fa-navicon — Mobile hamburger menu toggle
  • fa-times / fa-xmark — Close button (×) on cookie banner
  • fa-check / fa-check-circle — Trustpilot verification checkmark
  • fa-comment / fa-message — Chat widget icon (inside the circular FAB)
  • Brand icons: fa-facebook-f, fa-forbes (if available in Brands set) or text-based logos for publications
• Treatment: Solid fill style for UI icons (not outline/stroke), currentColor for color inheritance (inherits parent color), sized relative to context (16px inline, 20px buttons, 24px feature accents).
• Alignment: Icons are vertically centered with adjacent text using Flexbox align-items: center or traditional vertical-align: middle; typically 4–6px gap between icon and text.
• Custom brand icon: The "pig-bun" logo (pig face inside a rounded square with a bun shape) appears to be a custom SVG or font glyph, possibly registered as a Glyphicons or custom Font Awesome addition.

Recommended Frontend Stack

- Framework:      Bootstrap 4 (evident from .navbar, .container, .btn classes, grid system)
- Styling:        Custom SCSS/Less extending Bootstrap variables (overriding @brand-primary, etc.)
- Fonts:          Google Fonts CDN: Open+Sans:300,400,600,700; system-ui fallback stack for body
- Animation:      Vanilla CSS transitions/keyframes (extracted: fa-beat, pbFadeIn, mini-pulse, etc.)
- Icons:          Font Awesome 6 Free (Solid 900 + Regular 400) + Brands 400 (local bundle v6.5.2)
- Component lib:  Native Bootstrap components (navbar, btn, input-group, collapse, grid)
- Build tool:     Likely Gulp/Webpack with Sass compilation (inferred from asset paths)

Note on modernization: While the current site uses Bootstrap 4, a reimplementation could successfully use Tailwind CSS (utility-first mapping of the tokens in this spec) or React + Tailwind for component-driven development. The token system defined in this DESIGN.md is framework-agnostic and ports cleanly to any styling approach.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column everything; hamburger nav; stacked hero (illustration below search); feature grid becomes 2-column or 1-column scrollable | | Tablet | 768px – 1024px | 2-column feature grid; condensed nav (some items may collapse to "more" menu); hero maintains side-by-side but narrower | | Desktop | 1025px – 1440px | Full 4-column feature grid; full horizontal nav visible; hero split ~55/45 text/mascot; max-width container engaged | | Wide | > 1440px | Content centers at 1440px max-width; additional horizontal whitespace; no further layout changes |

Touch Targets

• {component.button-primary} / {component.button-secondary}: 38px height × variable width (min 44px width recommended for WCAG AAA; current 6px 12px padding on 14px text yields ~38×44px—meets minimum).
• {component.domain-search-input}: 54px height (exceeds 44px minimum comfortably; thumb-friendly).
• {component.domain-search-button}: 54×54px approx (exceeds 44×44px easily).
• {component.chat-widget-button}: 56×56px (FAB exceeds all touch target minimums).
• {component.text-input}: 38px height (below 44px recommendation; consider increasing to 44px for mobile forms).
• Nav links: ~44px hit area (padding 10px 14px + line-height ≈ 44px vertical).

Collapsing Strategy

• Navigation: At mobile breakpoint, the horizontal nav collapses to a hamburger toggle ({component.nav-toggle}) revealing a fullscreen or dropdown menu. The toggle button uses {rounded.DEFAULT} (4px), {colors.hairline} border, and 14px padding for adequate touch target.
• Hero section: The mascot illustration moves from right-floated position to below the search bar/TLD strip, becoming full-width centered. Headline font-size may reduce from 36px to 28–30px. Search input retains 20px font-size but narrows to fill available width.
• Feature grid: Transitions from 4-column to 2-column (tablet) to 1-column (mobile) with centered alignment. Icon circles reduce from 100px to ~80px diameter on mobile.
• Social proof grid: Becomes 2×2 grid on tablet, then single-column stacked on mobile. Star ratings and publication names remain centered within each cell.
• Domain search input: Maintains its oversized 20px font-size across all breakpoints (signature element), but the attached "bulk search" dropdown may hide or move below the input on narrow screens.
• Footer: Multi-column link layout collapses to stacked sections; text size may reduce slightly; padding compresses from 30px to 20px vertical.

Image Behavior

• Hero mascot: On mobile, scales down to ~200–250px height, centered below search interface, maintaining aspect ratio (vector SVG ensures crispness at any size).
• Feature icons: Scale proportionally with their {component.feature-icon-circle} containers (100px → 80px → 70px across breakpoints). Never crop—always contain-fit within circles.
• Logo: Remains constant size (~100px height for wordmark area) in nav; may simplify to icon-only on very narrow mobile screens (< 380px).
• Star ratings: Icon size stays constant (16–18px); container padding adjusts.

Iteration Guide

1. Start with the token foundation: Extract every value from this DESIGN.md's YAML frontmatter before writing any CSS. Define CSS custom properties matching the kebab-case token names exactly: --color-primary: #ef7878, --radius-sm: 3px, --spacing-hero: 80px, etc. Reference these variables everywhere—never hard-code hex values or pixel measurements that have a token equivalent.

2. Implement the global styles first: Set font-family to "Open Sans", sans-serif on <html>; establish {colors.canvas} as background-color on body; set color: {colors.ink} as default text; define box-sizing: border-box globally. Load Font Awesome 6 and Open Sans from CDNs (or self-host matching the version paths in the extracted data).

3. Build the navigation shell: Implement {component.top-nav} at 64px height with the 1440px max-width inner container. Add the full-width coral accent strip (3–4px, {colors.primary}) below it. Position {component.nav-logo-container} with its extended 100px height overlapping the hero zone. Implement dropdown toggles with Font Awesome caret icons.

4. Construct the hero band next: Create {component.hero-band} with {colors.surface-soft} background and {spacing.hero} vertical padding. Build the headline in {typography.display-lg}, subheadline in {typography.body-md} with <strong> tags around "million" and "customers" (matching screenshot emphasis). Assemble the search bar as a flex container: {component.domain-search-input} (flex-grow, left-radius-only) + {component.bulk-search-dropdown} (no radius) + {component.domain-search-button} (right-radius-only, primary bg). Place the mascot illustration absolutely or floated right at desktop, moving to document-flow order on mobile.

5. Add the TLD pricing strip and social proof grid: Render pricing labels ({component.pricing-label}) as inline-anchor underlined text in a flex row with overflow-x auto for mobile. Build the 4-column social proof grid using CSS Grid (grid-template-columns: repeat(4, 1fr)), each cell containing a star rating row (appropriate color per source: blue for USATODAY/Facebook, gold for Forbes, green for Trustpilot), publication name, and metadata.

6. Implement the feature section: Create {component.feature-section-band} with centered {typography.title-lg} headline. Build the 4-column feature grid where each cell stacks a {component.feature-icon-circle} (100px, {colors.surface-gray}, {rounded.pill}) containing a mascot illustration, then a {typography.title-md} label below. Use gap spacing of {spacing.xl} between columns.

7. Layer in interactive components: Style {component.text-input} with {colors.hairline} default border transitioning to {colors.border-accent} on focus (use --transition-border). Implement {component.button-primary} with {colors.primary} background and {colors.on-primary} text, adding {extensions.shadows.glow} for the chat widget FAB. Ensure all buttons have distinct active states ({component.button-primary-active}).

8. Apply motion sparingly: Use the transition tokens from the Motion section—prefer transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out for form focus, background 0.2s ease for button hovers. Reserve keyframe animations (mini-pulse, pbFadeIn) for the chat widget and page-load entrances respectively. Avoid animating layout properties (width, height) except for collapse/expand components.

9. Test responsive behavior systematically: Verify the nav collapses to hamburger below 768px; confirm the hero stacks vertically (text → search → mascot) on mobile; check that feature grid becomes 2-column then 1-column; validate all touch targets meet 44×44px minimum (especially {component.text-input} which may need height increase). Test at 375px (iPhone SE), 768px (iPad portrait), 1024px (iPad landscape), and 1440px (desktop).

10. Run lint validation: After completing implementation, execute npx @google/design.md lint DESIGN.md (or manual token-audit) checking for: broken {token.path} references (every ref in CSS/JS must resolve to a YAML key), orphaned tokens (defined but unused), and contrast-ratio warnings (especially {colors.primary} + {colors.on-primary}). Fix any flagged issues before deployment.

Font Setup: No proprietary font substitution needed. Open Sans loads from https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700. Define in CSS:

:root {
  --font-heading: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* if ever needed */
}

Apply font-family: var(--font-heading) to headings, nav, buttons, labels; apply font-family: var(--font-body) to paragraphs, body text, and form placeholders.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover background/color changes for buttons, links, nav items, and cards are not documented. Implement hover states as intermediate between default and active (e.g., {colors.primary-hover} for button hovers).
• Loading skeletons / pending states: No skeleton screen, spinner, or loading state designs were extractable from the static screenshot. Domain search results likely need a loading shimmer/pulse animation (consider using fa-spin or a custom CSS gradient shimmer).
• Form validation states: Beyond focus ({component.text-input-focus}), error states (red border/shake animation), success states (green border/checkmark), and disabled states for inputs are not represented in the current viewport.
• Authenticated/user dashboard surfaces: The screenshot shows the anonymous/homepage experience. Dashboard, domain management panel, DNS editor, and account settings surfaces (which may have different density, sidebar navigation, or data-table treatments) are not captured.
• Sub-brand or promotional palettes: Seasonal campaigns (holiday sales, anniversary promotions) may introduce temporary accent colors not reflected in the core palette.
• Dark mode: The system is explicitly light-mode (extensions.mode: "light"). A dark theme inversion was not observed and would require new surface/token definitions (dark canvas, adjusted primary saturation, etc.).
• Exact pixel values for pastel surfaces: {colors.surface-soft} (#fef0f0) and {colors.surface-warm} (#fff9f9) were inferred from the extracted background color frequencies; these extremely light tints may vary ±1–2 RGB points in the live site's dynamic generation.
• Misleading CSS variable naming: The source contains legacy Bootstrap variable patterns (e.g., .headerBrandContainer with hardcoded pixel heights) that don't map cleanly to modern CSS custom properties. Some class names suggest older Bootstrap 3-era conventions (.btn-default, .navbar-toggle) coexisting with newer structures.
• Dropdown menu contents: The dropdown toggles on PRODUCTS, ABOUT, and RESOURCES nav items, plus the "bulk search" selector, have undefined contents (menu items, options). Their internal styling (item padding, hover behavior, separator lines) is presumed to follow Bootstrap dropdown defaults.
• Accessibility focus-visible outlines: The extracted data doesn't show explicit :focus-visible ring styles. Implement a 2px solid {colors.primary} offset outline (or box-shadow: 0 0 0 2px {colors.primary}) for keyboard users as an enhancement beyond the browser default.