ai · ecommerce · product-photography · saas · freemium · playful · warm · geometric · pill-cta
DESIGN.md inspired by Picoko
Warm-white canvas, weight-900 Outfit, and one blazing pink — product photography reimagined in seconds.
By webdesignhot · www.picoko.com ↗
$ npx @webdesignhot/design-md add picoko
Learn more about the CLI → Compare to…
Aave Ghost-soft DeFi — lavender #978fff on white, custom Aave Repro sans, pastel gradients in a usually-brutalist lending space. Accenture Dark hero, white Graphik, and one electric purple — the `>` greater-than mark made into a whole consulting brand. '#a600ff' is always moving forward. Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. Affirm Honest-money fintech in the dark — indigo #4a4af4 CTAs at near-pill 96px radius, light-weight white headlines, no fine print. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Allbirds Oatmeal-canvas eco-minimalism — Geograph sans on warm Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. American Express White-canvas premium-restraint membership UI — signature Amex Blue accent, near-black editorial type, concierge-tier hierarchy. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arbitrum Arbitrum Blue on white — Layer 2 chain marketing with Inter sans, structured grids, sophisticated-restraint contrasted with Solana's cinematic. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Atlassian Enterprise-blue corporate canvas — signature Atlassian Blue, Charlie display type, four-product mark. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Away Editorial travel-luggage DTC — Graphik on white, photography-led, sharp 0px white CTAs over dark hero imagery. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Bandcamp Bandcamp Cyan + Helvetica — indie-music marketplace honesty, no streaming-platform polish, no algorithmic carousels. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Best Buy Yellow price-tag mark, electric blue trust, bold sans — big-box electronics design with Geek-Squad confidence. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Biome A white-canvas Rust toolchain page where one deep azure blue does all the work. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Bolt An electric-blue command line for the web — StackBlitz's AI builder on a near-black #1e1e21 canvas, Inter Display, builder's register. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Booking.com Booking Blue + signal yellow — the deal-finder design language at maximum density, optimized for conversion not contemplation. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Brilliant STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilliant Sans, illustrated geometry as hero. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Buttondown Indie newsletter software in heavy 900-weight Auto Pro — electric `#0069ff` pill CTAs and soft-yellow highlights on a pure-white canvas. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Calm Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Capital One Confident-accessible banking — navy authority, one red swoosh, 2px-sharp blue. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Casper Cozy DTC sleep brand — Casper navy/indigo ink (`#1e306e`) on a pure-white canvas, deep-navy `#012169` pill CTAs at 32px radius, Calibre body under New Kansas friendly-serif display. Premium that tucks you in. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chase Trust-institutional banking UI — white canvas, near-black ink, bright-blue primary + green secondary CTAs in Open Sans. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. CircleCI Light-content CI/CD platform — near-black hero, Inter sans, navy chrome with a restrained CircleCI-green accent. ClassPass Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographed-class-as-hero pattern. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. CVS Health CVS-red heart on a clean white canvas — custom CVS Sans, near-black ink, trustworthy healthcare clarity. Databricks Signature Databricks Red Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deloitte Big-4 gravitas — pure-white canvas, true-black ink, Open Sans at light 300, and the signature green dot. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. Duolingo Owl-green confidence and DIN-Round buttons that lift like candy — the gamified language app distilled to four colors and one mascot. dYdX Pure-black canvas, Satoshi-compressed display, and one signature indigo-purple #7774ff CTA — a pro-trader perps terminal as a brand. Dyson Engineering-greyscale on white — Dyson Futura Light at 44px (weight `300`, never bold), body ink `#333` not pure black, zero-radius CTAs with a fluid-dynamics ripple hover, and a single magenta accent reserved for haircare. The web brand of an engineering company that refuses to look like a marketing site. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Emirates Custom-serif luxury — Emirates red on light grey, gold accents, Fly Better editorial calm. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Everlane Pure white canvas, Maison Neue Book, near-black ink — radical-transparency DTC minimalism. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. fal Pure white canvas, focal display at 120px, and near-black #252527 CTAs — generative-AI inference at editorial scale. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Fortnite Battle-royale design at maximum saturation — neon yellow + electric blue on near-black, Burbank Big condensed display, season-driven brand kaleidoscope. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. GitLab Light DevOps-platform marketing — GitLab Sans, near-black ink, oversized 96px headlines, tanuki-orange accent. Gitpod Editorial dev-tool calm — light canvas, near-black navy text, ABC Diatype sans + Martina Plantijn serif, 8px radius. Glif Near-black Manrope on near-white, anchored by one confident green CTA — a playful creative-agent canvas. Glossier Post-pink austerity — white canvas, single-family Apercu, 0px radius rectangles. The brand that invented millennial-pink chrome in 2014 has retired pink to a footer wash and a single badge color. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Graphite Near-black developer canvas — Matter type, near-white ink, one clean blue, 8px CTAs. Groq Warm off-white canvas, light-weight Space Grotesk, and a single hot `#f43e01` orange — speed-obsessed AI inference. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. Gumroad Hot pink `#ff90e8` on cream, ABC Favorit at 96px, hard black borders and offset shadows — neo-brutalist creator commerce. Gymshark Pure white canvas, black ink, Montserrat bold display over Roboto body — every CTA a fully-rounded 56px pill. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. HEY Warm-white canvas, deep purple-ink, and a crayon-box of saturated pastels — opinionated email dressed as a friendly poster. Hilton Hilton Blue on white — confident-contemporary hospitality with Söhne-adjacent sans, blue-on-white photography-led layouts. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. HubSpot Warm coral-orange (#FF7A59) on a near-white canvas, a humanist sans set generous and round, and a brand voice that turned inbound marketing into a methodology. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. Hume AI Warm cream canvas, custom Fellix type, and near-black pill CTAs — voice-AI research presented with humanist calm rather than tech coldness. Hyperliquid Near-black IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. IKEA Yellow `#ffdb00` on blue `#0058a3`, Noto IKEA sans, Swedish-democratic-design retail at planetary scale. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green JetBlue JetBlue Blue on white — friendly aviation with a custom rounded sans, Mint cabin orange accent, lower-case microcopy. Jupiter Jupiter lime on near-black — Solana DeFi aggregator with Inter, a cat-in-space mascot, and playful pill-CTA energy. Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Klarna Klarna PINK `#ffa8cd` on white, near-black navy `#0b051d` ink, Klarna Title at billboard scale. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Ledger White canvas, Inter at rest, and one unmistakable Ledger Orange on full-pill CTAs — security made calm. Lego Lego Yellow + Red on white — primary-color toy theatre, custom Lego Sans, brick-as-hero photography. Lemon Squeezy A dark hero with white Circular display, signature lemon-yellow Leonardo.Ai A pure-black cinematic canvas where ufficioDisplay headlines and white full-pill CTAs frame generative imagery — a film studio's title card, Canva-owned. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Lowe's Signature navy blue on white canvas — residential-DIY warmth rendered as big-box retail. lululemon Quiet-luxury athleisure — Saans variable on bone-off-white, off-black ink (`#140f0f`, not pure black), pill CTAs on square product cards, mixed-case sentence-cased headlines tracked −4px. The athletic brand that murmurs. Luma AI A cinematic black screening room that opens into a white studio — Graphik set tight, every CTA a full white pill. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Marriott Luxury-hospitality restraint — Caudex serif for editorial moments, off-white canvas, gold-bronze CTA, photographed-resort hero. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. MetaMask Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Monzo Hot Coral `#ff4f40` on bright white, MonzoSans humanist geometry, and a transparent challenger-bank warmth. Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. MyFitnessPal Fitness-tracking utility — MFP Blue on white, Inter sans, dense calorie-and-macro grids, conversion-first navigation. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Nintendo Joyful red on paper-white — Nintendo's site is the toy-aisle of the web, illustration-rich and refusal-of-darkness intentional. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nubank Roxo #8d0de3 as the whole brand — white nuSansDisplay on dark purple, 999px pill CTAs, anti-bank warmth. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Obsidian Near-black canvas, near-white text, a single electric-purple CTA and a crystal mark — a local-first knowledge base that looks like the editor it ships. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. On Swiss-engineered monochrome — true-black ink on white, custom On sans, bold 700 heads and 40px full-pill CTAs. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paddle Merchant-of-record calm — condensed serif headlines on a near-black canvas with warm cream and sand CTAs. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. Patagonia Outdoor-cooperative editorial — Futura sans on cream, ranger-station palette, photography-led story-first marketing. Patreon Patreon Coral on white — creator-economy patronage with Söhne sans, photographer-led marketing, mid-2024 brand refresh language. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Phantom Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint. Pika A cream-canvas AI video studio in custom Telka type, with peach and black pill CTAs. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Pinterest Masonry feed as product, restrained chrome around it — white canvas, near-black text, Pinterest red reserved for action. Pitch Enormous Mark Pro headlines on a black hero, then a clean white workspace — violet Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. PlayStation Sony's Cinema-Black canvas with PS Blue and a custom SST sans — gaming-as-cinema, premium hardware in editorial restraint. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Quizlet Study-buddy design — Quizlet purple-blue on white, custom Hurmes Geometric, flashcard-as-hero pattern. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Rainbow White canvas, SF Pro Rounded Black at 96px, and a pink-orange-blue-purple rainbow — the friendliest Ethereum wallet onchain. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Rare Beauty Soft lavender on cream — Selena Gomez's beauty brand with mental-health-aware editorial restraint and serif-led product cards. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Recraft A jet-black studio where ABC Gravity Condensed slams the headline at weight 900 and a single electric-lime CTA does all the shouting. Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Revolut Dark Aeonik Pro hero, white Inter content, near-black `#191c1f` ink, fully-pill CTAs and gradient-accented fintech sleekness. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Ritual Visible-supply-chain wellness — white lab canvas, Ritual Navy #142b6f everywhere, CircularXX, 25px rounded CTAs, warm yellow as the one accent. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Robinhood Chartreuse `#CCFF00` lime on a black `#000` canvas, Martina Plantijn serif headlines paired with Capsule Sans Text — financial-editorial register, not tech-app sans. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Shortwave A dark AI-email canvas with Poppins display weight and one electric blue — Inbox rebuilt by the people who built it. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. Snowflake Deeper cyan Solana Solana Gradient + Diatype on near-black — Layer 1 chain marketing as cinematic experiment, magenta-purple-cyan brand prism. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. Sourcegraph Near-black code-intelligence canvas — PolySans display, coral-red accent, big quiet headlines. Southwest Airlines Heart-warm low-cost airline — Southwest Sans on light grey, yellow CTA voltage with navy ink, sharp 2px corners. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. StackBlitz Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Storybook Open-source frontend workshop — white canvas, Nunito Sans, dark hero band, and the signature coral-pink brand mark. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. T-Mobile T-Mobile magenta (#E20074) dominates a near-white canvas — Un-carrier loudness in TeleNeo display weight. Tailscale Warm-light approachable-technical — off-white canvas, near-black Inter, brick-red accent. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The Home Depot Signature orange on white, Helvetica bold — hardware-aisle signage as a web storefront. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Udio A pitch-black stage with near-white Innovator display type and a single magenta-pink spotlight — a recording console reimagined as a creative canvas. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. Uniswap Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Valorant Tactical-shooter design language — Tungsten condensed all-caps, signal-red CTAs, and an off-white text the brand calls "ECE8E1". Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Visa Bright-blue + golden-yellow payment-rail confidence — saturated `#1434CB` primary, ceremonial `#FCC015` yellow on hero pill CTAs, pill geometry throughout, custom visa-font-latin in light/regular weights. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warby Parker Friendly-premium DTC eyewear — white canvas, bright blue + deep navy, fully pill CTAs. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Wayfair Near-white canvas, ink-black type, photographic product cards — editorial-light home retail at marketplace scale. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. Wikipedia System-default information design — Linux Libertine serif headings, Vector skin, deliberate non-branding for the encyclopedia of record. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Xbox Xbox Green on near-black, Microsoft's Segoe UI Display dialed to gamer-coded confidence — bold, energetic, Game Pass-first. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zed Warm paper-light canvas, IBM Plex Serif headlines at light weight, one electric-blue download button — a code editor's site that reads like a typesetter's page. Zoom Zoom Blue `#0B5CFF` on white — geometric sans wordmark, Workplace-era AI Companion friendly-corporate register. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens webdesignhot/0.1
theme: light
- bg
#fbfaf8 - bg-alt
#f5f3f0 - surface
#ffffff - surface-soft
#f9f8f6 - surface-elevated
#ffffff - text AAA · 18.1
#121110 - text-strong
#0a0909 - text-muted
#6b6663 - text-soft
#9c9793 - text-faint — · 1.8
#c3bfbb - brand AA·LG · 3.6
#fe1c71 - brand-deep
#e5005c - brand-soft
rgba(254, 28, 113, 0.10) - on-brand
#ffffff - link
#121110 - link-hover
#fe1c71 - selected-bg
rgba(254, 28, 113, 0.08) - disabled
#c3bfbb - border — · 1.2
rgba(18, 17, 16, 0.08) - border-strong — · 1.4
rgba(18, 17, 16, 0.16) - border-subtle
rgba(18, 17, 16, 0.04) - border-brand
rgba(254, 28, 113, 0.30) - success-bg
rgba(34, 197, 94, 0.10) - success-text
#15803d - warning-bg
rgba(234, 179, 8, 0.12) - warning-text
#a16207 - danger-bg
rgba(239, 68, 68, 0.10) - danger-text
#b91c1c - info-bg
rgba(254, 28, 113, 0.08) - info-text
#c0004e
Ship faster than ever.
display-hero "Outfit" 72px w900 -0.03em
Ship faster than ever.
display-lg "Outfit" 56px w800 -0.025em
Ship faster than ever.
h1 "Outfit" 48px w800 -0.02em
Built for teams that ship.
h2 "Outfit" 36px w700 -0.015em
A complete kit
h3 "Outfit" 28px w700 -0.01em
The quick brown fox jumps over the lazy dog.
h4 "Outfit" 22px w600 -0.005em
The quick brown fox jumps over the lazy dog.
h5 "Outfit" 18px w600 0
The quick brown fox jumps over the lazy dog.
body-large "Outfit" 18px w400 0
The quick brown fox jumps over the lazy dog.
body "Outfit" 16px w400 0
The quick brown fox jumps over the lazy dog.
body-medium "Outfit" 16px w500 0
The quick brown fox jumps over the lazy dog.
body-small "Outfit" 14px w400 0
OUR DESIGN SYSTEM
label "Outfit" 13px w500 0
npx @webdesignhot/design-md add stripe
code ui-monospace 13px w400 0
The quick brown fox jumps over the lazy dog.
eyebrow "Outfit" 12px w600 0.1em
OUR DESIGN SYSTEM
caption "Outfit" 12px w500 0.02em
OUR DESIGN SYSTEM
caption-tabular ui-monospace 12px w500 0
- step-0 0px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 24px
- step-6 32px
- step-7 48px
- step-8 64px
- step-9 96px
- step-10 128px
- step-11 160px
- micro
2px - sm
4px - md
8px - lg
16px - card
16px - modal
16px - xl
24px - pill
32px - full
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Design roles 7/8 mapped · webdesignhot/0.1
Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.
- background → bg
- foreground → text
- primary → brand
- primary-foreground → on-brand
- accent → —
- muted → text-muted
- border → border
- ring → border-strong
Picoko inherits the joyful-SaaS playbook that Luma, Framer, and early Linear refined: geometric sans at maximum weight, a single electric brand colour reserved entirely for primary actions, and a warm near-white canvas that reads approachable rather than corporate. The 32px pill CTA is the same shape language used across modern B2C SaaS (Notion, Pitch, Framer). Outfit as the type system — Google Fonts' rounded geometric grotesque — places Picoko closer to consumer fintech and lifestyle apps than to the austere design-tool register of Krea or Linear. The before-after image slider is lifted from photography and image-editing SaaS playbooks (Luminar, Canva). What Picoko rejects: dark canvases, monochrome restraint, editorial neutrality, and AI-tech purple gradients. It leans into warm, bright, and fast.
- AI image-generation SaaS peer; similar single-accent discipline applied to opposite palette (dark → light)
- Reference for AI image-generation brand positioning and before-after showcase patterns
- Primary distribution platform for Picoko''s end-customers; Polaris design language informs e-commerce UI conventions
- The display and body typeface — geometric grotesque with rounded stems; chosen for friendly-SaaS warmth at heavy weights
- Modern playful-SaaS aesthetic reference — pill CTAs, warm canvas, heavy geometric sans, freemium conversion UX
- Before-after image comparison interaction patterns; approachable creative-tool register for non-designer e-commerce sellers
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: Picoko
tagline: Warm-white canvas, weight-900 Outfit, and one blazing pink — product photography reimagined in seconds.
updated_at: 2026-05-28T23:37:00.340Z
published_at: 2026-05-28T23:37:00.340Z
author: webdesignhot
source_url: https://www.picoko.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [ai, saas, ecommerce]
tags: [ai, ecommerce, product-photography, saas, freemium, playful, warm, geometric, pill-cta]
preview_swatch: ['#fbfaf8', '#fe1c71', '#121110']
related: [krea]
description: 'Picoko is an AI product-photography and video SaaS for e-commerce sellers — generate studio-quality product shots, on-model images, and background-edited scenes in seconds, ready for Shopify, Amazon, and TikTok Shop. The canvas is a warm near-white `#fbfaf8`; the single chromatic signature is a blazing hot-magenta-pink `#fe1c71`, used for every primary CTA. Display type is **Outfit** at 72px / weight 900 — unapologetically heavy, instantly joyful. Radii run from 8px on nav chips to 32px pill CTAs, landing the brand in a playful-yet-confident SaaS register. Picoko ships a light + dark theme toggle; the default probed surface is light. The product is a sibling brand in the WebDesignHot portfolio.'
# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
background: bg
foreground: text
primary: brand
primary-foreground: on-brand
muted: text-muted
border: border
ring: border-strong
themes:
default: light
available: [light, dark]
switch-via: 'Toggle button in the nav persists preference to localStorage; OS prefers-color-scheme is the initial fallback. data-theme attribute on <html> drives all CSS custom property swaps.'
colors:
light:
bg: '#fbfaf8' # warm near-white canvas — live-probed authoritative
bg-alt: '#f5f3f0' # slightly deeper warm-white for inset zones
surface: '#ffffff' # pure white cards on warm-white ground
surface-soft: '#f9f8f6' # feather-light panel surface
surface-elevated: '#ffffff' # raised popover / modal
text: '#121110' # near-black — live-probed
text-strong: '#0a0909' # deepest black for hero display
text-muted: '#6b6663' # warm mid-grey captions
text-soft: '#9c9793' # quiet helper labels
text-faint: '#c3bfbb' # disabled, placeholder echo
brand: '#fe1c71' # hot magenta-pink — live-probed; THE signature CTA colour
brand-deep: '#e5005c' # pressed / active state — ~12% darker
brand-soft: 'rgba(254, 28, 113, 0.10)' # pink wash for badges, hover tints
on-brand: '#ffffff' # white text on pink CTA
link: '#121110' # inline links stay near-black in light mode
link-hover: '#fe1c71' # brand pink on hover
selected-bg: 'rgba(254, 28, 113, 0.08)' # selected nav / filter chip
disabled: '#c3bfbb' # faint warm-grey disabled
border: 'rgba(18, 17, 16, 0.08)' # 8% near-black hairline — warm tinted
border-strong: 'rgba(18, 17, 16, 0.16)'
border-subtle: 'rgba(18, 17, 16, 0.04)'
border-brand: 'rgba(254, 28, 113, 0.30)' # pink ring on focused inputs
success-bg: 'rgba(34, 197, 94, 0.10)'
success-text: '#15803d'
warning-bg: 'rgba(234, 179, 8, 0.12)'
warning-text: '#a16207'
danger-bg: 'rgba(239, 68, 68, 0.10)'
danger-text: '#b91c1c'
info-bg: 'rgba(254, 28, 113, 0.08)'
info-text: '#c0004e'
dark:
# Derived inversion — Picoko's dark mode was not deep-probed; these are principled
# counterparts: near-black warm canvas, near-white text, same #fe1c71 brand pink.
bg: '#0d0c0b' # near-black warm canvas (derived)
bg-alt: '#171614' # slightly lighter alternative ground
surface: '#1f1e1c' # warm-dark raised card
surface-soft: '#272523' # panel surface
surface-elevated: '#2e2c2a' # popover / modal
text: '#f5f4f2' # near-white on dark (derived)
text-strong: '#ffffff'
text-muted: '#9c9793' # warm mid-grey
text-soft: '#6b6663'
text-faint: '#3d3b39' # disabled
brand: '#fe1c71' # same hot pink — invariant across themes
brand-deep: '#e5005c'
brand-soft: 'rgba(254, 28, 113, 0.15)'
on-brand: '#ffffff'
link: '#f5f4f2'
link-hover: '#fe1c71'
selected-bg: 'rgba(254, 28, 113, 0.12)'
disabled: '#3d3b39'
border: 'rgba(245, 244, 242, 0.08)'
border-strong: 'rgba(245, 244, 242, 0.16)'
border-subtle: 'rgba(245, 244, 242, 0.04)'
border-brand: 'rgba(254, 28, 113, 0.40)'
success-bg: 'rgba(34, 197, 94, 0.12)'
success-text: '#86efac'
warning-bg: 'rgba(234, 179, 8, 0.12)'
warning-text: '#fde047'
danger-bg: 'rgba(239, 68, 68, 0.12)'
danger-text: '#fca5a5'
info-bg: 'rgba(254, 28, 113, 0.10)'
info-text: '#ff7aad'
typography:
display:
family: '"Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif'
weights: [400, 500, 600, 700, 800, 900]
opentype-features: ['kern', 'liga']
body:
family: '"Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif'
weights: [400, 500, 600]
opentype-features: ['kern']
mono:
family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
weights: [400, 500]
opentype-features: ['tnum', 'zero']
scale:
display-hero: { size: 72, weight: 900, lineHeight: 1.0, tracking: '-0.03em', family: display, opentype: 'kern liga', notes: 'Hero h1 — live-probed 72px / 900; "Get studio-quality product photos in seconds"' }
display-lg: { size: 56, weight: 800, lineHeight: 1.05, tracking: '-0.025em', family: display, opentype: 'kern liga' }
h1: { size: 48, weight: 800, lineHeight: 1.08, tracking: '-0.02em', family: display }
h2: { size: 36, weight: 700, lineHeight: 1.15, tracking: '-0.015em', family: display }
h3: { size: 28, weight: 700, lineHeight: 1.2, tracking: '-0.01em', family: display }
h4: { size: 22, weight: 600, lineHeight: 1.3, tracking: '-0.005em', family: display }
h5: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: display }
eyebrow: { size: 12, weight: 600, lineHeight: 1.4, tracking: '0.1em', family: display, transform: uppercase }
body-large: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-medium: { size: 16, weight: 500, lineHeight: 1.5, tracking: '0', family: body, notes: 'UI body emphasis — nav links, card labels' }
body-small: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body }
caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body }
caption-tabular: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0', family: mono, opentype: 'tnum' }
code: { size: 13, weight: 400, lineHeight: 1.55, tracking: '0', family: mono, opentype: 'tnum zero' }
radius:
micro: 2
sm: 4
md: 8
lg: 16
xl: 24
card: 16
modal: 16
pill: 32
full: 9999
spacing:
base: 4
scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160]
layout:
page-width: 1280
prose-width: 720
site-gutter: 'clamp(20px, 4vw, 56px)'
header-height: 64
grid-columns: 12
hero-layout: 'left headline + right before-after image panel; split ~55/45 on desktop'
section-rhythm: '80-128px'
components:
button-primary:
background: '#fe1c71'
text: '#ffffff'
padding: '12px 28px'
radius: 32
border: 'none'
font: 'Outfit 600 / 16px'
hover-bg: '#e5005c'
active-bg: '#cc0052'
focus-ring: '0 0 0 3px rgba(254, 28, 113, 0.35)'
use: 'Primary CTA — pill shape 32px radius; "Get started", "Try for free", "Generate now".'
button-secondary:
background: 'transparent'
text: '#121110'
padding: '12px 28px'
radius: 32
border: '1.5px solid rgba(18, 17, 16, 0.20)'
font: 'Outfit 600 / 16px'
hover-bg: 'rgba(18, 17, 16, 0.05)'
hover-border: 'rgba(18, 17, 16, 0.35)'
use: 'Outline twin — pill shape, near-black border. "See how it works", "Compare plans".'
button-ghost:
background: 'transparent'
text: '#121110'
padding: '8px 16px'
radius: 8
font: 'Outfit 500 / 15px'
hover-bg: 'rgba(18, 17, 16, 0.05)'
use: 'Quiet utility — nav links, inline secondary actions, footer links.'
button-icon:
background: '#ffffff'
text: '#121110'
padding: '10px'
radius: 8
border: '1px solid rgba(18, 17, 16, 0.10)'
font: 'Outfit 500 / 14px'
hover-bg: '#f5f3f0'
use: 'Icon-only trigger — zoom controls on before-after panels, social share.'
card:
background: '#ffffff'
border: '1px solid rgba(18, 17, 16, 0.08)'
radius: 16
padding: '24px'
shadow: 'rgba(18, 17, 16, 0.06) 0 2px 12px'
use: 'Feature card, pricing tier, testimonial block — white lift on warm-white canvas.'
card-before-after:
background: '#ffffff'
border: '1px solid rgba(18, 17, 16, 0.10)'
radius: 16
padding: '0'
aspect-ratio: '1 / 1'
use: 'Before / after image comparison panel — hero and feature sections; images bleed to radius.'
input:
background: '#ffffff'
border: '1px solid rgba(18, 17, 16, 0.16)'
radius: 8
padding: '10px 14px'
font: 'Outfit 400 / 16px'
placeholder-color: '#9c9793'
focus-ring: '0 0 0 3px rgba(254, 28, 113, 0.20)'
focus-border: '#fe1c71'
use: 'Sign up, onboarding, settings fields.'
badge-pill:
background: 'rgba(254, 28, 113, 0.10)'
text: '#c0004e'
padding: '4px 12px'
radius: 9999
font: 'Outfit 600 / 12px'
use: '"Free plan", "New", "Beta" — brand-pink wash, dark-pink text.'
badge-neutral:
background: 'rgba(18, 17, 16, 0.06)'
text: '#6b6663'
padding: '4px 10px'
radius: 9999
font: 'Outfit 500 / 12px'
use: 'Platform tag: "Shopify", "Amazon", "TikTok Shop".'
nav-link:
background: 'transparent'
text: '#121110'
padding: '6px 12px'
radius: 8
font: 'Outfit 500 / 15px'
hover-bg: 'rgba(18, 17, 16, 0.05)'
active-bg: 'rgba(254, 28, 113, 0.08)'
active-text: '#fe1c71'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
duration-fast: 120
duration-standard: 200
duration-slow: 320
duration-page: 400
reduced-motion: 'respects prefers-reduced-motion: reduce — all transforms collapse to opacity-only; before-after drag disables animation; durations halve.'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
none: 'none'
ambient: 'rgba(18, 17, 16, 0.05) 0 1px 3px'
standard: 'rgba(18, 17, 16, 0.08) 0 4px 16px'
elevated: 'rgba(18, 17, 16, 0.12) 0 8px 32px -4px'
modal: 'rgba(18, 17, 16, 0.20) 0 20px 48px -8px'
ring: '0 0 0 3px rgba(254, 28, 113, 0.25)'
accessibility:
contrast-text-on-bg: 12.6 # #121110 on #fbfaf8 — AAA
contrast-text-muted-on-bg: 5.1 # #6b6663 on #fbfaf8 — AA at body sizes
contrast-brand-on-bg: 3.3 # #fe1c71 on #fbfaf8 — AA large / UI; FAIL at small body text
contrast-white-on-brand: 3.3 # #ffffff on #fe1c71 — AA large only; use for CTAs ≥18px or bold ≥14px
contrast-text-on-surface: 13.2 # #121110 on #ffffff — AAA
focus-ring: '0 0 0 3px rgba(254, 28, 113, 0.35) — pink ring with 2px offset on all interactive elements'
reduced-motion-honored: true
keyboard-nav: 'tab order: skip-link → masthead → primary CTA → before-after panel controls → pricing → footer; Esc dismisses modals and dropdowns.'
prose-line-length: 'capped at 720px on text pages.'
dark-mode: optional # light is default; dark toggle ships in the nav.
colors-dark: see colors.dark # derived inversion with invariant brand pink #fe1c71.
lineage:
summary: 'Picoko inherits the joyful-SaaS playbook that Luma, Framer, and early Linear refined: geometric sans at maximum weight, a single electric brand colour reserved entirely for primary actions, and a warm near-white canvas that reads approachable rather than corporate. The 32px pill CTA is the same shape language used across modern B2C SaaS (Notion, Pitch, Framer). Outfit as the type system — Google Fonts'' rounded geometric grotesque — places Picoko closer to consumer fintech and lifestyle apps than to the austere design-tool register of Krea or Linear. The before-after image slider is lifted from photography and image-editing SaaS playbooks (Luminar, Canva). What Picoko rejects: dark canvases, monochrome restraint, editorial neutrality, and AI-tech purple gradients. It leans into warm, bright, and fast.'
influences:
- name: Krea
role: AI image-generation SaaS peer; similar single-accent discipline applied to opposite palette (dark → light)
url: https://krea.ai
- name: Midjourney
role: Reference for AI image-generation brand positioning and before-after showcase patterns
url: https://www.midjourney.com
- name: Shopify
role: Primary distribution platform for Picoko''s end-customers; Polaris design language informs e-commerce UI conventions
url: https://www.shopify.com
- name: Outfit (Google Fonts)
role: The display and body typeface — geometric grotesque with rounded stems; chosen for friendly-SaaS warmth at heavy weights
url: https://fonts.google.com/specimen/Outfit
- name: Framer
role: Modern playful-SaaS aesthetic reference — pill CTAs, warm canvas, heavy geometric sans, freemium conversion UX
url: https://www.framer.com
- name: Canva
role: Before-after image comparison interaction patterns; approachable creative-tool register for non-designer e-commerce sellers
url: https://www.canva.com
---
## 1. Visual Theme & Atmosphere
Picoko opens on a warm near-white canvas — `#fbfaf8`, a shade of off-white with just enough warmth to avoid clinical sterility. Against that ground, pure white cards (`#ffffff`) feel slightly lifted rather than flat, the difference between a studio wall and a sheet of paper. The headline is set in **Outfit** at 72px / weight 900, tracking at -0.03em — unapologetically heavy, a shout not a whisper. "Get studio-quality product photos in seconds." The type doesn't hedge; neither does the product.
The single chromatic moment is `#fe1c71` — a blazing hot magenta-pink that reads like neon on warm white. It belongs exclusively to primary CTAs and brand marks. Nothing else on the page is pink. The discipline is intentional: by quarantining the colour, every appearance of `#fe1c71` reads as an invitation to act. Picoko is solving the e-commerce seller's oldest problem — product photography is slow, expensive, and requires equipment nobody has — so the brand needs to feel fast, confident, and slightly electric. The pink delivers that in a 50×50px swatch.
The hero layout is a split composition: a left column carries the headline, sub-headline, and a 32px pill primary CTA; the right side is a before-after image comparison panel with a 16px radius, showing the transformation from a snapshot to a polished studio shot. The before-after reveal is the product's thesis made visible in a single scroll-above-the-fold moment. Radii move from 8px on nav chips to 16px on cards and comparison panels, finally to 32px on pill CTAs — a deliberate escalation that maps visual importance to roundness.
The page flows through a series of clean white-card feature blocks sitting on the warm canvas, each section separated by generous vertical rhythm (80–128px). Platform badges — "Shopify", "Amazon", "TikTok Shop" — appear as neutral pill tags. Testimonial cards use the standard white-surface pattern. Pricing tiers sit on white cards with a brand-pink border on the featured tier. Throughout, the warm canvas does the connective tissue work; the white surfaces do the lifting.
Dark mode inverts the canvas to near-black (`#0d0c0b`, warm-tinted to match the light palette's temperature) and the body copy to near-white (`#f5f4f2`). The brand pink `#fe1c71` is invariant — it doesn't need to change, because the contrast ratio on both backgrounds is sufficient for CTAs (large text / UI) and the electric quality is the point regardless of theme.
**Key Characteristics**
- Warm near-white canvas `#fbfaf8` — not paper-white, not cold grey, a considered warmth
- Single brand accent `#fe1c71` — hot magenta-pink, reserved exclusively for primary CTAs and brand marks
- Outfit at 72px / weight 900 — heavy geometric grotesque; the loudest headline in the SaaS tier
- 32px pill primary CTAs — the signature shape, consumer-SaaS register
- 16px card and panel radius — before-after comparison panels, feature cards, pricing tiers
- 8px nav-chip radius — smaller, tighter, purposeful
- Before-after image slider hero — the product thesis demonstrated at first scroll
- White-surface cards on warm canvas — subtle lift without shadows at rest
- Light-first with a genuine dark mode toggle — both themes carry the brand pink
- Platform-badge vocabulary — "Shopify / Amazon / TikTok Shop" tags anchor the e-commerce context
## 2. Color Palette & Roles
### Primary
- **bg** `#fbfaf8` — warm near-white canvas; live-probed. The slightly warm tint — not `#ffffff`, not `#f5f5f5` — is the canvas temperature that makes pure white cards feel lifted without shadows.
- **text** `#121110` — near-black body copy; live-probed. Warm-shifted slightly from neutral `#111111`.
- **surface** `#ffffff` — pure white cards, panels, and comparison frame. Sits visibly above the `#fbfaf8` canvas.
- **bg-alt** `#f5f3f0` — slightly deeper warm-white for inset zones, footer bands, and subtle section dividers.
### Brand & Accent
- **brand** `#fe1c71` — hot magenta-pink; THE signature colour. Primary CTAs only. Do not use as a background fill larger than a button or badge.
- **brand-deep** `#e5005c` — pressed / active state; approximately 12% darker in perceived value, maintains the pink family.
- **brand-soft** `rgba(254, 28, 113, 0.10)` — pink wash for badge backgrounds, hover tints on selected nav items.
- **on-brand** `#ffffff` — white text on pink CTAs; 3.3:1 contrast (AA large / UI, flag for small text — see Section 9).
### Interactive
- **link** `#121110` — inline links match body copy in light mode; underlined for affordance.
- **link-hover** `#fe1c71` — brand pink on hover; the only chromatic shift in inline copy.
- **selected-bg** `rgba(254, 28, 113, 0.08)` — active nav state, selected filter chip.
- **disabled** `#c3bfbb` — faint warm-grey for disabled inputs and buttons.
### Neutral Scale (Warm-tinted)
- **#121110** — near-black body copy.
- **#6b6663** — warm mid-grey for captions, helper text.
- **#9c9793** — quiet labels, placeholder copy.
- **#c3bfbb** — disabled, faint echo text.
- **#e5e2de** — light warm-grey hairlines and dividers.
- **#f5f3f0** — alt canvas, inset zones.
- **#fbfaf8** — canvas ground.
- **#ffffff** — surface (card, panel).
All neutral steps are warm-tinted (red channel ≥ blue channel) to maintain palette cohesion with the warm canvas and the pink brand.
### Surface & Borders
- **surface-0 (canvas)** — `#fbfaf8` warm near-white.
- **surface-1 (card)** — `#ffffff` pure white.
- **surface-2 (elevated)** — `#ffffff` + `rgba(18, 17, 16, 0.08) 0 4px 16px` shadow.
- **border** — `rgba(18, 17, 16, 0.08)` — 8% near-black hairline, warm-tinted.
- **border-strong** — `rgba(18, 17, 16, 0.16)` — emphasized rule, inputs at rest.
- **border-brand** — `rgba(254, 28, 113, 0.30)` — focus ring on inputs.
### Shadow Colors
Picoko's shadows use warm near-black at low opacity. The warm canvas absorbs shadows gently, so elevation is read primarily as surface step (`#fbfaf8` → `#ffffff`) plus a subtle blur for floating elements. Brand-pink shadows are not used; the pink stays in fills.
### Semantic
- **success** — bg `rgba(34, 197, 94, 0.10)`, text `#15803d` (green-700 on light).
- **warning** — bg `rgba(234, 179, 8, 0.12)`, text `#a16207` (amber-700 on light).
- **danger** — bg `rgba(239, 68, 68, 0.10)`, text `#b91c1c` (red-700 on light).
- **info** — bg `rgba(254, 28, 113, 0.08)`, text `#c0004e` — borrows the brand pink at low saturation.
## 3. Typography Rules
### Font Family
- **Display & Body**: `"Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif` — Google Fonts' geometric grotesque. Outfit has rounded stems and open apertures that read as friendly and confident; at weight 900 it is explosive; at 400 it is clean and legible. One family carries the entire system.
- **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace` — for numeric data in pricing tables, file size stats, and rare inline code.
- **OpenType features**: `kern` and `liga` always enabled. `tnum` (tabular figures) and `zero` enabled in mono.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | Outfit | 72px | 900 | 1.0 | -0.03em | Live-probed hero h1; "in seconds" punchline |
| Display LG | Outfit | 56px | 800 | 1.05 | -0.025em | Section hero headlines |
| H1 | Outfit | 48px | 800 | 1.08 | -0.02em | Page-level title |
| H2 | Outfit | 36px | 700 | 1.15 | -0.015em | Major section heading |
| H3 | Outfit | 28px | 700 | 1.2 | -0.01em | Feature group heading |
| H4 | Outfit | 22px | 600 | 1.3 | -0.005em | Card heading, pricing tier name |
| H5 | Outfit | 18px | 600 | 1.35 | 0 | Sub-card heading, nav section label |
| Eyebrow | Outfit | 12px | 600 | 1.4 | 0.1em | Uppercase pre-label: "FOR SHOPIFY SELLERS" |
| Body Large | Outfit | 18px | 400 | 1.6 | 0 | Hero lede, feature sub-headline |
| Body | Outfit | 16px | 400 | 1.55 | 0 | Default body copy |
| Body Medium | Outfit | 16px | 500 | 1.5 | 0 | UI body — nav links, card labels |
| Body Small | Outfit | 14px | 400 | 1.5 | 0 | Compact UI, helper text |
| Label | Outfit | 13px | 500 | 1.4 | 0 | Form labels, table headers |
| Caption | Outfit | 12px | 500 | 1.4 | 0.02em | Image captions, footnotes |
| Caption Tabular | mono | 12px | 500 | 1.4 | 0 | Price numbers, credit counts |
| Code | mono | 13px | 400 | 1.55 | 0 | Rare inline code |
### Principles
- **Weight 900 at 72px is the brand's loudest statement.** Outfit at black weight is unusual in SaaS — most brands cap at 700. Picoko uses it to signal that the product does something dramatic (transforming amateur snaps into studio shots).
- **Single-family discipline.** Outfit from eyebrow to body caption — no mixing with a serif or secondary sans. Consistency is the brand's quiet confidence.
- **Negative tracking only at display sizes.** -0.03em at 72px, tapering to 0 by h4. Below h4, tracking is neutral or slightly open for captions.
- **Optical sizing matters at 900.** At maximum weight, letter spacing must be tighter than the font's default — the -0.03em on the hero prevents the glyphs from feeling crowded against the heavy strokes.
- **400 body, never lighter.** Outfit at 300 loses the brand's warmth and reads as generic. Body stays at 400; UI emphasis steps to 500.
- **Eyebrow at 0.1em tracking.** Wider than most SaaS peers (0.05–0.08em) — the extra air at 12px makes the all-caps label feel designed rather than defaulted.
- **Mono only for numeric data.** Credit counts, file sizes, pricing figures benefit from `tnum` (tabular figures) to align columns; body numbers use Outfit's default proportional figures.
- **No italics in display.** Italic weight is reserved for inline body emphasis and testimonial quotes. Never in headlines or CTAs.
## 4. Component Stylings
### Buttons
**Primary (Hot Pink Pill)**
- Background: `#fe1c71`. Text: `#ffffff`, Outfit 600 / 16px.
- Padding: `12px 28px`. Radius: `32px` (pill). No border.
- Hover: bg → `#e5005c`; transition `200ms ease-standard`.
- Active: bg → `#cc0052`.
- Focus: `0 0 0 3px rgba(254, 28, 113, 0.35)`.
- Use: Every primary CTA — *Get started, Try for free, Generate now, See plans.* The pill shape is non-negotiable.
**Secondary (Outline Pill)**
- Background: transparent. Text: `#121110`, Outfit 600 / 16px.
- Border: `1.5px solid rgba(18, 17, 16, 0.20)`.
- Padding: `12px 28px`. Radius: `32px` (pill).
- Hover: bg → `rgba(18, 17, 16, 0.05)`, border → `rgba(18, 17, 16, 0.35)`.
- Focus: `0 0 0 3px rgba(18, 17, 16, 0.15)`.
- Use: Twin to primary — *See how it works, Watch demo, Compare plans.*
**Ghost (Quiet)**
- Background: transparent. Text: `#121110`, Outfit 500 / 15px.
- Padding: `8px 16px`. Radius: `8px`. No border.
- Hover: bg → `rgba(18, 17, 16, 0.05)`.
- Use: Nav links, inline secondary actions, footer utility links.
**Icon Button**
- Background: `#ffffff`. Text/icon: `#121110`.
- Padding: `10px`. Radius: `8px`. Border: `1px solid rgba(18, 17, 16, 0.10)`.
- Hover: bg → `#f5f3f0`.
- Use: Before-after panel zoom, social share, copy, close.
### Cards
**Feature Card**
- Background: `#ffffff`. Border: `1px solid rgba(18, 17, 16, 0.08)`. Radius: `16px`. Padding: `24px`.
- Shadow: `rgba(18, 17, 16, 0.06) 0 2px 12px` at rest; `rgba(18, 17, 16, 0.10) 0 6px 24px` on hover.
- Use: Capability tiles, feature highlights, platform icons.
**Before-After Panel**
- Background: `#ffffff`. Border: `1px solid rgba(18, 17, 16, 0.10)`. Radius: `16px`. Padding: `0`.
- Aspect ratio: `1 / 1` on square product images; `4 / 3` on scene-mode wider shots.
- Images bleed to the 16px corner radius. Drag handle is brand pink.
- Use: Hero and feature-section image comparison — the product's primary demonstration.
**Pricing Card**
- Background: `#ffffff`. Radius: `16px`. Padding: `28px 24px`.
- Default: border `1px solid rgba(18, 17, 16, 0.08)`.
- Featured: border `2px solid #fe1c71`; optional brand-pink eyebrow "Most popular".
- Shadow on featured: `rgba(254, 28, 113, 0.12) 0 8px 32px -4px`.
**Testimonial Card**
- Background: `#ffffff`. Border: `1px solid rgba(18, 17, 16, 0.06)`. Radius: `16px`. Padding: `20px 24px`.
- Avatar: 40px circle. Quote text: Outfit 400 / 16px in `#121110`. Attribution: Outfit 500 / 13px in `#6b6663`.
### Badges, Tags, Pills
**Brand Badge** — bg `rgba(254, 28, 113, 0.10)`, text `#c0004e`, Outfit 600 / 12px, padding `4px 12px`, radius `9999`. Use: "Free plan", "New", "Beta".
**Neutral Tag** — bg `rgba(18, 17, 16, 0.06)`, text `#6b6663`, Outfit 500 / 12px, padding `4px 10px`, radius `9999`. Use: Platform names — "Shopify", "Amazon", "TikTok Shop".
**Eyebrow Label** — no chrome; Outfit 600 / 12px / uppercase / 0.1em tracking, colour `#9c9793`. Use: Section pre-label ("TRUSTED BY 10,000+ SELLERS").
### Inputs / Forms
**Text Input**
- Background: `#ffffff`. Border: `1px solid rgba(18, 17, 16, 0.16)`. Radius: `8px`. Padding: `10px 14px`.
- Font: Outfit 400 / 16px. Placeholder: `#9c9793`.
- Focus: `0 0 0 3px rgba(254, 28, 113, 0.20)` ring; border → `#fe1c71`.
- Error: border → `#b91c1c`, helper text in `#b91c1c` below.
- Use: Sign-up email, onboarding fields, settings.
**Select / Dropdown**
- Same appearance as text input at rest.
- Open: `#ffffff` bg, `1px solid rgba(18, 17, 16, 0.12)` border, `16px` radius on the dropdown panel.
- Option hover: bg → `rgba(254, 28, 113, 0.06)`.
### Navigation
- Header height `64px`. Background `rgba(251, 250, 248, 0.90)` with `backdrop-filter: blur(16px)` — lets the warm canvas bleed through on scroll.
- Logo: Picoko wordmark in `#121110`, Outfit 700.
- Nav links: Outfit 500 / 15px, colour `#121110`, padding `6px 12px`, radius `8px`. Hover: bg → `rgba(18, 17, 16, 0.05)`.
- Right-side: ghost "Sign in" + brand pink pill "Get started" (Outfit 600 / 15px).
- Mobile (<640px): hamburger collapses nav to a full-height sheet; links stack at 18px / 600. CTA remains visible at bottom of sheet.
### Optional Components
**Dropdown Menu** — bg `#ffffff`, border `1px solid rgba(18, 17, 16, 0.08)`, radius `12px`, shadow `rgba(18, 17, 16, 0.12) 0 8px 24px -4px`. Items: Outfit 400 / 15px, hover bg `rgba(254, 28, 113, 0.06)`.
**Tooltip** — bg `#121110`, text `#ffffff`, radius `6px`, padding `6px 10px`, font Outfit 500 / 12px.
**Toast** — bg `#ffffff`, border `1px solid rgba(18, 17, 16, 0.10)`, radius `10px`, padding `12px 16px`, shadow `rgba(18, 17, 16, 0.12) 0 6px 24px -4px`. Icon-left pattern: success green, warning amber, error red.
**Modal** — bg `#ffffff`, radius `16px`, shadow `rgba(18, 17, 16, 0.20) 0 20px 48px -8px`, max-width `540px`. Backdrop: `rgba(18, 17, 16, 0.50)`. Brand-pink close button on destructive actions.
## 5. Layout Principles
### Spacing System
- **Base unit**: 4px.
- **Scale**: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160.
- **Density**: Chrome-level spacing is medium-dense (64–96px section rhythm); within-card spacing is tight (16–24px). The page reads approachable, not airy — a SaaS tool that respects the seller's time.
### Grid & Container
- **Page max width**: `1280px` — standard SaaS frame.
- **Site gutter**: `clamp(20px, 4vw, 56px)` — comfortable on all viewports.
- **Grid**: 12 columns with 24px gutters on desktop; collapses to 4 columns on tablet, 1 column on mobile.
- **Hero layout**: 55/45 left/right split — headline and CTA left, before-after panel right. Below tablet, stacks vertically: headline → CTA → comparison panel.
- **Prose width**: 720px maximum on text-heavy sections.
### Whitespace Philosophy
Picoko's whitespace is **purposeful but not sparing**. Section rhythm runs 80–128px between major blocks — generous enough to let each section breathe and register, tight enough to maintain urgency (the product is fast; the page should feel fast). Card padding is consistently 24px. Internal card spacing is 16px between elements. The warm canvas creates visual air even when spacing is moderate.
### Section Cadence
- Hero (split headline + before-after panel) → Platform logos band (Shopify, Amazon, TikTok Shop) → How it works (3-step feature ladder) → Before-after gallery grid → Testimonials (card strip) → Pricing (3-tier cards) → Final CTA band (pink-accented) → Footer.
- The page alternates between warm-canvas ground and white-card clusters. Section breaks use vertical space; no horizontal rules. The pink CTA band near the footer uses `#fe1c71` as a background — one of the rare instances where the brand colour fills a full-width surface (using `#ffffff` text above it).
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Decorative dividers, progress bar caps |
| Standard (sm) | 4px | Small badges, compact chips, tag inner radius |
| Comfortable (md) | 8px | Nav links, icon buttons, text inputs, dropdowns |
| Featured (lg) | 16px | Cards, comparison panels, pricing tiers, modals |
| Large (xl) | 24px | Hero panels on wide viewports, pricing featured highlight |
| Pill (CTAs) | 32px | Primary and secondary call-to-action buttons — the signature |
| Full | 9999px | Avatar circles, status dots, badge-neutral pills |
Picoko's signature shape tension is the **contrast between 8px utility elements and 32px pill CTAs**. The nav links and inputs sit at 8px — functional, unobtrusive. The moment you look at a CTA, the 32px pill asserts "this is the action." Cards at 16px sit in the middle register: friendly but structured. The before-after comparison panels also use 16px — the image content is editorial, not form-field utility.
There are no zero-radius surfaces at any user-visible level. Even progress bars cap their ends at `9999px`. The brand has committed to roundness as a signal of approachability — a deliberate contrast to the sharp-cornered default of Shopify admin and Amazon Seller Central, where Picoko's users spend their day.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — canvas `#fbfaf8` | Page background, hero ground |
| 1 | Surface step — `#ffffff` | Cards, comparison panels, nav bar (no shadow) |
| 2 | `rgba(18,17,16,0.06) 0 2px 12px` | Default card shadow at rest |
| 3 | `rgba(18,17,16,0.10) 0 6px 24px` | Hovered cards, sticky nav on scroll |
| 4 | `rgba(18,17,16,0.14) 0 8px 32px -4px` | Dropdowns, tooltips, toasts |
| 5 | `rgba(18,17,16,0.20) 0 20px 48px -8px` | Modals, overlays |
### Shadow Philosophy
Picoko's primary depth cue is **surface stepping** (`#fbfaf8` canvas → `#ffffff` card) — the same move as Krea's tonal stepping, but in the warm-light register. Shadows appear as a secondary reinforcement: cards carry a faint 2px / 12px shadow at rest to give a paper-on-paper lift. On hover, the shadow deepens rather than the card scaling. Brand-pink shadows are used sparingly and only on the featured pricing tier, where a subtle `rgba(254, 28, 113, 0.12)` glow reinforces the recommended-plan hierarchy.
## 8. Interaction & Motion
### Easing Curves
- **`ease-standard`**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus, colour transitions.
- **`ease-emphasized`**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, drawer slide.
- **`ease-spring`**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — slight overshoot for the before-after drag handle snap; badge pop on first render.
### Duration Buckets
- **Fast (120ms)** — colour transitions, border-colour focus, link hover tint.
- **Standard (200ms)** — button hover (bg, border), card shadow deepening, nav backdrop.
- **Slow (320ms)** — modal enter/exit, drawer slide, page section fade-in.
- **Page (400ms)** — route transitions, hero section reveal on load.
### Per-Component Micro-States
- **Primary button hover**: bg `#fe1c71` → `#e5005c` over 200ms; no transform, no scale.
- **Secondary button hover**: border opacity 0.20 → 0.35; bg fills to 5% near-black — both over 200ms.
- **Card hover**: shadow `0 2px 12px` → `0 6px 24px` over 200ms; border opacity barely shifts.
- **Before-after drag**: drag handle snaps to position with `ease-spring`, 120ms. Image reveal is `clip-path: inset(0 X% 0 0)` updating on `pointermove` — no easing (direct tracking); snap to final position on release uses `ease-spring` 200ms.
- **Input focus**: pink ring fades in over 120ms; border shifts to `#fe1c71` simultaneously.
- **Badge pop**: on first appearance (New, Beta), badge scales `0.8 → 1.0` with `ease-spring` over 240ms.
- **Nav hover**: bg fill `0 → rgba(18,17,16,0.05)` over 120ms.
### Page Transitions
Below-fold sections use `IntersectionObserver` to fade in at 85% viewport, 320ms duration, 8px translate-up. No looping animations at rest. The before-after hero panel may auto-reveal on load (slides from 100% to 50% coverage) using `ease-emphasized` over 800ms — a one-shot demo of the product.
### Reduced Motion
`@media (prefers-reduced-motion: reduce)` — all transforms collapse to opacity-only; before-after auto-reveal skips the slide and cuts to final position; `ease-spring` replaced with `ease-standard`; durations halve.
## 9. Accessibility & A11y
### Contrast Pairs
- **`#121110` on `#fbfaf8`** (body text on canvas): ~12.6:1 — **AAA** at all sizes.
- **`#121110` on `#ffffff`** (body on card): ~13.2:1 — **AAA** at all sizes.
- **`#6b6663` on `#fbfaf8`** (muted captions on canvas): ~5.1:1 — **AA** at body sizes.
- **`#9c9793` on `#ffffff`** (soft helper on card): ~3.8:1 — **AA large** only; keep at 14px+ or not relied on for essential info.
- **`#ffffff` on `#fe1c71`** (on-brand text): ~3.3:1 — **AA large / UI** (passes for text ≥18px normal or ≥14px bold, and for UI components). **Fails for small body text (<18px / <14px bold)**. Use `#fe1c71` as a CTA fill with white text only at the button's `16px / 600` size or larger. Never as a background for small paragraph text.
- **`#fe1c71` on `#ffffff`** (pink text on white): ~3.3:1 — same caveat. Acceptable for large display labels and icon glyphs; not for 12px body copy.
- **`#c0004e` on `#ffffff`** (info-text on card): ~5.5:1 — **AA** at body sizes. Prefer `#c0004e` over `#fe1c71` wherever pink text appears at small sizes.
### Focus Indicators
- Default ring: `0 0 0 3px rgba(254, 28, 113, 0.35)` with 2px offset on all interactive elements.
- Inputs: ring expands from the border — border shifts to `#fe1c71`, ring adds at 3px / 20% opacity.
- All interactive surfaces show a visible focus state. The pink ring provides clear contrast on both the warm canvas and white card surfaces.
### ARIA Patterns
- **Navigation**: `<nav aria-label="Main">` with skip-link to `#main-content`.
- **Before-after slider**: `<div role="slider" aria-label="Before / after comparison" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">` — drag handle keyboard-operable with arrow keys.
- **Before image**: `<img alt="Product photo before: original smartphone snapshot on wooden table">`.
- **After image**: `<img alt="Product photo after: studio-quality white background with professional lighting">`.
- **Dialog**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap and Esc-to-close.
- **Live regions**: `aria-live="polite"` for generation-complete status messages.
### Keyboard Navigation
- Tab order: skip-link → masthead nav → primary CTA → before-after panel drag handle → feature section → pricing → footer.
- Before-after slider: Left/Right arrow keys adjust reveal by 5%; Home/End go to 0%/100%.
- Esc closes dropdowns, modals, and the mobile nav sheet.
### Screen Reader Hints
- Before-after panels carry descriptive `alt` text on both images.
- Icon-only buttons carry `aria-label`.
- The brand-pink featured pricing badge carries `aria-label="Recommended plan"`.
### Reduced Motion
Honoured globally. Before-after auto-reveal skips animation; all translate-up fades collapse to opacity-only; badge pop removes the scale.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Use |
|---|---|---|
| Mobile | < 640px | Single-column stack; full-bleed comparison panels |
| Tablet | 640–1024px | 2-column feature grid; headline above panel stacked |
| Desktop | 1024–1280px | Full split hero; 3-column feature grid; full nav |
| Wide | > 1280px | Page locks at 1280px; gutters expand |
### Touch Targets
- Minimum tap target: 44×44px on all interactive elements.
- Primary pill CTAs on mobile: full-width (100%) at 48px height minimum.
- Before-after drag handle: 44px touch area regardless of visual handle size.
- Nav hamburger: 44×44px minimum.
### Collapsing Strategy
- **Header**: full nav at ≥1024px; hamburger sheet below. Primary CTA always visible — on mobile it migrates to the bottom of the hamburger sheet and bottom of the hero section.
- **Hero**: 55/45 split → headline-first stack (headline → CTA → comparison panel) on mobile.
- **Headline**: 72px → 52px → 40px across desktop / tablet / mobile.
- **Feature grid**: 3-up → 2-up → 1-up across breakpoints.
- **Section spacing**: 128px → 96px → 64px across sizes.
- **Card padding**: 24px → 20px on mobile.
### Image Behavior
- Before-after panels: serve `srcset` with 2× resolution assets for Retina; aspect ratio locked via CSS `aspect-ratio`. On mobile, height is capped at `100vw` (square).
- Feature images: native lazy-loading; descriptive `alt`.
- Hero panel: may use a static image on initial paint, swapping to interactive comparison on `load` event.
### Container Queries
Used inside feature cards to switch icon-top to icon-left layout when the card container width crosses 280px — allows the 3-column grid to reflow gracefully without global breakpoint coupling.
## 11. Content & Voice
### Tone
**Fast, confident, and seller-first.** Picoko writes for the Shopify merchant or Amazon seller who is juggling product launches with zero budget for a photographer. The copy is direct, quantified where possible ("studio-quality photos in seconds"), and never condescending. No AI hype jargon ("harness the power of…"); just the outcome the seller cares about.
### Microcopy Patterns
- **Button verbs**: "Get started," "Try for free," "Generate photos," "See plans," "Upload product." Never "Begin your journey" or "Unlock AI power."
- **Eyebrows / labels**: "FOR SHOPIFY SELLERS," "USED BY 10,000+ BRANDS," "NO PHOTOGRAPHER NEEDED." Plain, uppercase, factual.
- **Feature descriptions**: one sentence — the capability, then the benefit. "Remove backgrounds in one click — your product, ready for any platform."
- **Error messages**: "Couldn't generate that image. Try a different background or upload a clearer photo." — diagnose, suggest, move on.
- **Success confirmations**: "Photo generated. Download or edit." Brief, actionable.
- **Loading states**: "Generating…" with a subtle pink progress bar. No "Our AI is thinking magical thoughts…"
### Empty States
- *"Upload your first product photo to get started."* — clear invitation, no guilt.
- *"No generated photos yet. Try 'Studio background' to create your first batch."* — point to a specific action.
- Never uses "Oops!" Never implies the user did something wrong unless they actually did.
### CTA Verb Conventions
- Primary hero: "Get started free," "Generate photos now," "Try Picoko"
- Secondary hero: "See how it works," "Watch a demo"
- Pricing: "Start free," "Choose Pro," "Contact sales"
- Footer: "Pricing," "Integrations," "Blog," "Help"
The voice is **outcome-first**: tell the seller what they'll have (studio-quality photos, in seconds, for Shopify), not what Picoko is doing internally. The product is the magic; the copy is the shortcut to the result.
## 12. Dark Mode & Theming
Picoko ships a genuine light + dark theme toggle — a first-class UI element in the nav, not an afterthought. The live-probed default is **light** (the warm near-white canvas `#fbfaf8`). Dark mode inverts to a warm near-black canvas (`#0d0c0b`) with near-white body copy (`#f5f4f2`).
### What Changes in Dark Mode
- **Canvas**: `#fbfaf8` → `#0d0c0b`. Warm temperature maintained in the dark shift (warm near-black, not cool neutral).
- **Surface**: `#ffffff` → `#1f1e1c`. Cards remain visibly lighter than the canvas.
- **Text**: `#121110` → `#f5f4f2`. Body copy stays near-white, not full white, to avoid harshness.
- **Borders**: `rgba(18,17,16,0.08)` → `rgba(245,244,242,0.08)`. Same 8% opacity, flipped channel.
- **Shadows**: warm-dark at low opacity replace the warm-light versions.
### What Does Not Change
- **Brand pink** `#fe1c71` — invariant across both themes. The contrast ratio on dark canvas (`#0d0c0b`) is approximately 3.9:1 — slightly higher than on light, still AA-large for CTAs. The electric quality of the pink is maintained and arguably enhanced against the dark ground.
- **Radius scale** — unchanged.
- **Typography** — unchanged; Outfit at all weights and sizes is stable across themes.
- **Motion** — unchanged.
### Theme Persistence
Preference is written to `localStorage` under a key (e.g. `picoko-theme`). On next visit, the stored value is applied before first paint (inline script in `<head>`) to prevent flash of wrong theme. `data-theme="light"` or `data-theme="dark"` on `<html>` drives all CSS custom property swaps via `:root[data-theme="dark"] { ... }` blocks. `prefers-color-scheme` is the initial fallback when no localStorage key exists.
### Before-After Panels in Dark Mode
The comparison images themselves are unaffected by theme (they show the user's product). The panel frame — border, drag handle — flips to dark-theme tokens. The brand-pink drag handle remains `#fe1c71` in both themes.
## 13. Lineage & Influences
Picoko inherits the joyful-SaaS playbook refined by Framer, Luma, and modern freemium B2C tools: a geometric sans at maximum weight, a single electric accent colour quarantined to primary actions, and a warm canvas that reads approachable rather than corporate. The 32px pill CTA places Picoko in the same shape language as Notion, Pitch, and early Framer — a register that says "this is a tool people choose, not enterprise software people are assigned."
Outfit as the type system is the key differentiator from the design-tool SaaS tier (which defaults to Inter, Söhne, or Suisse Intl). Outfit's rounded stems and open apertures read as warm and friendly at 400; at 900 they become bold without feeling aggressive. The choice signals that Picoko's user is a Shopify merchant, not a design-system engineer.
The before-after comparison slider is a well-established pattern in image-editing SaaS — Luminar, Lightroom mobile, Canva's background remover — and Picoko uses it as the hero's primary product demonstration. It's a borrowed pattern, executed at 16px radius with a brand-pink drag handle to make it distinctly Picoko.
What Picoko rejects: dark canvases (Krea, Midjourney, Runway), monochrome restraint (Linear, Vercel), editorial neutrality (Stripe), and AI-purple gradients (every third AI startup). The brand wants to be unmistakably warm, bright, and fast — the opposite register from the creative-AI gallery aesthetic.
**Named influences:**
- **Krea** — AI image-generation SaaS peer; Picoko applies similar single-accent discipline to the opposite palette (warm light instead of absolute dark). *https://krea.ai*
- **Midjourney** — reference for AI image-generation brand positioning; Picoko explicitly differentiates by going warm/light where Midjourney goes dark/editorial. *https://www.midjourney.com*
- **Shopify** — primary distribution platform for Picoko's end-customers; Polaris design language informs e-commerce UI conventions that sellers already know. *https://www.shopify.com*
- **Outfit (Google Fonts)** — the typeface that carries the entire system; geometric grotesque with rounded stems chosen for friendly-SaaS warmth at heavy weights. *https://fonts.google.com/specimen/Outfit*
- **Framer** — modern playful-SaaS aesthetic reference: pill CTAs, warm canvas, heavy geometric sans, freemium conversion UX patterns. *https://www.framer.com*
- **Canva** — before-after image comparison patterns; approachable creative-tool register aimed at non-designer users. *https://www.canva.com*
## 14. Do's and Don'ts
### Do
- **Do** use `#fe1c71` for every primary CTA — and only for primary CTAs and brand marks. One use, one role, maximum impact.
- **Do** set hero headlines in Outfit weight 900 at 72px with -0.03em tracking. The heaviness is the brand's loudest signal.
- **Do** maintain the warm canvas temperature. `#fbfaf8` is not `#f5f5f5` or `#fafafa` — the warmth matters.
- **Do** use 32px pill shape for primary and secondary CTAs. Never 8px or straight-edge for a primary action.
- **Do** use 16px radius on cards and comparison panels — the brand's mid-tier signature shape.
- **Do** keep white cards (`#ffffff`) on the warm canvas (`#fbfaf8`) — the surface step is the primary depth cue.
- **Do** use `#c0004e` (darker pink) for small-size pink text where contrast matters — never `#fe1c71` at body size.
- **Do** show a before-after image comparison as the hero's right-column content — it demonstrates the product thesis in a single glance.
- **Do** add the `aria-label` and keyboard controls on the before-after slider — it's a non-standard interactive element.
- **Do** keep the brand pink invariant across light and dark themes.
- **Do** pace sections at 80–128px vertical rhythm. The page should feel fast but not anxious.
- **Do** write CTA verbs in outcome-first imperative: "Get studio-quality photos," "Generate now," "See plans."
### Don't
- **Don't** use `#fe1c71` as a background for a full-width section unless it is an intentional CTA band (bottom of page). A pink hero canvas would overwhelm.
- **Don't** use `#fe1c71` as body text at small sizes — the 3.3:1 contrast fails WCAG AA for text below 18px normal / 14px bold.
- **Don't** mix a second accent colour into the system. The pink's impact depends on isolation.
- **Don't** use weights below 600 for CTAs, or below 400 for body. Outfit at 300 loses brand warmth.
- **Don't** use a dark canvas for the marketing surface — the product's visual brand is warm, light, and fast.
- **Don't** use shadow-only depth — always pair with the surface step (`#fbfaf8` → `#ffffff`).
- **Don't** apply negative tracking below h4 — Outfit's openness at body sizes is part of its warmth; closing the tracking looks forced.
- **Don't** use sharp 0px or 4px radius on CTAs — pill shape is the non-negotiable signature.
- **Don't** use purple, indigo, or gradient-mesh AI aesthetics — Picoko differentiates by being the warm, fast, approachable tool in the category.
- **Don't** add exclamation marks or hyperbole to CTA copy. The product's value is self-evident; the copy just names the outcome.
- **Don't** use Outfit weight 900 below 36px — it becomes too heavy and loses legibility at body scales.
- **Don't** ignore the warm temperature shift in the dark palette. Dark mode uses warm near-black (`#0d0c0b`), not neutral cool dark (`#111111`).
## 15. Agent Prompt Guide
### Quick Color Reference
```
Light theme:
bg: #fbfaf8
bg-alt: #f5f3f0
surface: #ffffff
text: #121110
text-muted: #6b6663
text-soft: #9c9793
brand: #fe1c71
brand-deep: #e5005c
on-brand: #ffffff
border: rgba(18, 17, 16, 0.08)
border-strong: rgba(18, 17, 16, 0.16)
Dark theme (derived):
bg: #0d0c0b
surface: #1f1e1c
text: #f5f4f2
text-muted: #9c9793
brand: #fe1c71 ← same
border: rgba(245, 244, 242, 0.08)
```
### Example Component Prompts
1. **"Create a Picoko-style hero — warm near-white `#fbfaf8` canvas split 55/45. Left column: 72px headline in Outfit weight 900, tracking -0.03em, colour `#121110`; 18px / 400 sub-headline in `#6b6663`; one hot-pink `#fe1c71` pill CTA 'Get started free' at 32px radius / Outfit 600 / 16px / padding `12px 28px`. Right column: 1:1 before-after image comparison panel, white background, 16px radius, brand-pink drag handle at centre."**
2. **"Design a Picoko feature card — `#ffffff` background on `#fbfaf8` canvas, `1px solid rgba(18,17,16,0.08)` border, 16px radius, 24px padding, `rgba(18,17,16,0.06) 0 2px 12px` shadow. Icon at top (48px, brand-pink). Heading: Outfit 700 / 22px / `#121110`. Body: Outfit 400 / 16px / `#6b6663`. On hover, shadow deepens to `0 6px 24px`."**
3. **"Build a Picoko pricing tier — 3 cards in a row on `#fbfaf8` canvas. Default cards: `#ffffff`, 16px radius, `1px solid rgba(18,17,16,0.08)` border, 28px×24px padding. Featured (Pro) card: `2px solid #fe1c71` border, `rgba(254,28,113,0.12) 0 8px 32px -4px` shadow, pink eyebrow 'Most popular' at Outfit 600 / 12px / uppercase. Plan price: Outfit 800 / 48px. CTA: full-width pink pill 'Choose Pro' 32px radius."**
4. **"Compose a Picoko navigation — 64px header, `rgba(251,250,248,0.90)` background with `backdrop-filter: blur(16px)`. Wordmark left: Outfit 700 / `#121110`. Links centre: Outfit 500 / 15px / `#121110`, 8px radius hover fill `rgba(18,17,16,0.05)`. Right: ghost 'Sign in' + pink pill 'Get started' at `#fe1c71` / `#ffffff` / Outfit 600 / 15px / 32px radius / `12px 24px` padding."**
5. **"Render a Picoko before-after comparison panel — `#ffffff` surface, 16px radius, 1:1 aspect ratio, no padding (images bleed to radius). Left half shows original product snapshot; right half shows AI-generated studio shot on white background. Vertical drag handle at 50% position: 40px tall, `#fe1c71` pill-shaped bar, white arrow icons. Hover hint: 'Drag to compare' in Outfit 500 / 12px / `#9c9793` fading in at 500ms."**
6. **"Create a Picoko platform badge row — 3 neutral pill badges in a horizontal flex. Each: bg `rgba(18,17,16,0.06)`, text `#6b6663`, Outfit 500 / 12px, padding `6px 14px`, radius 9999. Labels: 'Shopify', 'Amazon', 'TikTok Shop'. Preceded by an eyebrow label 'WORKS WITH' in Outfit 600 / 12px / uppercase / 0.1em tracking / `#9c9793`."**
### Iteration Guide
1. **Start with the warm canvas.** If you're using `#f5f5f5` or `#fafafa`, it's cold. Picoko's `#fbfaf8` has a faint red-green warmth — run it through a colour picker and verify the R channel is ≥ the B channel.
2. **Brand pink once per visual unit.** In a hero, `#fe1c71` should appear once — the primary CTA. In a card grid, once per card at most (the CTA or a badge). The moment pink appears twice at similar visual weight, the hierarchy collapses.
3. **Weight 900 means weight 900.** If your Outfit headline is rendering at 800 or 700, the brand's signature loudness is gone. Confirm via DevTools computed styles that font-weight resolves to 900.
4. **32px radius on CTAs is non-negotiable.** An 8px or 12px radius on the primary CTA loses the consumer-SaaS register. If the design system forces a global radius, override it for CTAs specifically.
5. **Surface step before shadow.** Add the `#ffffff` card on `#fbfaf8` canvas first — that surface step delivers most of the depth. Add shadow (`0 2px 12px`) as a secondary reinforcer, not the primary depth cue.
6. **Keep `#c0004e` in your palette for pink text.** Whenever you need to write pink text at body size (12–16px), switch from `#fe1c71` to `#c0004e` — darker enough to pass WCAG AA on white while still clearly brand-adjacent.
7. **Dark mode: warm the near-black.** Don't use `#111111` or `#0f0f0f`. Picoko's dark canvas is `#0d0c0b` — the warmth matches the light palette's temperature. A cool dark ground creates a jarring inconsistency when the user toggles.
8. **CTA verbs: outcome, not process.** Replace "Try our AI" with "Generate photos." Replace "Sign up today" with "Start free." Every CTA should complete the sentence "I want to ___."
---
*Theme-toggle audit: score=7, signals=[theme-toggle-button-text, prefers-color-scheme-css, tailwind-dark-class]*
1. Visual Theme & Atmosphere
Picoko opens on a warm near-white canvas — #fbfaf8, a shade of off-white with just enough warmth to avoid clinical sterility. Against that ground, pure white cards (#ffffff) feel slightly lifted rather than flat, the difference between a studio wall and a sheet of paper. The headline is set in Outfit at 72px / weight 900, tracking at -0.03em — unapologetically heavy, a shout not a whisper. “Get studio-quality product photos in seconds.” The type doesn’t hedge; neither does the product.
The single chromatic moment is #fe1c71 — a blazing hot magenta-pink that reads like neon on warm white. It belongs exclusively to primary CTAs and brand marks. Nothing else on the page is pink. The discipline is intentional: by quarantining the colour, every appearance of #fe1c71 reads as an invitation to act. Picoko is solving the e-commerce seller’s oldest problem — product photography is slow, expensive, and requires equipment nobody has — so the brand needs to feel fast, confident, and slightly electric. The pink delivers that in a 50×50px swatch.
The hero layout is a split composition: a left column carries the headline, sub-headline, and a 32px pill primary CTA; the right side is a before-after image comparison panel with a 16px radius, showing the transformation from a snapshot to a polished studio shot. The before-after reveal is the product’s thesis made visible in a single scroll-above-the-fold moment. Radii move from 8px on nav chips to 16px on cards and comparison panels, finally to 32px on pill CTAs — a deliberate escalation that maps visual importance to roundness.
The page flows through a series of clean white-card feature blocks sitting on the warm canvas, each section separated by generous vertical rhythm (80–128px). Platform badges — “Shopify”, “Amazon”, “TikTok Shop” — appear as neutral pill tags. Testimonial cards use the standard white-surface pattern. Pricing tiers sit on white cards with a brand-pink border on the featured tier. Throughout, the warm canvas does the connective tissue work; the white surfaces do the lifting.
Dark mode inverts the canvas to near-black (#0d0c0b, warm-tinted to match the light palette’s temperature) and the body copy to near-white (#f5f4f2). The brand pink #fe1c71 is invariant — it doesn’t need to change, because the contrast ratio on both backgrounds is sufficient for CTAs (large text / UI) and the electric quality is the point regardless of theme.
Key Characteristics
- Warm near-white canvas
#fbfaf8— not paper-white, not cold grey, a considered warmth - Single brand accent
#fe1c71— hot magenta-pink, reserved exclusively for primary CTAs and brand marks - Outfit at 72px / weight 900 — heavy geometric grotesque; the loudest headline in the SaaS tier
- 32px pill primary CTAs — the signature shape, consumer-SaaS register
- 16px card and panel radius — before-after comparison panels, feature cards, pricing tiers
- 8px nav-chip radius — smaller, tighter, purposeful
- Before-after image slider hero — the product thesis demonstrated at first scroll
- White-surface cards on warm canvas — subtle lift without shadows at rest
- Light-first with a genuine dark mode toggle — both themes carry the brand pink
- Platform-badge vocabulary — “Shopify / Amazon / TikTok Shop” tags anchor the e-commerce context
2. Color Palette & Roles
Primary
- bg
#fbfaf8— warm near-white canvas; live-probed. The slightly warm tint — not#ffffff, not#f5f5f5— is the canvas temperature that makes pure white cards feel lifted without shadows. - text
#121110— near-black body copy; live-probed. Warm-shifted slightly from neutral#111111. - surface
#ffffff— pure white cards, panels, and comparison frame. Sits visibly above the#fbfaf8canvas. - bg-alt
#f5f3f0— slightly deeper warm-white for inset zones, footer bands, and subtle section dividers.
Brand & Accent
- brand
#fe1c71— hot magenta-pink; THE signature colour. Primary CTAs only. Do not use as a background fill larger than a button or badge. - brand-deep
#e5005c— pressed / active state; approximately 12% darker in perceived value, maintains the pink family. - brand-soft
rgba(254, 28, 113, 0.10)— pink wash for badge backgrounds, hover tints on selected nav items. - on-brand
#ffffff— white text on pink CTAs; 3.3:1 contrast (AA large / UI, flag for small text — see Section 9).
Interactive
- link
#121110— inline links match body copy in light mode; underlined for affordance. - link-hover
#fe1c71— brand pink on hover; the only chromatic shift in inline copy. - selected-bg
rgba(254, 28, 113, 0.08)— active nav state, selected filter chip. - disabled
#c3bfbb— faint warm-grey for disabled inputs and buttons.
Neutral Scale (Warm-tinted)
- #121110 — near-black body copy.
- #6b6663 — warm mid-grey for captions, helper text.
- #9c9793 — quiet labels, placeholder copy.
- #c3bfbb — disabled, faint echo text.
- #e5e2de — light warm-grey hairlines and dividers.
- #f5f3f0 — alt canvas, inset zones.
- #fbfaf8 — canvas ground.
- #ffffff — surface (card, panel).
All neutral steps are warm-tinted (red channel ≥ blue channel) to maintain palette cohesion with the warm canvas and the pink brand.
Surface & Borders
- surface-0 (canvas) —
#fbfaf8warm near-white. - surface-1 (card) —
#ffffffpure white. - surface-2 (elevated) —
#ffffff+rgba(18, 17, 16, 0.08) 0 4px 16pxshadow. - border —
rgba(18, 17, 16, 0.08)— 8% near-black hairline, warm-tinted. - border-strong —
rgba(18, 17, 16, 0.16)— emphasized rule, inputs at rest. - border-brand —
rgba(254, 28, 113, 0.30)— focus ring on inputs.
Shadow Colors
Picoko’s shadows use warm near-black at low opacity. The warm canvas absorbs shadows gently, so elevation is read primarily as surface step (#fbfaf8 → #ffffff) plus a subtle blur for floating elements. Brand-pink shadows are not used; the pink stays in fills.
Semantic
- success — bg
rgba(34, 197, 94, 0.10), text#15803d(green-700 on light). - warning — bg
rgba(234, 179, 8, 0.12), text#a16207(amber-700 on light). - danger — bg
rgba(239, 68, 68, 0.10), text#b91c1c(red-700 on light). - info — bg
rgba(254, 28, 113, 0.08), text#c0004e— borrows the brand pink at low saturation.
3. Typography Rules
Font Family
- Display & Body:
"Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif— Google Fonts’ geometric grotesque. Outfit has rounded stems and open apertures that read as friendly and confident; at weight 900 it is explosive; at 400 it is clean and legible. One family carries the entire system. - Mono:
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace— for numeric data in pricing tables, file size stats, and rare inline code. - OpenType features:
kernandligaalways enabled.tnum(tabular figures) andzeroenabled in mono.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | Outfit | 72px | 900 | 1.0 | -0.03em | Live-probed hero h1; “in seconds” punchline |
| Display LG | Outfit | 56px | 800 | 1.05 | -0.025em | Section hero headlines |
| H1 | Outfit | 48px | 800 | 1.08 | -0.02em | Page-level title |
| H2 | Outfit | 36px | 700 | 1.15 | -0.015em | Major section heading |
| H3 | Outfit | 28px | 700 | 1.2 | -0.01em | Feature group heading |
| H4 | Outfit | 22px | 600 | 1.3 | -0.005em | Card heading, pricing tier name |
| H5 | Outfit | 18px | 600 | 1.35 | 0 | Sub-card heading, nav section label |
| Eyebrow | Outfit | 12px | 600 | 1.4 | 0.1em | Uppercase pre-label: “FOR SHOPIFY SELLERS” |
| Body Large | Outfit | 18px | 400 | 1.6 | 0 | Hero lede, feature sub-headline |
| Body | Outfit | 16px | 400 | 1.55 | 0 | Default body copy |
| Body Medium | Outfit | 16px | 500 | 1.5 | 0 | UI body — nav links, card labels |
| Body Small | Outfit | 14px | 400 | 1.5 | 0 | Compact UI, helper text |
| Label | Outfit | 13px | 500 | 1.4 | 0 | Form labels, table headers |
| Caption | Outfit | 12px | 500 | 1.4 | 0.02em | Image captions, footnotes |
| Caption Tabular | mono | 12px | 500 | 1.4 | 0 | Price numbers, credit counts |
| Code | mono | 13px | 400 | 1.55 | 0 | Rare inline code |
Principles
- Weight 900 at 72px is the brand’s loudest statement. Outfit at black weight is unusual in SaaS — most brands cap at 700. Picoko uses it to signal that the product does something dramatic (transforming amateur snaps into studio shots).
- Single-family discipline. Outfit from eyebrow to body caption — no mixing with a serif or secondary sans. Consistency is the brand’s quiet confidence.
- Negative tracking only at display sizes. -0.03em at 72px, tapering to 0 by h4. Below h4, tracking is neutral or slightly open for captions.
- Optical sizing matters at 900. At maximum weight, letter spacing must be tighter than the font’s default — the -0.03em on the hero prevents the glyphs from feeling crowded against the heavy strokes.
- 400 body, never lighter. Outfit at 300 loses the brand’s warmth and reads as generic. Body stays at 400; UI emphasis steps to 500.
- Eyebrow at 0.1em tracking. Wider than most SaaS peers (0.05–0.08em) — the extra air at 12px makes the all-caps label feel designed rather than defaulted.
- Mono only for numeric data. Credit counts, file sizes, pricing figures benefit from
tnum(tabular figures) to align columns; body numbers use Outfit’s default proportional figures. - No italics in display. Italic weight is reserved for inline body emphasis and testimonial quotes. Never in headlines or CTAs.
4. Component Stylings
Buttons
Primary (Hot Pink Pill)
- Background:
#fe1c71. Text:#ffffff, Outfit 600 / 16px. - Padding:
12px 28px. Radius:32px(pill). No border. - Hover: bg →
#e5005c; transition200ms ease-standard. - Active: bg →
#cc0052. - Focus:
0 0 0 3px rgba(254, 28, 113, 0.35). - Use: Every primary CTA — Get started, Try for free, Generate now, See plans. The pill shape is non-negotiable.
Secondary (Outline Pill)
- Background: transparent. Text:
#121110, Outfit 600 / 16px. - Border:
1.5px solid rgba(18, 17, 16, 0.20). - Padding:
12px 28px. Radius:32px(pill). - Hover: bg →
rgba(18, 17, 16, 0.05), border →rgba(18, 17, 16, 0.35). - Focus:
0 0 0 3px rgba(18, 17, 16, 0.15). - Use: Twin to primary — See how it works, Watch demo, Compare plans.
Ghost (Quiet)
- Background: transparent. Text:
#121110, Outfit 500 / 15px. - Padding:
8px 16px. Radius:8px. No border. - Hover: bg →
rgba(18, 17, 16, 0.05). - Use: Nav links, inline secondary actions, footer utility links.
Icon Button
- Background:
#ffffff. Text/icon:#121110. - Padding:
10px. Radius:8px. Border:1px solid rgba(18, 17, 16, 0.10). - Hover: bg →
#f5f3f0. - Use: Before-after panel zoom, social share, copy, close.
Cards
Feature Card
- Background:
#ffffff. Border:1px solid rgba(18, 17, 16, 0.08). Radius:16px. Padding:24px. - Shadow:
rgba(18, 17, 16, 0.06) 0 2px 12pxat rest;rgba(18, 17, 16, 0.10) 0 6px 24pxon hover. - Use: Capability tiles, feature highlights, platform icons.
Before-After Panel
- Background:
#ffffff. Border:1px solid rgba(18, 17, 16, 0.10). Radius:16px. Padding:0. - Aspect ratio:
1 / 1on square product images;4 / 3on scene-mode wider shots. - Images bleed to the 16px corner radius. Drag handle is brand pink.
- Use: Hero and feature-section image comparison — the product’s primary demonstration.
Pricing Card
- Background:
#ffffff. Radius:16px. Padding:28px 24px. - Default: border
1px solid rgba(18, 17, 16, 0.08). - Featured: border
2px solid #fe1c71; optional brand-pink eyebrow “Most popular”. - Shadow on featured:
rgba(254, 28, 113, 0.12) 0 8px 32px -4px.
Testimonial Card
- Background:
#ffffff. Border:1px solid rgba(18, 17, 16, 0.06). Radius:16px. Padding:20px 24px. - Avatar: 40px circle. Quote text: Outfit 400 / 16px in
#121110. Attribution: Outfit 500 / 13px in#6b6663.
Badges, Tags, Pills
Brand Badge — bg rgba(254, 28, 113, 0.10), text #c0004e, Outfit 600 / 12px, padding 4px 12px, radius 9999. Use: “Free plan”, “New”, “Beta”.
Neutral Tag — bg rgba(18, 17, 16, 0.06), text #6b6663, Outfit 500 / 12px, padding 4px 10px, radius 9999. Use: Platform names — “Shopify”, “Amazon”, “TikTok Shop”.
Eyebrow Label — no chrome; Outfit 600 / 12px / uppercase / 0.1em tracking, colour #9c9793. Use: Section pre-label (“TRUSTED BY 10,000+ SELLERS”).
Inputs / Forms
Text Input
- Background:
#ffffff. Border:1px solid rgba(18, 17, 16, 0.16). Radius:8px. Padding:10px 14px. - Font: Outfit 400 / 16px. Placeholder:
#9c9793. - Focus:
0 0 0 3px rgba(254, 28, 113, 0.20)ring; border →#fe1c71. - Error: border →
#b91c1c, helper text in#b91c1cbelow. - Use: Sign-up email, onboarding fields, settings.
Select / Dropdown
- Same appearance as text input at rest.
- Open:
#ffffffbg,1px solid rgba(18, 17, 16, 0.12)border,16pxradius on the dropdown panel. - Option hover: bg →
rgba(254, 28, 113, 0.06).
Navigation
- Header height
64px. Backgroundrgba(251, 250, 248, 0.90)withbackdrop-filter: blur(16px)— lets the warm canvas bleed through on scroll. - Logo: Picoko wordmark in
#121110, Outfit 700. - Nav links: Outfit 500 / 15px, colour
#121110, padding6px 12px, radius8px. Hover: bg →rgba(18, 17, 16, 0.05). - Right-side: ghost “Sign in” + brand pink pill “Get started” (Outfit 600 / 15px).
- Mobile (<640px): hamburger collapses nav to a full-height sheet; links stack at 18px / 600. CTA remains visible at bottom of sheet.
Optional Components
Dropdown Menu — bg #ffffff, border 1px solid rgba(18, 17, 16, 0.08), radius 12px, shadow rgba(18, 17, 16, 0.12) 0 8px 24px -4px. Items: Outfit 400 / 15px, hover bg rgba(254, 28, 113, 0.06).
Tooltip — bg #121110, text #ffffff, radius 6px, padding 6px 10px, font Outfit 500 / 12px.
Toast — bg #ffffff, border 1px solid rgba(18, 17, 16, 0.10), radius 10px, padding 12px 16px, shadow rgba(18, 17, 16, 0.12) 0 6px 24px -4px. Icon-left pattern: success green, warning amber, error red.
Modal — bg #ffffff, radius 16px, shadow rgba(18, 17, 16, 0.20) 0 20px 48px -8px, max-width 540px. Backdrop: rgba(18, 17, 16, 0.50). Brand-pink close button on destructive actions.
5. Layout Principles
Spacing System
- Base unit: 4px.
- Scale: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160.
- Density: Chrome-level spacing is medium-dense (64–96px section rhythm); within-card spacing is tight (16–24px). The page reads approachable, not airy — a SaaS tool that respects the seller’s time.
Grid & Container
- Page max width:
1280px— standard SaaS frame. - Site gutter:
clamp(20px, 4vw, 56px)— comfortable on all viewports. - Grid: 12 columns with 24px gutters on desktop; collapses to 4 columns on tablet, 1 column on mobile.
- Hero layout: 55/45 left/right split — headline and CTA left, before-after panel right. Below tablet, stacks vertically: headline → CTA → comparison panel.
- Prose width: 720px maximum on text-heavy sections.
Whitespace Philosophy
Picoko’s whitespace is purposeful but not sparing. Section rhythm runs 80–128px between major blocks — generous enough to let each section breathe and register, tight enough to maintain urgency (the product is fast; the page should feel fast). Card padding is consistently 24px. Internal card spacing is 16px between elements. The warm canvas creates visual air even when spacing is moderate.
Section Cadence
- Hero (split headline + before-after panel) → Platform logos band (Shopify, Amazon, TikTok Shop) → How it works (3-step feature ladder) → Before-after gallery grid → Testimonials (card strip) → Pricing (3-tier cards) → Final CTA band (pink-accented) → Footer.
- The page alternates between warm-canvas ground and white-card clusters. Section breaks use vertical space; no horizontal rules. The pink CTA band near the footer uses
#fe1c71as a background — one of the rare instances where the brand colour fills a full-width surface (using#fffffftext above it).
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Decorative dividers, progress bar caps |
| Standard (sm) | 4px | Small badges, compact chips, tag inner radius |
| Comfortable (md) | 8px | Nav links, icon buttons, text inputs, dropdowns |
| Featured (lg) | 16px | Cards, comparison panels, pricing tiers, modals |
| Large (xl) | 24px | Hero panels on wide viewports, pricing featured highlight |
| Pill (CTAs) | 32px | Primary and secondary call-to-action buttons — the signature |
| Full | 9999px | Avatar circles, status dots, badge-neutral pills |
Picoko’s signature shape tension is the contrast between 8px utility elements and 32px pill CTAs. The nav links and inputs sit at 8px — functional, unobtrusive. The moment you look at a CTA, the 32px pill asserts “this is the action.” Cards at 16px sit in the middle register: friendly but structured. The before-after comparison panels also use 16px — the image content is editorial, not form-field utility.
There are no zero-radius surfaces at any user-visible level. Even progress bars cap their ends at 9999px. The brand has committed to roundness as a signal of approachability — a deliberate contrast to the sharp-cornered default of Shopify admin and Amazon Seller Central, where Picoko’s users spend their day.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — canvas #fbfaf8 | Page background, hero ground |
| 1 | Surface step — #ffffff | Cards, comparison panels, nav bar (no shadow) |
| 2 | rgba(18,17,16,0.06) 0 2px 12px | Default card shadow at rest |
| 3 | rgba(18,17,16,0.10) 0 6px 24px | Hovered cards, sticky nav on scroll |
| 4 | rgba(18,17,16,0.14) 0 8px 32px -4px | Dropdowns, tooltips, toasts |
| 5 | rgba(18,17,16,0.20) 0 20px 48px -8px | Modals, overlays |
Shadow Philosophy
Picoko’s primary depth cue is surface stepping (#fbfaf8 canvas → #ffffff card) — the same move as Krea’s tonal stepping, but in the warm-light register. Shadows appear as a secondary reinforcement: cards carry a faint 2px / 12px shadow at rest to give a paper-on-paper lift. On hover, the shadow deepens rather than the card scaling. Brand-pink shadows are used sparingly and only on the featured pricing tier, where a subtle rgba(254, 28, 113, 0.12) glow reinforces the recommended-plan hierarchy.
8. Interaction & Motion
Easing Curves
ease-standard:cubic-bezier(0.4, 0, 0.2, 1)— default for hover, focus, colour transitions.ease-emphasized:cubic-bezier(0.2, 0, 0, 1)— modal entry, drawer slide.ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1)— slight overshoot for the before-after drag handle snap; badge pop on first render.
Duration Buckets
- Fast (120ms) — colour transitions, border-colour focus, link hover tint.
- Standard (200ms) — button hover (bg, border), card shadow deepening, nav backdrop.
- Slow (320ms) — modal enter/exit, drawer slide, page section fade-in.
- Page (400ms) — route transitions, hero section reveal on load.
Per-Component Micro-States
- Primary button hover: bg
#fe1c71→#e5005cover 200ms; no transform, no scale. - Secondary button hover: border opacity 0.20 → 0.35; bg fills to 5% near-black — both over 200ms.
- Card hover: shadow
0 2px 12px→0 6px 24pxover 200ms; border opacity barely shifts. - Before-after drag: drag handle snaps to position with
ease-spring, 120ms. Image reveal isclip-path: inset(0 X% 0 0)updating onpointermove— no easing (direct tracking); snap to final position on release usesease-spring200ms. - Input focus: pink ring fades in over 120ms; border shifts to
#fe1c71simultaneously. - Badge pop: on first appearance (New, Beta), badge scales
0.8 → 1.0withease-springover 240ms. - Nav hover: bg fill
0 → rgba(18,17,16,0.05)over 120ms.
Page Transitions
Below-fold sections use IntersectionObserver to fade in at 85% viewport, 320ms duration, 8px translate-up. No looping animations at rest. The before-after hero panel may auto-reveal on load (slides from 100% to 50% coverage) using ease-emphasized over 800ms — a one-shot demo of the product.
Reduced Motion
@media (prefers-reduced-motion: reduce) — all transforms collapse to opacity-only; before-after auto-reveal skips the slide and cuts to final position; ease-spring replaced with ease-standard; durations halve.
9. Accessibility & A11y
Contrast Pairs
#121110on#fbfaf8(body text on canvas): ~12.6:1 — AAA at all sizes.#121110on#ffffff(body on card): ~13.2:1 — AAA at all sizes.#6b6663on#fbfaf8(muted captions on canvas): ~5.1:1 — AA at body sizes.#9c9793on#ffffff(soft helper on card): ~3.8:1 — AA large only; keep at 14px+ or not relied on for essential info.#ffffffon#fe1c71(on-brand text): ~3.3:1 — AA large / UI (passes for text ≥18px normal or ≥14px bold, and for UI components). Fails for small body text (<18px / <14px bold). Use#fe1c71as a CTA fill with white text only at the button’s16px / 600size or larger. Never as a background for small paragraph text.#fe1c71on#ffffff(pink text on white): ~3.3:1 — same caveat. Acceptable for large display labels and icon glyphs; not for 12px body copy.#c0004eon#ffffff(info-text on card): ~5.5:1 — AA at body sizes. Prefer#c0004eover#fe1c71wherever pink text appears at small sizes.
Focus Indicators
- Default ring:
0 0 0 3px rgba(254, 28, 113, 0.35)with 2px offset on all interactive elements. - Inputs: ring expands from the border — border shifts to
#fe1c71, ring adds at 3px / 20% opacity. - All interactive surfaces show a visible focus state. The pink ring provides clear contrast on both the warm canvas and white card surfaces.
ARIA Patterns
- Navigation:
<nav aria-label="Main">with skip-link to#main-content. - Before-after slider:
<div role="slider" aria-label="Before / after comparison" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">— drag handle keyboard-operable with arrow keys. - Before image:
<img alt="Product photo before: original smartphone snapshot on wooden table">. - After image:
<img alt="Product photo after: studio-quality white background with professional lighting">. - Dialog:
role="dialog" aria-modal="true" aria-labelledbywith focus trap and Esc-to-close. - Live regions:
aria-live="polite"for generation-complete status messages.
Keyboard Navigation
- Tab order: skip-link → masthead nav → primary CTA → before-after panel drag handle → feature section → pricing → footer.
- Before-after slider: Left/Right arrow keys adjust reveal by 5%; Home/End go to 0%/100%.
- Esc closes dropdowns, modals, and the mobile nav sheet.
Screen Reader Hints
- Before-after panels carry descriptive
alttext on both images. - Icon-only buttons carry
aria-label. - The brand-pink featured pricing badge carries
aria-label="Recommended plan".
Reduced Motion
Honoured globally. Before-after auto-reveal skips animation; all translate-up fades collapse to opacity-only; badge pop removes the scale.
10. Responsive Behavior
Breakpoints
| Name | Width | Use |
|---|---|---|
| Mobile | < 640px | Single-column stack; full-bleed comparison panels |
| Tablet | 640–1024px | 2-column feature grid; headline above panel stacked |
| Desktop | 1024–1280px | Full split hero; 3-column feature grid; full nav |
| Wide | > 1280px | Page locks at 1280px; gutters expand |
Touch Targets
- Minimum tap target: 44×44px on all interactive elements.
- Primary pill CTAs on mobile: full-width (100%) at 48px height minimum.
- Before-after drag handle: 44px touch area regardless of visual handle size.
- Nav hamburger: 44×44px minimum.
Collapsing Strategy
- Header: full nav at ≥1024px; hamburger sheet below. Primary CTA always visible — on mobile it migrates to the bottom of the hamburger sheet and bottom of the hero section.
- Hero: 55/45 split → headline-first stack (headline → CTA → comparison panel) on mobile.
- Headline: 72px → 52px → 40px across desktop / tablet / mobile.
- Feature grid: 3-up → 2-up → 1-up across breakpoints.
- Section spacing: 128px → 96px → 64px across sizes.
- Card padding: 24px → 20px on mobile.
Image Behavior
- Before-after panels: serve
srcsetwith 2× resolution assets for Retina; aspect ratio locked via CSSaspect-ratio. On mobile, height is capped at100vw(square). - Feature images: native lazy-loading; descriptive
alt. - Hero panel: may use a static image on initial paint, swapping to interactive comparison on
loadevent.
Container Queries
Used inside feature cards to switch icon-top to icon-left layout when the card container width crosses 280px — allows the 3-column grid to reflow gracefully without global breakpoint coupling.
11. Content & Voice
Tone
Fast, confident, and seller-first. Picoko writes for the Shopify merchant or Amazon seller who is juggling product launches with zero budget for a photographer. The copy is direct, quantified where possible (“studio-quality photos in seconds”), and never condescending. No AI hype jargon (“harness the power of…”); just the outcome the seller cares about.
Microcopy Patterns
- Button verbs: “Get started,” “Try for free,” “Generate photos,” “See plans,” “Upload product.” Never “Begin your journey” or “Unlock AI power.”
- Eyebrows / labels: “FOR SHOPIFY SELLERS,” “USED BY 10,000+ BRANDS,” “NO PHOTOGRAPHER NEEDED.” Plain, uppercase, factual.
- Feature descriptions: one sentence — the capability, then the benefit. “Remove backgrounds in one click — your product, ready for any platform.”
- Error messages: “Couldn’t generate that image. Try a different background or upload a clearer photo.” — diagnose, suggest, move on.
- Success confirmations: “Photo generated. Download or edit.” Brief, actionable.
- Loading states: “Generating…” with a subtle pink progress bar. No “Our AI is thinking magical thoughts…”
Empty States
- “Upload your first product photo to get started.” — clear invitation, no guilt.
- “No generated photos yet. Try ‘Studio background’ to create your first batch.” — point to a specific action.
- Never uses “Oops!” Never implies the user did something wrong unless they actually did.
CTA Verb Conventions
- Primary hero: “Get started free,” “Generate photos now,” “Try Picoko”
- Secondary hero: “See how it works,” “Watch a demo”
- Pricing: “Start free,” “Choose Pro,” “Contact sales”
- Footer: “Pricing,” “Integrations,” “Blog,” “Help”
The voice is outcome-first: tell the seller what they’ll have (studio-quality photos, in seconds, for Shopify), not what Picoko is doing internally. The product is the magic; the copy is the shortcut to the result.
12. Dark Mode & Theming
Picoko ships a genuine light + dark theme toggle — a first-class UI element in the nav, not an afterthought. The live-probed default is light (the warm near-white canvas #fbfaf8). Dark mode inverts to a warm near-black canvas (#0d0c0b) with near-white body copy (#f5f4f2).
What Changes in Dark Mode
- Canvas:
#fbfaf8→#0d0c0b. Warm temperature maintained in the dark shift (warm near-black, not cool neutral). - Surface:
#ffffff→#1f1e1c. Cards remain visibly lighter than the canvas. - Text:
#121110→#f5f4f2. Body copy stays near-white, not full white, to avoid harshness. - Borders:
rgba(18,17,16,0.08)→rgba(245,244,242,0.08). Same 8% opacity, flipped channel. - Shadows: warm-dark at low opacity replace the warm-light versions.
What Does Not Change
- Brand pink
#fe1c71— invariant across both themes. The contrast ratio on dark canvas (#0d0c0b) is approximately 3.9:1 — slightly higher than on light, still AA-large for CTAs. The electric quality of the pink is maintained and arguably enhanced against the dark ground. - Radius scale — unchanged.
- Typography — unchanged; Outfit at all weights and sizes is stable across themes.
- Motion — unchanged.
Theme Persistence
Preference is written to localStorage under a key (e.g. picoko-theme). On next visit, the stored value is applied before first paint (inline script in <head>) to prevent flash of wrong theme. data-theme="light" or data-theme="dark" on <html> drives all CSS custom property swaps via :root[data-theme="dark"] { ... } blocks. prefers-color-scheme is the initial fallback when no localStorage key exists.
Before-After Panels in Dark Mode
The comparison images themselves are unaffected by theme (they show the user’s product). The panel frame — border, drag handle — flips to dark-theme tokens. The brand-pink drag handle remains #fe1c71 in both themes.
13. Lineage & Influences
Picoko inherits the joyful-SaaS playbook refined by Framer, Luma, and modern freemium B2C tools: a geometric sans at maximum weight, a single electric accent colour quarantined to primary actions, and a warm canvas that reads approachable rather than corporate. The 32px pill CTA places Picoko in the same shape language as Notion, Pitch, and early Framer — a register that says “this is a tool people choose, not enterprise software people are assigned.”
Outfit as the type system is the key differentiator from the design-tool SaaS tier (which defaults to Inter, Söhne, or Suisse Intl). Outfit’s rounded stems and open apertures read as warm and friendly at 400; at 900 they become bold without feeling aggressive. The choice signals that Picoko’s user is a Shopify merchant, not a design-system engineer.
The before-after comparison slider is a well-established pattern in image-editing SaaS — Luminar, Lightroom mobile, Canva’s background remover — and Picoko uses it as the hero’s primary product demonstration. It’s a borrowed pattern, executed at 16px radius with a brand-pink drag handle to make it distinctly Picoko.
What Picoko rejects: dark canvases (Krea, Midjourney, Runway), monochrome restraint (Linear, Vercel), editorial neutrality (Stripe), and AI-purple gradients (every third AI startup). The brand wants to be unmistakably warm, bright, and fast — the opposite register from the creative-AI gallery aesthetic.
Named influences:
- Krea — AI image-generation SaaS peer; Picoko applies similar single-accent discipline to the opposite palette (warm light instead of absolute dark). https://krea.ai
- Midjourney — reference for AI image-generation brand positioning; Picoko explicitly differentiates by going warm/light where Midjourney goes dark/editorial. https://www.midjourney.com
- Shopify — primary distribution platform for Picoko’s end-customers; Polaris design language informs e-commerce UI conventions that sellers already know. https://www.shopify.com
- Outfit (Google Fonts) — the typeface that carries the entire system; geometric grotesque with rounded stems chosen for friendly-SaaS warmth at heavy weights. https://fonts.google.com/specimen/Outfit
- Framer — modern playful-SaaS aesthetic reference: pill CTAs, warm canvas, heavy geometric sans, freemium conversion UX patterns. https://www.framer.com
- Canva — before-after image comparison patterns; approachable creative-tool register aimed at non-designer users. https://www.canva.com
14. Do’s and Don’ts
Do
- Do use
#fe1c71for every primary CTA — and only for primary CTAs and brand marks. One use, one role, maximum impact. - Do set hero headlines in Outfit weight 900 at 72px with -0.03em tracking. The heaviness is the brand’s loudest signal.
- Do maintain the warm canvas temperature.
#fbfaf8is not#f5f5f5or#fafafa— the warmth matters. - Do use 32px pill shape for primary and secondary CTAs. Never 8px or straight-edge for a primary action.
- Do use 16px radius on cards and comparison panels — the brand’s mid-tier signature shape.
- Do keep white cards (
#ffffff) on the warm canvas (#fbfaf8) — the surface step is the primary depth cue. - Do use
#c0004e(darker pink) for small-size pink text where contrast matters — never#fe1c71at body size. - Do show a before-after image comparison as the hero’s right-column content — it demonstrates the product thesis in a single glance.
- Do add the
aria-labeland keyboard controls on the before-after slider — it’s a non-standard interactive element. - Do keep the brand pink invariant across light and dark themes.
- Do pace sections at 80–128px vertical rhythm. The page should feel fast but not anxious.
- Do write CTA verbs in outcome-first imperative: “Get studio-quality photos,” “Generate now,” “See plans.”
Don’t
- Don’t use
#fe1c71as a background for a full-width section unless it is an intentional CTA band (bottom of page). A pink hero canvas would overwhelm. - Don’t use
#fe1c71as body text at small sizes — the 3.3:1 contrast fails WCAG AA for text below 18px normal / 14px bold. - Don’t mix a second accent colour into the system. The pink’s impact depends on isolation.
- Don’t use weights below 600 for CTAs, or below 400 for body. Outfit at 300 loses brand warmth.
- Don’t use a dark canvas for the marketing surface — the product’s visual brand is warm, light, and fast.
- Don’t use shadow-only depth — always pair with the surface step (
#fbfaf8→#ffffff). - Don’t apply negative tracking below h4 — Outfit’s openness at body sizes is part of its warmth; closing the tracking looks forced.
- Don’t use sharp 0px or 4px radius on CTAs — pill shape is the non-negotiable signature.
- Don’t use purple, indigo, or gradient-mesh AI aesthetics — Picoko differentiates by being the warm, fast, approachable tool in the category.
- Don’t add exclamation marks or hyperbole to CTA copy. The product’s value is self-evident; the copy just names the outcome.
- Don’t use Outfit weight 900 below 36px — it becomes too heavy and loses legibility at body scales.
- Don’t ignore the warm temperature shift in the dark palette. Dark mode uses warm near-black (
#0d0c0b), not neutral cool dark (#111111).
15. Agent Prompt Guide
Quick Color Reference
Light theme:
bg: #fbfaf8
bg-alt: #f5f3f0
surface: #ffffff
text: #121110
text-muted: #6b6663
text-soft: #9c9793
brand: #fe1c71
brand-deep: #e5005c
on-brand: #ffffff
border: rgba(18, 17, 16, 0.08)
border-strong: rgba(18, 17, 16, 0.16)
Dark theme (derived):
bg: #0d0c0b
surface: #1f1e1c
text: #f5f4f2
text-muted: #9c9793
brand: #fe1c71 ← same
border: rgba(245, 244, 242, 0.08)Example Component Prompts
-
“Create a Picoko-style hero — warm near-white
#fbfaf8canvas split 55/45. Left column: 72px headline in Outfit weight 900, tracking -0.03em, colour#121110; 18px / 400 sub-headline in#6b6663; one hot-pink#fe1c71pill CTA ‘Get started free’ at 32px radius / Outfit 600 / 16px / padding12px 28px. Right column: 1:1 before-after image comparison panel, white background, 16px radius, brand-pink drag handle at centre.” -
“Design a Picoko feature card —
#ffffffbackground on#fbfaf8canvas,1px solid rgba(18,17,16,0.08)border, 16px radius, 24px padding,rgba(18,17,16,0.06) 0 2px 12pxshadow. Icon at top (48px, brand-pink). Heading: Outfit 700 / 22px /#121110. Body: Outfit 400 / 16px /#6b6663. On hover, shadow deepens to0 6px 24px.” -
“Build a Picoko pricing tier — 3 cards in a row on
#fbfaf8canvas. Default cards:#ffffff, 16px radius,1px solid rgba(18,17,16,0.08)border, 28px×24px padding. Featured (Pro) card:2px solid #fe1c71border,rgba(254,28,113,0.12) 0 8px 32px -4pxshadow, pink eyebrow ‘Most popular’ at Outfit 600 / 12px / uppercase. Plan price: Outfit 800 / 48px. CTA: full-width pink pill ‘Choose Pro’ 32px radius.” -
“Compose a Picoko navigation — 64px header,
rgba(251,250,248,0.90)background withbackdrop-filter: blur(16px). Wordmark left: Outfit 700 /#121110. Links centre: Outfit 500 / 15px /#121110, 8px radius hover fillrgba(18,17,16,0.05). Right: ghost ‘Sign in’ + pink pill ‘Get started’ at#fe1c71/#ffffff/ Outfit 600 / 15px / 32px radius /12px 24pxpadding.” -
“Render a Picoko before-after comparison panel —
#ffffffsurface, 16px radius, 1:1 aspect ratio, no padding (images bleed to radius). Left half shows original product snapshot; right half shows AI-generated studio shot on white background. Vertical drag handle at 50% position: 40px tall,#fe1c71pill-shaped bar, white arrow icons. Hover hint: ‘Drag to compare’ in Outfit 500 / 12px /#9c9793fading in at 500ms.” -
“Create a Picoko platform badge row — 3 neutral pill badges in a horizontal flex. Each: bg
rgba(18,17,16,0.06), text#6b6663, Outfit 500 / 12px, padding6px 14px, radius 9999. Labels: ‘Shopify’, ‘Amazon’, ‘TikTok Shop’. Preceded by an eyebrow label ‘WORKS WITH’ in Outfit 600 / 12px / uppercase / 0.1em tracking /#9c9793.”
Iteration Guide
- Start with the warm canvas. If you’re using
#f5f5f5or#fafafa, it’s cold. Picoko’s#fbfaf8has a faint red-green warmth — run it through a colour picker and verify the R channel is ≥ the B channel. - Brand pink once per visual unit. In a hero,
#fe1c71should appear once — the primary CTA. In a card grid, once per card at most (the CTA or a badge). The moment pink appears twice at similar visual weight, the hierarchy collapses. - Weight 900 means weight 900. If your Outfit headline is rendering at 800 or 700, the brand’s signature loudness is gone. Confirm via DevTools computed styles that font-weight resolves to 900.
- 32px radius on CTAs is non-negotiable. An 8px or 12px radius on the primary CTA loses the consumer-SaaS register. If the design system forces a global radius, override it for CTAs specifically.
- Surface step before shadow. Add the
#ffffffcard on#fbfaf8canvas first — that surface step delivers most of the depth. Add shadow (0 2px 12px) as a secondary reinforcer, not the primary depth cue. - Keep
#c0004ein your palette for pink text. Whenever you need to write pink text at body size (12–16px), switch from#fe1c71to#c0004e— darker enough to pass WCAG AA on white while still clearly brand-adjacent. - Dark mode: warm the near-black. Don’t use
#111111or#0f0f0f. Picoko’s dark canvas is#0d0c0b— the warmth matches the light palette’s temperature. A cool dark ground creates a jarring inconsistency when the user toggles. - CTA verbs: outcome, not process. Replace “Try our AI” with “Generate photos.” Replace “Sign up today” with “Start free.” Every CTA should complete the sentence “I want to ___.”
Theme-toggle audit: score=7, signals=[theme-toggle-button-text, prefers-color-scheme-css, tailwind-dark-class]
Drop picoko into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add picoko 2 · ship landing page
npx agentkit init --design picoko