https://www.niftic.com/_app/immutable/nodes/78.BYUugem2.js

1import"../chunks/DBavZ5B7.js";import{w as e,i as t,l as n,s as a,a as i,x as o,f as s}from"../chunks/B4WZX-xg.js";import{W as r,a as l,b as h}from"../chunks/Cq0VEMLs.js";import p from"../chunks/CCqedOQv.js";var d=s("<!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!>",1);function g(s){let g=o("default"),c={title:"Ready to get started?",cta:"Contact Us"};{const o=(e,o)=>{var s=d(),r=n(s);l(r,{type:"text",content:"From brand to build, pHathom has the tools to tell their story, earn trust, and start scaling their mission fast. ",cta:!0,get layout(){return t(g)},get onLearnMore(){return(null==o?void 0:o()).toggleLayout}});var p=a(r,2);l(p,{type:"image",src:"/images/phathom/logo.png",alt:"pHathom Logo",lg:8});var c=a(p,2);l(c,{type:"slideshow",aspectRatio:"1/1",srcs:["/images/phathom/icon-1.png","/images/phathom/icon-2.png","/images/phathom/icon-3.png"],caption:"Designing a logo that reflects the brand's vision with a progressive and distinctive bold lettering.",lg:4});var m=a(c,2);h(m,{type:"image",src:"/images/phathom/desktop-home.png",scrolling:!0,screenType:"desktop",backgroundColor:"#CFD6DD",caption:"Design principles like priming guide users through complex ideas and provide extra context for increased comprehension.",alt:"Design principles like priming guide users through complex ideas and provide extra context for increased comprehension.",lg:12});var u=a(m,2);l(u,{type:"image",src:"/images/phathom/typography.png",alt:"pHathom Typography",lg:6,aspectRatio:"1/1"});var w=a(u,2);l(w,{type:"image",src:"/images/phathom/color-palette.png",alt:"pHathom Color Palette",lg:6,caption:"The pHathom palette is inspired by the ocean, incorporating custom names that pay homage to the environment."});var b=a(w,2);h(b,{type:"image",src:"/images/phathom/how-it-works-desktop.png",scrolling:!1,screenType:"desktop",backgroundColor:"#5A7488",alt:"Desktop screen showing the 'How It Works' page of the pHathom website",lg:12});var y=a(b,2);l(y,{type:"image",src:"/images/phathom/billboard.png",alt:"pHathom Billboard",lg:12});var f=a(y,2);l(f,{type:"image",src:"/images/phathom/stationary.png",alt:"pHathom Stationary",caption:"The refreshed wordmark puts clarity first, helping pHathom show up as serious, science-backed, and ready to scale.",aspectRatio:"1/1",lg:4});var v=a(f,2);h(v,{type:"images",srcs:["/images/phathom/our-technology-mobile-1.png","/images/phathom/our-technology-mobile-2.png"],screenType:"mobile",scrolling:!1,lgStart:7,lgEnd:13,aspectRatio:"1/1",backgroundColor:"#5A7488",caption:"For an organization doing groundbreaking work in carbon removal, we paired clean visuals with curated photography to turn a complex idea into something tangible and trustworthy.",alt:"For an organization doing groundbreaking work in carbon removal, we paired clean visuals with curated photography to turn a complex idea into something tangible and trustworthy."});var k=a(v,2);h(k,{type:"image",src:"/images/phathom/key-features-desktop.png",scrolling:!1,screenType:"desktop",backgroundColor:"#5A7488",alt:"Desktop screen showing the key features page of the pHathom website",lg:12}),i(e,s)};r(s,{get project(){return p},get details(){return"<p>\n\tpHathom is on a mission to reduce the massive buildup of CO₂ in our atmosphere by safely transforming it into something\n\tstable. Their breakthrough technology captures and converts billions of tons of carbon into bicarbonate that can be\n\tsecurely stored in the ocean, helping mitigate one of the planet's most pressing problems.\n</p>\n<p>\n\tIn a new phase of growth, they needed a credible and clear digital presence. Something tangible to move investors,\n\tscientists, and community members forward—a site that felt as real, science-forward, and thoughtful as the work itself.\n</p>\n<p>\n\tWe stepped in with just a few clear asks from the pHathom team: make it quick, make it editable, and keep it efficient.\n\tFor some, those might sound like constraints. For us, it was a chance to do what we do best—build something strategic,\n\tstructured, and sharp.\n</p>\n<br />\n<h4>Smart strategy, fast execution</h4>\n<p>\n\tThe website needed to do two things incredibly well:\n</p>\n<ul>\n\t<li>Clearly explain how the tech works, without overwhelming users</li>\n\t<li>Build trust with people who might want to fund it or utilize it</li>\n</ul>\n<p>\n\tWe led with a structured, component-based approach, drawing from our internal design system to accelerate the build\n\twithout compromising thoughtfulness. This decision didn't just make the site faster to launch; it made it easier to\n\tmaintain, adapt, and evolve over time.\n</p>\n<p>\n\tUsing proven, pre-vetted modules allowed us to spend more time on what mattered: shaping a cohesive brand experience,\n\taligning messaging to the mission, and building a site that's both lightweight and impactful.\n</p>\n<br />\n<h4>Starting off on the right tone</h4>\n<p>\n\tEven with templates in place, this wasn't just plug-and-play. The content led the design. We started with tone,\n\tcollaborating closely with pHathom to land on a voice that felt confident, credible, and stripped of fluff. Then we\n\tmapped content priorities for launch, knowing that some pieces could evolve later as the story grew.\n</p>\n<p>\n\tWe kicked things off with collaborative working sessions to define two essentials:\n</p>\n<ul>\n\t<li>\n\t\tWhat kind of tone did we want to strike? Not just in the copy, but through typography, color, and overall feel.\n\t</li>\n\t<li>\n\t\tWhat content needed to be prioritized for launch? What would serve day one goals, and what could evolve over time?\n\t</li>\n</ul>\n<p>\n\tTogether with the pHathom team, we landed on a voice that felt confident, credible, and clean. From there, we\n\tworkshopped key messaging, refined headlines, and tightened CTAs, ensuring every word moved people toward clarity, not\n\tcomplexity.\n</p>\n<h4>Tools to move the mission forward</h4>\n<p>\n\tWhat began as a straightforward website quickly expanded into a multi-part brand sprint to ensure consistency beyond the\n\tsite. By the end of our collaboration, we delivered:\n</p>\n<ul>\n\t<li>A refined wordmark</li>\n\t<li>A modular, mission-aligned website</li>\n\t<li>Core brand guidelines (logo usage, color systems, and visual tone)</li>\n\t<li>Custom PowerPoint templates for team bios, data storytelling, and investor decks</li>\n</ul>\n<p>\n\tThese tools helped the pHathom team bridge the gap between web and pitch—arming them with assets to 

1show up prepared and\n\taligned, even in fast-moving conversations.\n</p>\n<h4>A wordmark with purpose</h4>\n<p>\n\tBefore jumping into web design, we took a close look at the brand's wordmark. The original mark hinted at the periodic\n\ttable—a natural visual entry point that aligned with the team's scientific approach and name. But the execution lacked\n\tclarity and structure, especially at small sizes.\n</p>\n<p>\n\tWe saw an opportunity to refine the mark in a way that would quietly reinforce pHathom's credibility. By tightening the\n\tletterforms, improving legibility, and introducing more balanced spacing, we brought visual order and strength to a\n\tbrand rooted in science.\n</p>\n<p>\n\tThe updated wordmark feels clear, intentional, and grounded. When paired with the logo, it strikes a balance between\n\tprofessionalism and approachability—subtle but strong, just like the technology it represents.\n</p>\n\n<h4>Efficient and thoughtful design principles</h4>\n<p>\n\tEvery visual decision was made with usability in mind. While the site used Niftic's component library, we customized the\n\texperience to support key interactions and messaging.\n</p>\n<p>Core UX principles we applied:</p>\n<ul>\n\t<li>\n\t\t<strong>Progressive Disclosure:</strong> Complex scientific explanations were structured into expandable modules, letting users choose\n\t\ttheir depth of engagement.\n\t</li>\n\t<li>\n\t\t<strong>Priming & Visual Cues:</strong> Icons helped draw attention to essential information and aided in digestibility.\n\t</li>\n\t<li>\n\t\t<strong>Clear CTAs:</strong> Highlighted in a warm yellow against the cooler palette, calls to action were designed for clarity and\n\t\tmovement.\n\t</li>\n</ul>\n<p>\n\tThe final palette—stately blues, soft neutrals, and warm highlights—was selected to reflect both the technical\n\tlegitimacy and human mission of the work. We also curated a ready-to-use image library and visual assets to support\n\tfuture storytelling.\n</p>\n<p>\n\tWe also structured the website so that investors and stakeholders could move through the story easily, gain an\n\tunderstanding of the science, and leave with a strong sense of who's behind it.\n</p>\n\n<h4>Real, ready, and built to evolve</h4>\n<p>\n\tWith designs approved, our engineering team moved quickly to bring the site to life. We built the site using our\n\tinternal component system—an approach that streamlined development without sacrificing flexibility or polish.\n</p>\n<p>\n\tBecause the system is made up of well-tested, modular building blocks, it allowed us to:\n</p>\n<ul>\n\t<li>Move efficiently without reinventing the wheel</li>\n\t<li>Ensure consistency across screens and breakpoints</li>\n\t<li>Reduce technical debt by using scalable, lightweight code</li>\n\t<li>Make it easier for pHathom to update and expand the site over time</li>\n</ul>\n<p>\n\tWe handled everything from environment setup to deployment, ensuring a stable, secure foundation at launch. Once live,\n\twe walked the pHathom team through the CMS, provided documentation, and stayed on for a light-touch support window to\n\tcover any post-launch questions. This clean build gave the pHathom team exactly what they needed—something real, usable,\n\tand ready to grow with them.\n</p>\n<p>\n\tFor early-stage teams with bold missions, clarity is as important as innovation. This project was more than a website—it\n\twas a strategic sprint to build belief, invite partnership, and lay the groundwork for scaling a serious solution to a\n\tglobal problem.\n</p>\n<p>\n\tAnd it's just the beginning.\n</p>\n"},get contactCTA(){return c},get layout(){return t(g)},set layout(t){e(g,t,!0)},children:o,$$slots:{default:!0}})}}export{g as component};