Pure white ground, sunrise gradient reserved, and motion that behaves.
Everything below is the live system this website runs on, not a mockup of one. The colors are the same tokens, the type is the same stack, and the motion demos use the same code as the homepage. Click any swatch to copy its hex.
Foundation
What the brand stands for.
Cafiyn is The Go-To-Market Engine for founders. The brand exists to make complex software feel calm, human, and worth trusting. Four ideas decide every design call.
Pure white, product-sharp
A clean white ground with no atmospheric wash. The logo gradient is the only warm surface, so it stays an event on every page and never fades into wallpaper.
Reduce before you add
Every element earns its place. When a section can be removed without loss, it is removed.
Tactile, physical
Surfaces catch light and press back. Nothing is a flat rectangle floating in space.
Clarity is the feature
Plain words, honest comparisons, no jargon padding. If a sentence needs a second read, rewrite it.
Logo
One wordmark, used carefully.
The Cafiyn wordmark carries a gradient drawn from the sunrise palette. In running copy it always appears with the trademark mark: .
On white, preferred
On ink, knocked out to white
Clear space: the height of the C on every side
Do
Keep the full wordmark legible at 20px height or larger.
Pure white does the work, the sunrise gradient leads (used only twice on any page), and six tone tokens keep the engine legible at a glance. Click a swatch to copy its hex.
Neutrals, the paper and the ink
Sunrise gradient, the one warm surface
The logo gradient (#FF3131 → #FF914D) is reserved for two places on the site: the “highlight” word in an H1, and the primary CTA. Anywhere else it appears, whether a section band, a card wash, or a badge fill, it stops reading as brand. Consume with var(--t-grad) as a background, or with -webkit-background-clip: text for text.
Sunrise accent (secondary)
The yellow-family accent is retained for tint fills and hover states where the full gradient would be too loud: badge chips, hover glow, subtle icon fills.
Product tones, one per product
Cafiyn Lens#7C5A8A--t-plum
Guides + editorial#7BB89F--t-mint
Cafiyn FlyWheel#C97B58--t-clay
Accent + highlights#FABC5F--t-sun
Enterprise + trust#6A94B8--t-sky
Contrast rule. Body text is always Ink or Ink 2 on white. The sunrise accent never carries small text on its own: use Sun ink on a Sun fill, or Ink on Sun light.
Typography
Three families, one job each.
A geometric sans for headlines, a serif for reading, and a neutral sans for anything numeric. Mixing their roles is the fastest way to break the brand.
Manrope--t-fdDisplay and headingsWeights 600, 700
Tight tracking at large sizes. Set headline case, never all caps.
The Go-To-Market Engine
Crimson Text--t-fbBody and long-formWeights 400, 600
A serif for reading. Carries every paragraph, policy, and article on the site.
Technology should remove complexity, not create it.
Tabular figures for metrics, eyebrows, buttons, and navigation.
$128,500 revenue generated
Surfaces
Light falls from the top left.
Every surface uses a dual-tone shadow: a white highlight above left, a warm shadow below right. The light source never moves, which is what keeps the whole site feeling like one physical object.
Raised--t-neo-out
Cards, panels, anything that sits above the page.
Subtle--t-neo-sm
Chips, pills, small tiles, dense grids.
Lifted--t-neo-lg
Hover state and hero-level moments.
Pressed--t-neo-in
Inputs, wells, and inset list rows.
18px--t-r
28px--t-r-l
40px--t-r-xl
999pxpills and chips
Motion
Motion that behaves.
Animation exists to explain a relationship or reward an intent, never to decorate. Everything below is a live demo of the behavior it names, driven by the same attributes used across the site.
01One easing curvecubic-bezier(.22, 1, .36, 1)
Fast out, slow settle. The springy variant is reserved for elements that pop in.
02Reveal once200ms to 800ms
Content animates in a single time. Nothing loops in the reader's peripheral vision while they read.
03Always escapableprefers-reduced-motion
Every effect is disabled at the system level for readers who ask for it. Content never depends on motion.
Reveal on scroll.t-fade
Sections fade and rise once as they enter the viewport. Add .d1 to .d5 to stagger siblings.
Tilt[data-tilt="6"]
Cards rotate slightly toward the cursor. Values run 3 to 6 degrees. Never more.
Magnetic[data-magnet="0.25"]
Primary buttons drift toward the pointer, then spring back.
Count up[data-count="128500"]
Numbers animate from zero when scrolled into view, once per page load.
Parallax[data-parallax="0.06"]
Ambient background layers drift on scroll. Keep values between 0.05 and 0.4.
Sun highlight.t-sun-word
One phrase per headline gets the sunrise wash. Two is noise.
Try them
Hover to tilt$0counts on scroll
Iconography
One icon set, self-hosted.
Cafiyn uses Tabler Icons, outline style, at a consistent stroke. We ship a subset containing only the glyphs actually used, so the font stays small. Icons sit in rounded tiles with a gradient fill when they lead a card, and inline at text size when they support a label.
Voice
Say the true thing, plainly.
Cafiyn writes like a senior operator who respects your time: direct, specific, and willing to say what a product does not do.
Do
Write like a person explaining something to a peer.
Lead with the outcome, then the detail.
Name the trade-off honestly, including who should not buy.
Use plain words: selling, not "revenue enablement".
Use colons and commas where a dash is tempting.
Do not
No em dashes or en dashes anywhere in Cafiyn copy.
No hype adjectives: revolutionary, cutting-edge, game-changing.
No feature lists where a sentence would do.
Never write bare "FlyWheel". The product is always "Cafiyn FlyWheel".
No claims we cannot show evidence for.
Naming rules
FlyWheelCafiyn FlyWheelThe product name always carries the brand.
Cafiyn FlywheelCafiyn FlyWheelCapital W in the middle.
CAFIYNCafiynTitle case in copy, even though the logo is uppercase.
CafeynCafiynSpelled with an i. Cafeyn is an unrelated company.
Cafiyn SoftwareCafiyn ProductsThe section was renamed to Products.
More on the name, the letters behind it, and what each product does: what Cafiyn means.
Standards
Every new page passes this checklist.
Ten rules that keep the site coherent as it grows. Author each new page against this list; existing pages inherit them via pageMeta() and app/layout.js. Anything not on this list is a preference. Things on this list are non-negotiable.
Use pageMeta(). Every page’s metadata export goes through lib/seo.js so titles, canonicals, and OG tags stay consistent. Never hand-roll a <title> or <meta>.
No <meta name="keywords">. Deprecated by Google in 2009. If you find yourself listing keywords, put them in real prose and internal links instead.
One H1 per page, matching the page’s single job.If a page needs two H1s, it’s two pages.
JSON-LD by page type. Blog posts get Article. FAQ-heavy pages get FAQPage. Step-by-step content gets HowTo. Landing / hub pages use CollectionPage via <PageJsonLd>. The homepage carries Organization + WebSite + SoftwareApplication in an @graph.
Ambient bloom is off; the gradient is reserved. The logo gradient (--t-grad) appears in exactly two places per page: the H1 highlight (.t-sun-word) and the primary CTA (.t-btn-sun). Nowhere else.
Icon-only buttons carry aria-label. Any <button> whose visible content is only an icon needs an aria-label that names the action.
Never hard-code cream / warm-white / peach hex values. Use the tokens (--t-cream, --t-cream-2, --t-cream-3). Bypassing tokens is how the last theme drift happened.
Do not rel="preload" fonts outside the two hero-critical ones.next/font handles Inter + Manrope. Body serif is preload: false. Adding preloads is a bandwidth trap on 3G.
CTA copy states what happens next.Everything ships behind a waitlist right now, so buttons say “Join Waitlist” not “Get Started” or “Live”. When we open, this list changes; today it holds.
No em / en dashes in copy. Use colons or commas. This is a house rule.
When a build fails on any of the above, fix the cause. Don’t suppress the check. If a rule stops making sense for the site we’re building, update this list first, then update the page.
Press and partnerships
Need something specific?
For a vector wordmark, a founder photo, an approved product description, or permission to use the marks, write to us and we will send it over.
We use analytics and advertising cookies to learn what is useful, improve the site, and measure our ads. We never sell your data. See our Cookie Policy.
