.webp)
Anchor
Anchor (getanchor.co) — Design System Overview
Stack \- Framework: Webflow (meta-generator: Webflow) \- Hosting: Webflow CDN (uploads-ssl.webflow.com / 64fb1d435c8fcad199f146be) \- Blog: Custom Next.js or Ghost-style platform (blog.getanchor.co)
Typography \- Primary font: Inter (inferred from Webflow defaults + fintech conventions; no custom font declaration visible in parsed HTML) \- Fallback stack: system-ui, -apple-system, sans-serif \- Display/hero: large bold weight (700–800), tight tracking \- Body copy: 400–500 weight, ~16–18px \- Code blocks: monospace font (used in developer section curl examples) \- Nav links: medium weight (500), small caps or uppercase treatment
Color Philosophy \- Dark-first brand: deep navy/dark background hero with white text \- Primary brand color: deep blue/navy (#0D1B2A range) \- Accent: vibrant green (CTA buttons — "Get started", "View docs") \- Footer: fully dark background with white logo and text \- Supporting neutrals: light grays for body text on light sections \- Logo/brand mark: white version on dark, dark version on light
Spacing \- Generous whitespace, section padding ~80–120px vertical \- Grid-based layout with consistent 16px/24px/32px/48px rhythm \- Card padding: ~24–32px \- Component gap: 16–24px
Component Defaults \- Buttons: rounded pill or rounded-md, solid fill (green accent) + ghost outline variant \- Cards: rounded corners (~12px), light border or soft shadow on white, dark surface on dark sections \- Nav: sticky top bar, transparent or white background, dropdown menus \- Code block: dark themed, numbered lines, syntax-highlighted terminal style \- Marquee/ticker: infinite scroll logo strip for partner logos \- Tabs: horizontal pill-style tabs for product sections \- Forms: inline email subscribe input + CTA button
Layout \- Max content width: ~1200px centered \- 12-column grid \- Hero: full-width, text-left or centered, large headline + subtext + CTA \- Feature sections: alternating illustration + text, two/three column grids \- Footer: 4–5 column link grid + newsletter + social icons
:root { / ── Brand Colors ── / --color-brand-primary: #0B5FFF; / Anchor blue — CTA buttons, links / --color-brand-accent: #00C48C; / Green accent — primary CTA "Get started" / --color-brand-dark: #0D1B2A; / Deep navy — hero background, footer / --color-brand-darkalt: #0A1628; / Slightly deeper navy variant /
/ ── Neutrals ── / --color-white: #FFFFFF; --color-black: #000000; --color-gray-50: #F9FAFB; --color-gray-100: #F3F4F6; --color-gray-200: #E5E7EB; --color-gray-300: #D1D5DB; --color-gray-400: #9CA3AF; --color-gray-500: #6B7280; --color-gray-600: #4B5563; --color-gray-700: #374151; --color-gray-800: #1F2937; --color-gray-900: #111827;
/ ── Semantic Colors ── / --color-background: #FFFFFF; --color-background-dark: #0D1B2A; --color-surface: #F9FAFB; --color-surface-dark: #132336; --color-text-primary: #0D1B2A; --color-text-secondary: #4B5563; --color-text-muted: #9CA3AF; --color-text-inverse: #FFFFFF; --color-border: #E5E7EB; --color-border-dark: #1E3A5F;
/ ── CTA / Interactive ── / --color-cta-bg: #00C48C; --color-cta-text: #FFFFFF; --color-cta-hover: #00A876; --color-link: #0B5FFF; --color-link-hover: #0047CC;
/ ── Typography ── / --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-md: 1.125rem; / 18px / --font-size-lg: 1.25rem; / 20px / --font-size-xl: 1.5rem; / 24px / --font-size-2xl: 2rem; / 32px / --font-size-3xl: 2.5rem; / 40px / --font-size-4xl: 3rem; / 48px / --font-size-hero: 3.75rem; / 60px / --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.2; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.05em;
/ ── Spacing ── / --space-1: 0.25rem; / 4px / --space-2: 0.5rem; / 8px / --space-3: 0.75rem; / 12px / --space-4: 1rem; / 16px / --space-5: 1.25rem; / 20px / --space-6: 1.5rem; / 24px / --space-8: 2rem; / 32px / --space-10: 2.5rem; / 40px / --space-12: 3rem; / 48px / --space-16: 4rem; / 64px / --space-20: 5rem; / 80px / --space-24: 6rem; / 96px / --space-32: 8rem; / 128px /
/ ── Border Radius ── / --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 9999px;
/ ── Shadows ── / --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-card: 0 2px 16px rgba(13, 27, 42, 0.08);
/ ── Layout ── / --max-width-content: 1200px; --max-width-narrow: 800px; --nav-height: 72px; --section-padding-y: 80px; --grid-gap: 24px; }
/ ── Dark mode (footer / hero sections use dark bg natively) ── / [data-theme="dark"], .section-dark, .footer-dark { --color-background: #0D1B2A; --color-surface: #132336; --color-text-primary: #FFFFFF; --color-text-secondary: #9CA3AF; --color-text-muted: #6B7280; --color-border: #1E3A5F; --color-cta-bg: #00C48C; --color-cta-text: #FFFFFF; }
Color Tokens
| Token | Value | Usage |
|---|---|---|
| brand-primary | #0B5FFF | Links, secondary buttons, accents |
| brand-accent | #00C48C | Primary CTA buttons ("Get started") |
| brand-dark | #0D1B2A | Hero bg, footer bg, dark sections |
| white | #FFFFFF | Text on dark, light backgrounds |
| gray-50 | #F9FAFB | Page background, card surfaces |
| gray-100 | #F3F4F6 | Dividers, input backgrounds |
| gray-200 | #E5E7EB | Borders, separators |
| gray-500 | #6B7280 | Muted / secondary text |
| gray-700 | #374151 | Body text on light bg |
| gray-900 | #111827 | Headings on light bg |
| cta-hover | #00A876 | CTA button hover state |
Spacing Tokens
| Token | rem | px | Usage |
|---|---|---|---|
| space-1 | 0.25rem | 4px | Micro gaps |
| space-2 | 0.5rem | 8px | Icon padding |
| space-4 | 1rem | 16px | Base unit, inline gaps |
| space-6 | 1.5rem | 24px | Card padding, column gaps |
| space-8 | 2rem | 32px | Section sub-gaps |
| space-12 | 3rem | 48px | Component separation |
| space-16 | 4rem | 64px | Large section padding |
| space-20 | 5rem | 80px | Section vertical padding |
| space-24 | 6rem | 96px | Hero vertical padding |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| font-family-base | Inter, system-ui | All body text |
| font-family-mono | JetBrains Mono / Fira Code | Code blocks |
| font-size-xs | 12px | Labels, captions |
| font-size-sm | 14px | Small print, nav links |
| font-size-base | 16px | Body copy |
| font-size-lg | 20px | Lead text |
| font-size-xl | 24px | Card headings |
| font-size-2xl | 32px | Section headings |
| font-size-3xl | 40px | Page titles |
| font-size-hero | 60px | Hero headline |
| font-weight-medium | 500 | Nav, labels |
| font-weight-bold | 700 | Headings |
| font-weight-extrabold | 800 | Hero text |
| line-height-tight | 1.2 | Headlines |
| line-height-normal | 1.5 | Body copy |
| letter-spacing-tight | -0.02em | Large headings |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| radius-sm | 4px | Inputs, small tags |
| radius-md | 8px | Buttons, small cards |
| radius-lg | 12px | Cards, modals |
| radius-xl | 16px | Feature cards |
| radius-2xl | 24px | Large feature blocks |
| radius-pill | 9999px | Pill buttons, badges |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle element lift |
| shadow-md | 0 4px 6px -1px rgba(0,0,0,0.1) | Cards, dropdowns |
| shadow-lg | 0 10px 15px -3px rgba(0,0,0,0.1) | Modals, elevated cards |
| shadow-card | 0 2px 16px rgba(13,27,42,0.08) | Feature cards on white bg |
Framework: Webflow (confirmed via meta-generator tag across all pages). No custom React/Vue component library detected on the marketing site. Blog (blog.getanchor.co) appears to be a separate Next.js or headless CMS deployment.
Theme Support: Light/dark hybrid — not a full user-toggled dark mode. Dark sections (hero, footer, developer section) are hardcoded dark-background sections within an otherwise light-background site. No prefers-color-scheme media query or theme toggle detected.
Data Confidence: Medium. CSS files were not directly accessible (Webflow CDN returned empty responses through the fetch proxy). Design tokens were inferred from: (1) visual structure described in parsed HTML markup, (2) Webflow platform conventions, (3) content/copy cues (e.g., code block styling in developer section, logo strip marquee, pill-style tab nav). Colors are estimated from the brand's visual identity and typical fintech Webflow site patterns — not extracted from raw CSS.
Notable Patterns: \- Fintech B2B2X positioning reflected in professional, trust-signaling design: dark navy hero, green CTA, monospace code aesthetic in developer section \- Logo marquee (infinite scroll ticker) for social proof — 14+ partner logos \- Tab-based product navigation (Accounts / Payments / Cards / Credit / Savings) \- YC-backed credibility signaled via investor logo grid \- Footer is always dark with white logo — consistent brand anchor point \- Copy is developer-first (curl examples, REST API references, "View docs" CTA) \- No animation or scroll-triggered effects detected beyond the logo ticker \- Africa/Nigeria fintech context — CBN compliance disclaimer in footer \- Single primary green CTA color used consistently site-wide for conversion actions
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.