Oxide Studios

This guide covers how to customize the look and feel of the Oxide Banking UI. All UI files in the html/ folder are accessible and customizable.

File Structure
CSS Variables
Color Customization
Typography
Component Styling
Advanced Customization

File Structure

The UI files are located in oxide-banking/html/:

html/
├── index.html              # Main entry point
├── css/
│   ├── variables.css       # CSS custom properties (START HERE)
│   ├── main.css            # Main layout styles
│   ├── shared.css          # Common components (buttons, inputs)
│   ├── accounts.css        # Account management tab
│   ├── loans.css           # Loans tab styling
│   ├── security.css        # Security settings tab
│   ├── business.css        # Business tools tab
│   ├── dashboard.css       # Dashboard tab
│   ├── modals.css          # Modal dialogs
│   ├── atm.css             # ATM interface
│   ├── tiers.css           # Tier upgrade UI
│   └── card-selector.css   # Card selection overlay
└── js/
    ├── app.js              # Main Vue 3 application
    ├── composables/        # Feature logic
    └── components/         # UI components

CSS Variables

The easiest way to customize the UI is through CSS variables in html/css/variables.css. Changes here affect the entire UI.

Quick Theme Changes

To change the primary accent color, edit these variables:

:root {
    /* Change these for a different accent color */
    --primary: #34d399;           /* Main accent */
    --primary-hover: #6ee7b7;     /* Hover state */
    --primary-dark: #10b981;      /* Darker variant */
}

Background Colors

:root {
    /* Glassmorphism backgrounds */
    --bg-primary: rgba(10, 10, 12, 0.75);      /* Main container */
    --bg-secondary: rgba(255, 255, 255, 0.03); /* Secondary areas */
    --bg-tertiary: rgba(255, 255, 255, 0.06);  /* Tertiary areas */
    --bg-hover: rgba(255, 255, 255, 0.08);     /* Hover states */
    --bg-card: rgba(15, 15, 18, 0.95);         /* Card backgrounds */
    --bg-card-hover: rgba(20, 20, 24, 0.95);   /* Card hover */
    --bg-input: rgba(255, 255, 255, 0.04);     /* Input fields */
}

Border Colors

:root {
    --border-primary: rgba(255, 255, 255, 0.08);   /* Default borders */
    --border-secondary: rgba(255, 255, 255, 0.04); /* Subtle borders */
    --border-focus: rgba(255, 255, 255, 0.15);     /* Focus state */
}

Text Colors

:root {
    --text-primary: rgba(255, 255, 255, 0.95);   /* Main text */
    --text-secondary: rgba(255, 255, 255, 0.6);  /* Secondary text */
    --text-tertiary: rgba(255, 255, 255, 0.4);   /* Tertiary text */
    --text-muted: rgba(255, 255, 255, 0.3);      /* Muted text */
    --text-disabled: rgba(255, 255, 255, 0.2);   /* Disabled text */
}

Color Customization

Semantic Colors

These colors convey meaning (success, error, etc.):

:root {
    /* Success - Green */
    --success: #34d399;
    --success-light: #6ee7b7;
    --success-dark: #10b981;
    --success-bg: rgba(52, 211, 153, 0.1);
    --success-border: rgba(52, 211, 153, 0.2);

    /* Error - Red */
    --error: #f87171;
    --error-light: #fca5a5;
    --error-dark: #ef4444;
    --error-bg: rgba(248, 113, 113, 0.1);
    --error-border: rgba(248, 113, 113, 0.2);

    /* Warning - Amber */
    --warning: #fbbf24;
    --warning-light: #fcd34d;
    --warning-dark: #f59e0b;
    --warning-bg: rgba(251, 191, 36, 0.1);
    --warning-border: rgba(251, 191, 36, 0.2);

    /* Info - Cyan */
    --info: #22d3ee;
    --info-light: #67e8f9;
    --info-dark: #06b6d4;
    --info-bg: rgba(34, 211, 238, 0.1);
    --info-border: rgba(34, 211, 238, 0.2);
}

Category Colors

Used for charts and badges:

:root {
    --cat-blue: #3b82f6;
    --cat-purple: #8b5cf6;
    --cat-pink: #ec4899;
    --cat-orange: #f97316;
    --cat-teal: #14b8a6;
    --cat-indigo: #6366f1;
}

Credit Score Colors

Colors for credit score display:

.credit-excellent { color: var(--success); }        /* 800+ */
.credit-very-good { color: var(--success-light); }  /* 740-799 */
.credit-good { color: var(--info); }                /* 670-739 */
.credit-fair { color: var(--warning); }             /* 580-669 */
.credit-poor { color: var(--error-light); }         /* 500-579 */
.credit-very-poor { color: var(--error); }          /* Below 500 */

