RG DIGITAL
Brand
Visual identity, voice, and usage guidelines.
WORDMARK
dark field 
light field WORDMARK WITH GHOST
dark field — primary 
light field / print GHOST MARK
FAVICON SIZES
48px 32px 16px ASSET DOWNLOADS
COLOR PALETTE
--accent #ccff00 dark only
--bg #0a0a0a light only
--surface #111111 light only
--surface-2 #1e1e1e light only
--border #2a2a2a light only
--gray #a1a1a1 dark only
--dim #888888 dark only
--white #ffffff dark only
CSS CUSTOM PROPERTIES
:root {
/* Colors */
--bg: #0a0a0a;
--surface: #111111;
--surface-2: #1e1e1e;
--border: #2a2a2a;
--white: #ffffff;
--gray: #a1a1a1;
--dim: #888888;
--accent: #ccff00;
--black: #000000;
--accent-wash: rgba(204, 255, 0, .04);
--accent-wash-strong: rgba(204, 255, 0, .13);
--accent-border: rgba(204, 255, 0, .18);
--danger: #ff5050;
--danger-text: #ff6464;
--warn: #ffa03c;
/* Semantic aliases */
--text-primary: var(--white);
--text-secondary: var(--gray);
--text-muted: var(--dim);
--text-accent: var(--accent);
--surface-page: var(--bg);
--surface-card: var(--surface);
--surface-raised: var(--surface-2);
--border-default: var(--border);
--border-accent: var(--accent-border);
--focus-ring: var(--accent);
/* Typography */
--font: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fs-hero: clamp(44px, 5.5vw, 72px);
--fs-section: clamp(36px, 3.5vw, 52px);
--fs-display: 42px;
--fs-heading: 28px;
--fs-subheading: 18px;
--fs-body: 16px;
--fs-body-sm: 14px;
--fs-label: 12px;
--fs-meta: 11px;
--lh-tight: 1.05;
--lh-heading: 1.2;
--lh-body: 1.6;
--lh-relaxed: 1.75;
--track-tight: -0.03em;
--track-display: -0.02em;
--track-label: 0.04em;
--track-loose: 0.1em;
/* Spacing */
--space-1: 4px; --space-2: 8px;
--space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px;
--space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-14: 56px;
--space-16: 64px;
/* Layout */
--pad: clamp(24px, 8.33vw, 120px);
--max-w: 1440px;
--nav-h: 72px;
/* Radii */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* Shadows */
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .3);
--shadow-nav: 0 1px 0 var(--border), 0 8px 32px rgba(0, 0, 0, .5);
--ring-accent: 0 0 0 1px var(--accent-border);
/* Motion */
--dur-fast: 0.15s;
--dur-base: 0.2s;
--dur-slow: 0.3s;
--dur-enter: 0.65s;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--blur-nav: blur(12px);
}TYPOGRAPHY — INTER VARIABLE
Display / 800
Heading / 800
Subheading / 600
Body — Software development that actually solves something.
LABEL / 500
INTER VARIABLE — WEIGHT SCALE
Software development that actually solves something.
Software development that actually solves something.
Software development that actually solves something.
Software development that actually solves something.
Software development that actually solves something.
Software development that actually solves something.
Software development that actually solves something.
Software development that actually solves something.
Software development that actually solves something.
UI COMPONENTS
BUTTONS
CHIPS / TAGS
Web development Featured
CARD
Services
WordPress development
Fast, maintainable sites built on a platform your team can actually use.
SPACING & RADIUS TOKENS
6px --radius-sm
8px --radius-md
12px --radius-lg
9999px --radius-full
BRAND VOICE
Software development that actually solves something.
Direct, not hyped. Understated confidence. No empty superlatives. Faith present but never front and centre.
Do
- "We built a tool that cut their reporting time from 3 days to 20 minutes."
- "It does what it should. No setup calls, no six-month onboarding."
- "WordPress, because your team needs to update the site without calling us."
- "Fast. Maintainable. Yours to own."
Don't
- "We leverage cutting-edge synergies to deliver world-class digital solutions."
- "Our revolutionary platform empowers businesses to unlock their full potential."
- "We're passionate about helping brands tell their story through innovative experiences."
- "Best-in-class. Industry-leading. Next-generation."
IMAGERY & MOTION
Photography
- Dark environments, technical context
- Real work: terminals, code, hardware
- Grain and contrast over polish
- Monochrome or desaturated colour
- Stock photo smiles and handshakes
- Bright, saturated lifestyle imagery
- Abstract blue-glow "tech" visuals
Motion
- Fast and purposeful — under 300ms for UI
- Ease-out cubic for entrances
- Slide + fade for page transitions (~400ms)
- Respect
prefers-reduced-motion - Decorative loops or ambient animations
- Bounce or spring easing
- Motion that delays content access
Colour — known constraint
--accenton dark backgrounds only- Dark wordmark SVG for digital dark contexts
- Light wordmark SVG for print / light contexts
#ccff00text on white — fails contrast- Green fills behind light-coloured text
- Green on grey mid-tones — neither reads well
PROFILE PICTURE
Use the ghost icon — lime tile with black ghost. It stands out in a feed of white/grey profile pictures. Instagram crops to a circle; the lime background fills cleanly. At 32px the ghost simplifies to a readable silhouette.
The ghost is centred on a 100×100 canvas — sits correctly at all profile sizes without manual cropping.
TEMPLATES — 1080×1080
Stat card
Quote / take
Carousel intro
CONTENT IDEAS
Carousels
- "3 things we always fix before launch"
- "Before / after: [client] site rebuild"
- "Why we chose Astro over Next.js"
- "What a custom WordPress plugin actually costs you"
Single posts
- Stat card — load time, uptime, cost saved
- Direct take — one opinion, no fluff
- Project reveal — screenshot + one-liner
- Stack highlight — "Built with X. Here's why."
Reels
- 15s screen recording of a feature working
- Side-by-side old vs new site scroll
- Terminal + deploy going live
- Timelapse of a build session
Copied!