Optivora - Paid Ads Agency Template | Framplates

Design Specification — Optivora - Paid Ads Agency Template | Framplates

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#2563EB). All type is set in 'Inter'. Detected font weights: 300, 400, 500, 600, 700, 800, 900. Detected style signatures: technical / mono accents.

Logo asset(s): https://framplates.com/apple-touch-icon.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(-45deg,transparent 0%,transparent 25%,black 50%,transparent 75%,transparent 100%)

> 3 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Inter — stack: 'Inter'

Font stacks (most used first)

• 'Inter'
• inherit
• ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"
• ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
• Inter,sans-serif
• var(--font)

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 0 1px ,0 3px 0

Layout

Container max-width: 768px

Grid columns (largest detected grid): 5

Breakpoints

• 420px
• 640px
• 768px
• 1024px
• 1280px
• 1536px

Animation & Motion

Easing curves

• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)

Keyframes

@keyframes pulse { 50%{opacity:.5} }
@keyframes bp-bar { 0%{transform:translate(-100%)} to{transform:translate(0)} }

Animations

• pulse 2s cubic-bezier(.4,0,.6,1) infinite

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Categories”

button-secondary — sample text: “Get Free Template”

navigation-link

badge

Source Design Tokens (CSS custom properties)

:root {
  --accent-color: #10b981;
  --input-bg: rgb(62, 62, 48);
  --blockquote-color: 148, 146, 143;
}

Do's and Don'ts

Do

• Do reserve the accent #2563EB for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 600, 700, 800, 900.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #10B981;
  --color-accent: #2563EB;
  --color-background: #FFFFFF;
  --color-surface: #F3F4F6;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #6B7280;
  --color-border: #374151;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F3F4F6;
  --color-surface-container: #E5E7EB;
  --color-surface-container-high: #D1D5DB;
  --font-sans: 'Inter';
  --font-size-display: 48px;
  --font-size-headline-lg: 42.7px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 21.3px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14.4px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 100%;
  --shadow-md: 0 0 0 1px ,0 3px 0;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 96px;
  --tracking-display: -.025em;
  --tracking-label: .05em;
  --container-max: 768px;
}