Link in Bio
DJ Link Page Design Tips: How to Style Your bass.fan Profile
A practical walkthrough of every design setting in the bass.fan profile editor — backgrounds, fonts, field styles, layouts — with concrete recipes for five proven DJ aesthetics.
By Sophie · · 11 min read
Most DJs get their bass.fan profile set up — bio, music widget, booking form, events — and then leave the design on its defaults. That's a missed opportunity. The design of your link page is part of your brand presentation. A promoter who lands on a page that looks considered and professional will form a different first impression than one who lands on an unformatted placeholder.
This guide walks through every design setting in the bass.fan profile editor — exactly what each control does, what combinations work, and five complete design recipes you can apply in under ten minutes.
Design works best when the page has the right information hierarchy first. Use the complete DJ link in bio guide for the content checklist, then return here to style it.
- < 3s
- Time a visitor decides whether to stay
- 94%
- Of first impressions are design-related
- 80%+
- Of profile visits happen on mobile
- 30
- Fonts to choose from in the profile editor
Step 1: Choose Your Page Layout
The first decision is the overall layout mode. In the profile editor, open the Layout control in the top toolbar. There are three options:
- Link Page — the classic link-in-bio format. Your profile photo sits at the top, followed by your name, bio, and a vertical stack of content widgets below. This is the default and works reliably across all genres.
- Compact — a smaller avatar at the top with content beginning higher on the page. Good for DJs who want the focus on their content (music, links, events) rather than the header image.
- Hero — a full-screen hero image or video fills the top of the page, with your name and content overlaid or revealed below as the visitor scrolls. This is the most visually impactful option and unlocks additional Hero Settings.
Step 2: Set Your Background
Open the Background control in the editor toolbar. There are two tabs: Background (colour) and BG Image.
Background colour
The colour picker supports three modes, toggled by the style selector inside the picker:
- Solid — a single flat colour. The most common choice. Near-black (#111111 or #0d0d0d) works for most electronic music DJs. Pure white (#ffffff) works for minimal or pop-adjacent artists.
- Linear gradient — a gradient that flows in a direction you set with an angle control. Two or more colour stops. Keeps the page from feeling completely flat without being garish.
- Radial gradient — the gradient radiates from the centre outward. Subtle use (dark centre to slightly lighter edge) gives a focused, spotlight quality.
BG Image settings
Switch to the BG Image tab to layer a photo or artwork behind your background colour. The controls here are:
- Use Profile Picture — toggle this on and your profile photo automatically becomes the background image. Useful for a quick cohesive look when you don't have a dedicated background image.
- Custom background image — upload any photo. Best choices: a live shot from a festival, studio artwork from a recent release, or a textured abstract image.
- Opacity — how visible the background image is, from 0% (invisible) to 100% (full). A value of 20–40% lets colour show through while adding subtle texture. 60–80% gives a strong image presence.
- Blur — applies a gaussian blur to the image. A blur of 8–15 softens an image enough to read text over it clearly while keeping the colour and mood. High blur (30+) turns the image into a pure colour-wash.
- Grain — adds a film grain texture over the image. A small amount (10–20) gives an analogue, photographic quality. Heavy grain (50+) becomes a deliberate aesthetic choice.
- Color Tint — overlays a solid colour over the image, with a separate Tint Opacity slider. Use a tint to match the image to your brand colour, or to darken a bright image so text sits over it clearly.
Step 3: Text Colour and Font
Open the Text control in the editor toolbar. This has three sections: Color, Font, and Typography.
Text Color
This sets the colour for all text across your profile — name, bio, widget labels, link text. Use the hex input or the colour picker. There are five quick-select swatches: black (#000000), white (#ffffff), red, blue, and green. For most dark backgrounds, white (#ffffff) or an off-white (#f5f5f5 or #e8e8e8) is the right call. For light backgrounds, near-black (#111111) reads cleaner than pure black (#000000).
Font
The font list has 30 choices, scrollable in the editor. These are the most useful for DJs by style:
| Font | Best for | Character |
|---|
| Bebas Neue | Techno, hard club, festival | All-caps display, very strong visual weight |
| Orbitron | Electronic, sci-fi, futuristic | Geometric, angular, looks like hardware readouts |
| Syncopate | Minimal electronic, experimental | Wide-spaced caps, clinical and clean |
| Oswald | House, techno, drum & bass | Condensed, tall, excellent for names and headings |
| Montserrat | Any genre — safest all-rounder | Modern, geometric, legible at all sizes |
| Poppins | Pop, house, commercial club | Friendly and rounded — approachable feel |
| Raleway | Deep house, melodic, sophisticated | Elegant thin strokes, slightly editorial |
| Playfair Display | Jazzy, soul, live music crossover | High contrast serif — formal and considered |
| Oxanium | Industrial techno, bass music | Techy mono-spaced feel with personality |
| Righteous | Retro, disco, funk crossover | 70s influenced, bold and warm |
| Inter | Any genre — cleanest readable default | System UI style — neutral, highly legible |
Typography controls
Below the font list are four sliders that let you fine-tune how type renders:
- Size — scales all text up or down between 70% and 130% of its default size. If your chosen font has thin strokes (e.g. Raleway Light), bumping to 110% improves mobile readability. If you're using a heavy display font (e.g. Bebas Neue), pulling back to 90% can stop it feeling overwhelming on small screens.
- Weight — Light, Normal, or Bold. Most fonts default to Normal (400). Light works well for elegant, minimal looks with thin-stroke fonts. Bold is useful if you want the entire profile to feel more punchy and direct.
- Letter Spacing — 0 to 8px. Increasing letter spacing (2–4px) gives an editorial, high-end look to any font. Pair it with uppercase display fonts (Bebas Neue, Syncopate) for a clean label aesthetic. Too much spacing on body text hurts readability.
- Line Height — 1.0 to 2.5. The default is 1.5. Tighter (1.2) makes bios feel compact and punchy. More open (1.8–2.0) reads better for longer bios and gives a more breathable, editorial feel.
Step 4: Style Your Fields
The Fields control is where a lot of the visual character of a profile comes from. Open it from the editor toolbar. It controls the appearance of all content blocks on your page — booking form inputs, link widgets, music widgets, and contact forms.
Field Background
Toggle Background on, and two style options appear: Normal and Glass.
- Normal — a solid colour fill behind each field. Choose any colour with the colour picker that appears next to the style selector. A dark field on a dark background (e.g. #1a1a1a field on a #111111 background) gives a subtle layered look. A contrasting field colour (e.g. near-black field on a lighter background) creates clear separation between sections.
- Glass — a translucent white backdrop with a backdrop blur effect. This is the most popular choice for DJs with a background image or gradient — it creates the "frosted glass" look where the background shows through faintly beneath each content block. It reads especially well on dark or colourful backgrounds.
Border
Toggle Border on to add an outline to each field. You can control:
- Border colour — use the colour picker. On dark backgrounds, a white border at 20–30% opacity gives a refined, subtle edge. On light backgrounds, a dark border at 40–60% opacity creates clear field definition.
- Thickness — 1px to 5px. 1px is the standard. 2px is noticeable and intentional. Anything above 3px is a strong aesthetic statement — use only with specific design intent.
- Opacity — 0% to 100%. Lowering opacity is a clean way to get a border that's felt rather than seen — a very faint edge that adds dimension without visual noise.
Corner Radius
The Corner Radius slider goes from 0px (perfectly square corners) to 9999px (shown in the editor as "Pill" — fully rounded ends). This single setting has a big impact on the feel of the whole page:
- 0px — sharp, angular corners. Pairs with industrial, techno, or minimal aesthetics. Looks deliberate and architectural.
- 8px (default) — a gentle rounding. Professional and neutral — works for any genre.
- 16–24px — noticeably rounded. Softer, more approachable feel. Works for house, pop, or artists who want a friendlier brand personality.
- Pill (9999px) — fully rounded ends. Strong visual statement. Pairs well with Glass fields and bold fonts. Very popular right now for a sleek modern DJ look.
Step 5: The Content Panel
In Link Page and Compact layouts, the Panel control lets you add a background container that sits behind all your content widgets — a separate visual layer between the page background and your fields.
Toggle "Enable panel" on, then choose from four background modes for the panel itself:
- Color — a solid colour fill with a separate colour picker. Good for creating a clearly defined content area when your background is complex (e.g. a panel at 10% white on a dark background).
- Gradient — a linear gradient for the panel, with colour stops and angle control.
- Radial — a radial gradient for the panel.
- Glass — a frosted glass panel, matching the same translucent look as Glass fields. Stacking glass fields inside a glass panel creates a sophisticated layered translucency effect.
Step 6: Hero Settings (Hero Layout Only)
If you're using the Hero layout, the Hero button in the editor toolbar opens a settings panel with the most granular image controls on the platform. These only appear when Hero layout is active.
- Hero Image — upload a custom image, or use your Profile Picture. The image fills the top of the page edge-to-edge.
- Opacity — how strongly the hero image shows. 100% is full image. Lower opacity lets the Background colour blend with the image.
- Object Fit — cover (fills the frame, cropped), contain (full image visible, may letterbox), or original.
- Position X / Position Y — fine-tune what part of the image is centred in the frame. Essential when the important part of your photo (your face, a key visual element) would otherwise be cropped.
- Width — scales the image within the frame. Useful for zooming in or out on a specific part of the photo.
- Color Tint + Tint Opacity — overlays a colour over the hero image. Apply a tint matching your brand colour to unify a photo that otherwise wouldn't match. A dark tint (black at 30–50% opacity) ensures white text over the hero remains legible.
- Grain — film grain over the hero image, same as the BG Image grain control. Small amounts (10–20) add texture and a photographic quality.
- Background Carousel — instead of a single image, cycle through multiple hero images automatically.
- Background Video — replace the hero image with a looping video clip. Best for DJs with footage from live sets, studio sessions, or cinematic press content.
- Hero Header — controls the name, headline, and tagline overlaid on the hero image. Alignment (left, centre, right) and visibility.
- Hero Element Animations — choose an entrance animation for hero content. "Blur In" is the cleanest, fading and sharpening elements into view as the page loads.
- Hero Subtitle — an optional line of text below the tagline. Use it for a genre descriptor, a location, or a status ("Booking for 2026 now open").
- Hero CTA — a call-to-action button overlaid on the hero. Set the button label and it links to your booking form. Strong option for artists who want a clear action directly on the hero image.
Five Complete Design Recipes
Here are five working combinations you can apply directly in the profile editor. All settings match exactly the controls described above.
Recipe 1: Dark Club Minimal
For techno, drum & bass, or any dark electronic genre. Clean, sharp, confident.
- Layout: Link Page
- Background: Solid, #0f0f0f
- BG Image: off
- Text Color: #ffffff
- Font: Bebas Neue
- Size: 100%, Weight: Normal, Letter Spacing: 3px
- Field Background: Normal, colour #1a1a1a
- Border: on, colour #ffffff, opacity 15%, thickness 1px
- Corner Radius: 0px
- Content Panel: off
Recipe 2: Glass on Dark Image
For any genre where you have a strong press photo or live image. The most visually impressive approach for most DJs.
- Layout: Link Page or Hero
- Background: Solid, #111111
- BG Image: on, your best press photo, Opacity 45%, Blur 10, Grain 15
- Color Tint: #000000, Tint Opacity 20%
- Text Color: #ffffff
- Font: Montserrat or Poppins
- Weight: Bold, Letter Spacing: 1px
- Field Background: Glass
- Border: on, colour #ffffff, opacity 20%, thickness 1px
- Corner Radius: Pill
- Content Panel: off
Recipe 3: Warm Gradient
For house, soul, afrobeats, or any genre with warmer tones. Not the minimal DJ look, but distinctive and intentional.
- Layout: Compact
- Background: Linear gradient, #1a0a00 → #2d1500, angle 135°
- BG Image: off
- Text Color: #f5e6d3 (warm off-white)
- Font: Raleway
- Weight: Light, Letter Spacing: 2px, Line Height: 1.8
- Field Background: Normal, colour #2a1a0a
- Border: on, colour #c8a07a, opacity 25%, thickness 1px
- Corner Radius: 16px
- Content Panel: off
Recipe 4: Clean Light
For artists who want a bright, accessible, editorial look — jazz crossover, live music, acoustic or classical production.
- Layout: Link Page
- Background: Solid, #f7f5f2 (warm off-white)
- BG Image: off
- Text Color: #1a1a1a
- Font: Playfair Display or Fraunces
- Weight: Normal, Letter Spacing: 0px, Line Height: 1.7
- Field Background: Normal, colour #ffffff
- Border: on, colour #1a1a1a, opacity 12%, thickness 1px
- Corner Radius: 8px
- Content Panel: off
Recipe 5: Hero Cinematic
For DJs with strong video content — a festival set film, studio session, or cinematic press shoot. Uses the Hero layout to its full potential.
- Layout: Hero
- Background: Solid, #000000
- Hero Image or Video: your best live footage or press visual
- Opacity: 85%
- Color Tint: #000000, Tint Opacity: 25%
- Grain: 20
- Hero Header: centred, name + tagline
- Hero Element Animations: Blur In
- Hero CTA: enabled (label: "Book Now")
- Text Color: #ffffff
- Font: Oswald or Syncopate
- Letter Spacing: 4px (uppercase feel)
- Field Background: Glass
- Border: off
- Corner Radius: 12px
Saving Your Styling
Once you're happy with a combination, you can save it as a named styling template using the export function in the profile editor. This means you can experiment with different looks without losing your current setup — save your current styling first, then try something new, and reload your saved template if you want to go back.
The same export/import system lets you move styling settings between profiles if you manage multiple artists through the same bass.fan account — apply a consistent look to your whole roster in minutes.
The Design Principles That Apply to All of Them
- Contrast is non-negotiable. If your text is hard to read on mobile at arm's length, your profile is failing its most basic job. Test every combination on your actual phone before publishing.
- Fewer colours read better. Two colours — background and text — plus one accent colour is enough. Every additional colour you add requires more skill to handle well.
- The font does most of the personality work. Background and field styling give depth; the font gives character. Choose it carefully and let everything else support it.
- Glass and Pill on dark backgrounds currently read as "current". If you want to look contemporary rather than dated, this combination is the safest modern choice right now.
- Match your design to your live aesthetic. A DJ who plays minimal warehouse techno shouldn't have a warm, rounded, pastel profile. Your page should feel like your music sounds.
Frequently Asked Questions
Does my font choice affect mobile loading speed?
Yes, slightly. All 30 fonts in the bass.fan editor are Google Fonts, loaded via CDN. The impact is small (typically under 100ms) but measurable. If performance is a concern, Inter, Roboto, and Open Sans are the fastest to load as they're commonly cached in the visitor's browser already.
Can I use a custom font not in the list?
The current font list covers 30 Google Fonts selected for quality and music industry appropriateness. Custom font upload isn't currently available. If you want a specific typographic feel, try Syncopate (geometric/techy), Oxanium (industrial), or Righteous (retro) as alternatives to proprietary typefaces with similar personality.
Will my design look the same on desktop and mobile?
The profile editor has a desktop/mobile preview toggle. Use it. The main differences: Hero images crop differently on mobile (where the screen is taller and narrower), very wide letter spacing can push text off-screen on small phones, and Glass fields may appear slightly differently across devices depending on browser support for backdrop-blur.
How do I know which background image will work?
Portrait orientation, face or key subject in the upper third, reasonably high contrast across the frame. Images that work well in practice: live shots from behind the decks, festival stages, darkened studio photos. Images that cause problems: fully white or fully black photos (no room to add depth), heavily detailed images (compete with text even when blurred), images with important elements at the edges (they get cropped on mobile).
What corner radius should I use for my avatar/profile picture?
The Corner Radius setting applies to your profile picture too — 0px makes it a sharp square, 8px gives a rounded rectangle, 9999px (Pill) gives a circle. For Link Page and Compact layouts, a circular avatar (Pill) is the most common and reads instantly as a profile picture. For Hero layout, the avatar is usually replaced by the hero image, so this matters less.
Can I change the styling of individual widgets separately from the global field style?
The Field Styling settings (Background, Border, Corner Radius) apply globally to all widgets on your profile. Individual widget colour overrides aren't available through the main Fields control — but the overall colour tone of your widgets is pulled from your Text Color and Field Background Color choices, giving everything a cohesive palette automatically.
Claim your BassFan profile