Typography

Font Family

The UI uses Inter font by default:

:root {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

To use a different font:

Import your font (Google Fonts, local, etc.)
Update --font-family variable

Example with Roboto:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap');

:root {
    --font-family: 'Roboto', sans-serif;
}

Font Sizes

:root {
    --font-size-xs: 10px;
    --font-size-sm: 11px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
}

Font Weights

:root {
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
}

Letter Spacing

:root {
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.03em;
    --letter-spacing-wider: 0.05em;
}

Component Styling

Border Radius

Control roundness of elements:

:root {
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;   /* Fully rounded (pills) */
}

Spacing

Consistent spacing throughout the UI:

:root {
    --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;
}

Shadows

:root {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 20px 40px -10px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(52, 211, 153, 0.15);  /* Accent glow */
}

Layout Dimensions

:root {
    --sidebar-width: 260px;
    --header-height: 56px;
    --container-max-width: 1100px;
    --container-max-height: 700px;
}

To change the overall UI size:

:root {
    --container-max-width: 1200px;   /* Wider UI */
    --container-max-height: 800px;   /* Taller UI */
}

Transitions & Animations

Transition Speeds

:root {
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;
    --transition-card: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

Animation Classes

Built-in animation classes:

.animate-card-in    /* Card entrance animation */
.animate-fade-in    /* Fade in animation */
.animate-slide-up   /* Slide up animation */
.animate-pulse      /* Pulsing animation */
.animate-spin       /* Spinning animation (for loaders) */

Advanced Customization

Status Badges

Customize status badge appearance:

.status-active {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.status-pending {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.status-completed {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-border);
}

.status-error {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-border);
}

Z-Index Layers

Control stacking order:

:root {
    --z-dropdown: 100;
    --z-sticky: 150;
    --z-modal-backdrop: 200;
    --z-modal: 250;
    --z-notification: 300;
    --z-tooltip: 350;
}

Theme Examples

Blue Theme

:root {
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-dark: #2563eb;
    --success: #3b82f6;
    --success-light: #60a5fa;
    --success-dark: #2563eb;
}

Purple Theme

:root {
    --primary: #8b5cf6;
    --primary-hover: #a78bfa;
    --primary-dark: #7c3aed;
    --success: #8b5cf6;
    --success-light: #a78bfa;
    --success-dark: #7c3aed;
}

Gold/Amber Theme

:root {
    --primary: #f59e0b;
    --primary-hover: #fbbf24;
    --primary-dark: #d97706;
    --success: #f59e0b;
    --success-light: #fbbf24;
    --success-dark: #d97706;
}

Light Theme (Advanced)

For a light theme, you'll need to invert many colors:

:root {
    --bg-primary: rgba(255, 255, 255, 0.95);
    --bg-secondary: rgba(0, 0, 0, 0.03);
    --bg-tertiary: rgba(0, 0, 0, 0.06);
    --bg-hover: rgba(0, 0, 0, 0.08);
    --bg-card: rgba(255, 255, 255, 0.98);
    --bg-input: rgba(0, 0, 0, 0.04);

    --border-primary: rgba(0, 0, 0, 0.1);
    --border-secondary: rgba(0, 0, 0, 0.05);

    --text-primary: rgba(0, 0, 0, 0.9);
    --text-secondary: rgba(0, 0, 0, 0.6);
    --text-tertiary: rgba(0, 0, 0, 0.4);
}

CSS File Reference

File	Purpose
`variables.css`	CSS custom properties - start here for theming
`main.css`	Main layout, container, sidebar structure
`shared.css`	Buttons, inputs, common components
`accounts.css`	Account list, account cards, balance display
`loans.css`	Loan cards, application form, payment history
`security.css`	2FA setup, security settings, alerts
`business.css`	Invoices, expenses, reports tables
`dashboard.css`	Dashboard widgets, summary cards
`modals.css`	Modal dialogs, overlays, forms
`atm.css`	ATM interface, PIN entry, quick actions
`tiers.css`	Tier comparison, upgrade UI
`card-selector.css`	Card selection overlay for ATM

Tips

Start with variables.css - Most changes can be made here
Use browser dev tools - Inspect elements to find specific styles
Test on multiple resolutions - The UI should work at various sizes
Keep backups - Save original files before making changes
Clear browser cache - After CSS changes, clear cache to see updates

Oxide Banking by Oxide Studios

UI Customization

Table of Contents