Brand Style Guide

OneDollarStock

Design tokens, components & patterns — Light & Dark variants, all in one place.

01

Color Palette

Primary

Green Accent
#86FC00
Green Hover
#6CD400
Black
#000000
White
#FFFFFF

Neutrals & Text

Text Body
#333333
Text Secondary
#555555
Text Muted
#777777
Text Light
#8A8A8A
Text Disabled
#999999
BG Tag
#F3F3F3

Functional

Green Soft BG
rgba(134,252,0,0.1)
FAQ Icon BG
rgba(0,0,0,0.04)
Border Light
rgba(0,0,0,0.08)
Border Medium
rgba(0,0,0,0.12)
02

Typography

On Light Background

Section Title — Pay Once, Use Forever!
clamp(28px,4vw,42px) · 700
Card Title — Lifetime Access
25px · 700
FAQ Question — Are there download limits?
clamp(16px,2vw,19px) · 600
Body — All future assets included with your plan
18px · 400 · #333
Description — Final days at this price.
clamp(14px,1.5vw,16px)
rgba(0,0,0,0.5)
Eyebrow — Lifetime Access
15px uppercase · #8A8A8A
$299/once
42px + 18px unit

On Dark Background

Section Title — Pay Once, Use Forever!
clamp(28px,4vw,42px) · #FFF
Unlimited downloads. Lifetime Access
30px · #FFF + #86FC00
Body — All future assets included with your plan
18px · rgba(255,255,255,0.85)
Description — Final days at this price.
rgba(255,255,255,0.5)
Eyebrow — Lifetime Access
rgba(255,255,255,0.5)
$299/once
42px · #FFF

Font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

03

Spacing & Border Radius

Spacing Scale

6px
10px
16px
24px
40px
60px
120px

Border Radius

6px
Tag
8px
Button rect
10px
Input
12px
Card SM
16px
Card LG
50%
Circle
999px
Pill
04

Shadows

Shadow SM0 2px 8px rgba(0,0,0,0.06)
Shadow Card0 12px 30px rgba(0,0,0,0.04)
Shadow Hover0 4px 16px rgba(0,0,0,0.12)
Shadow Green0 4px 16px rgba(134,252,0,0.3)
05

Buttons

Light BG
I Want This Offer →Lifetime AccessActive TabInactive Tab
Dark BG
Lifetime AccessBrowse FreeFAQ page →Inactive Tab
06

Cards

Pricing Card — Light vs Dark

Lifetime Access
Pay Once, Use Forever!
Commercial license from:
$299/once
WHAT YOU GET:
  • Unlimited downloads
  • 4K+ JPG assets
  • Lightroom & Photoshop Presets
Lifetime Access
Pay Once, Use Forever!
Commercial license from:
$299/once
WHAT YOU GET:
  • Unlimited downloads
  • 4K+ JPG assets
  • Lightroom & Photoshop Presets

Category Cards

07

Lists, Tags & Badges

Checklist

Light BG
  • Unlimited downloads
  • 4K+ JPG assets
  • Commercial usage rights
  • All future assets included
Dark BG
  • Unlimited downloads
  • 4K+ JPG assets
  • Commercial usage rights
  • All future assets included

Tags & Badges

Light BG
WHAT YOU GET:
COMING SOON IN PRO PLAN
Dark BG
WHAT YOU GET:
COMING SOON IN PRO PLAN

License Badges

Light BG
Personalfrom $1
Commercialfrom $3
Creatorfrom $19
Corporatefrom $29
Dark BG
Personalfrom $1
Commercialfrom $3
Creatorfrom $19
Corporatefrom $29
08

FAQ Accordion

Light

Are there any download limits?

No limits at all. Download as many times as you need.

Is it really a one-time payment?

Yes. No auto-renewal, no monthly billing.

Dark

Are there any download limits?

No limits at all. Download as many times as you need.

Is it really a one-time payment?

Yes. No auto-renewal, no monthly billing.
09

Search Bar

Light

Dark

Unlimited downloads. Lifetime Access
10

Asset Strip & Icons

Dark Background (primary)

Images Mockups Graphics Bundles Free

Light Background

Images Mockups Graphics Bundles

Icons: 16×16px · stroke: #86FC00 · stroke-width: 2 · Fill: fill: #86FC00

11

Contact CTA Block

Can't find what you're looking for?

We're happy to help. Contact us anytime.

Check our FAQ page →
12

Section Layout Pattern

Light Section

Section Title
Description muted color, max-width constrained.
Image — 5fr
Content — 3fr

Dark Section

Section Title
Description muted white, max-width constrained.
Image — 5fr
Content — 3fr
13

CSS Variables

:root {
  --ods-green:          #86FC00;
  --ods-green-hover:    #6CD400;
  --ods-black:          #000000;
  --ods-white:          #FFFFFF;

  --ods-text-primary:   #000000;
  --ods-text-secondary: #555555;
  --ods-text-muted:     #777777;
  --ods-text-light:     #8A8A8A;
  --ods-text-disabled:  #999999;
  --ods-text-body:      #333333;

  --ods-bg-card:        #FFFFFF;
  --ods-bg-tag:         #F3F3F3;
  --ods-bg-green-soft:  rgba(134, 252, 0, 0.1);

  --ods-border-light:   rgba(0, 0, 0, 0.08);
  --ods-border-medium:  rgba(0, 0, 0, 0.12);

  --ods-shadow-card:    0 12px 30px rgba(0, 0, 0, 0.04);
  --ods-shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.06);
  --ods-shadow-hover:   0 4px 16px rgba(0, 0, 0, 0.12);
  --ods-shadow-green:   0 4px 16px rgba(134, 252, 0, 0.3);

  --ods-radius-card:    16px;
  --ods-radius-card-sm: 12px;
  --ods-radius-btn:     8px;
  --ods-radius-pill:    999px;

  --ods-font: -apple-system, BlinkMacSystemFont,
              'Segoe UI', Roboto, sans-serif;
  --ods-transition: all 0.3s ease;
}

OneDollarStock Brand Style Guide · v2.0 · All components: Light & Dark
Breakpoint: 768px · Namespace: .ods-*