Optivora

Design Specification — Optivora

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 (#FF3366). All type is set in "Inter". Detected font weights: 300, 400, 500, 600, 700, 900. Detected style signatures: technical / mono accents.

Logo asset(s): https://framerusercontent.com/images/gcJNhj0LmHPK096vM9kSWGQwQ.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.

Typography

Primary typeface: Inter — stack: "Inter"

Font stacks (most used first)

• "Inter"
• 'DM Sans'
• 'DM Mono'
• "DM Sans"
• var(--framer-code-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif))
• var(--font-family)
• var(--framer-font-family)
• "DM Mono"
• "DM Sans Placeholder"
• "Inter Placeholder"

Derived type scale

Font sizes (by frequency)

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

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Layout

Container max-width: 1200px

Grid columns (largest detected grid): 2

Breakpoints

• 809.98px
• 1199.98px
• 1200px

Animation & Motion

Source Design Tokens (CSS custom properties)

:root {
  --token-1ff6773d-e6c4-47ca-ab64-88213d5c5a7a: #f36;
  --token-b2c91e7a-f62b-46ca-8c35-0f032443a422: #787878;
  --token-6b1d2cfc-b7e4-40cc-a842-dda502dcc981: #050505;
  --token-f44443ca-8b90-4297-b137-da1e8877759c: #a8a8a8;
  --token-4be7a96e-9391-4b4f-9ac5-3860a3435fb3: #fff;
  --token-5849b743-468d-4fa1-898d-288c478afc18: #ffffff1a;
  --token-fe70d6cc-3c3d-4270-b1e3-47818055e5c9: #fff9;
  --token-509e6f4f-0994-4ad0-b553-2a6d0cc1f128: #000;
  --token-f1a77b8c-547c-4a23-9926-65cf4ddbf3b8: #ffffff80;
  --token-3c3c9bf4-9009-47ed-ae41-7098ee9d7e36: #ffffff0a;
  --token-9d903b52-1f9c-4444-80bd-9473092f2c55: #fff6;
  --infinity: infinity;
  --framer-will-change-override: transform;
  --framer-will-change-filter-override: filter;
  --text-decoration: var(--framer-text-decoration-style,solid)var(--framer-text-decoration,none)var(--framer-text-decoration-color,currentcolor)var(--framer-text-decoration-thickness,auto);
  --text-decoration-skip-ink: var(--framer-text-decoration-skip-ink);
  --text-underline-offset: var(--framer-text-decoration-offset);
  --font-family: var(--framer-font-family);
  --font-style: var(--framer-font-style);
  --font-weight: var(--framer-font-weight);
  --text-color: var(--framer-text-color);
  --letter-spacing: var(--framer-letter-spacing);
  --font-size: var(--framer-font-size);
  --text-transform: var(--framer-text-transform);
  --line-height: var(--framer-line-height);
  --overflow-clip-fallback: hidden;
  --one-if-corner-shape-supported: 1;
  --framer-aspect-ratio-supported: auto;
  --list-style-type: decimal;
  --framer-link-text-color: #09f;
  --framer-link-text-decoration: underline;
  --framer-input-background: #fff0;
  --framer-input-border-bottom-width: 1px;
  --framer-input-border-color: var(--token-3c3c9bf4-9009-47ed-ae41-7098ee9d7e36,#ffffff0d);
  --framer-input-border-left-width: 1px;
  --framer-input-border-right-width: 1px;
  --framer-input-border-style: solid;
  --framer-input-border-top-width: 1px;
  --framer-input-focused-border-color: var(--token-1ff6773d-e6c4-47ca-ab64-88213d5c5a7a,#f36);
  --framer-input-focused-border-style: solid;
  --framer-input-focused-border-width: 1px;
  --framer-input-font-color: var(--token-f44443ca-8b90-4297-b137-da1e8877759c,#a8a8a8);
  --framer-input-font-family: "DM Mono";
  --framer-input-font-letter-spacing: 0em;
  --framer-input-font-line-height: 1.2em;
  --framer-input-font-size: 16px;
  --framer-input-font-weight: 300;
  --framer-input-icon-mask-image: none;
  --framer-input-padding: 10px;
  --framer-input-placeholder-color: var(--token-b2c91e7a-f62b-46ca-8c35-0f032443a422,#787878);
  --framer-input-wrapper-height: auto;
  --framer-textarea-resize: vertical;
}

Do's and Don'ts

Do

• Do reserve the accent #FF3366 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, 900.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #0099FF;
  --color-accent: #FF3366;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #999999;
  --color-border: #787878;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: "Inter";
  --font-size-body-md: 16px;
  --font-size-label-sm: 12px;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 20px;
  --space-lg: 50px;
  --space-xl: 90px;
  --container-max: 1200px;
}