Styling Tokens

Three colors plus five preset families drive every control in the hosted login. All together they represent about ten decisions per theme — enough room to sit anywhere on the design spectrum without writing CSS. For the visual foundation these presets target, see the design tokens reference.

Colors

Hex input format

Colors accept hex only. The studio provides a native color picker alongside a text input. Acceptable formats for the text input:

• #RRGGBB — six-digit hex (most common). #006B2C is valid.
• #RRGGBBAA — eight-digit hex with alpha. Accepted but rarely useful; prefer controlling opacity via surface style.
• Shorthand #RGB is not accepted — type the full six digits.
• The # is optional on input; it's normalized in automatically. 006B2C → #006B2C.

Invalid hex input silently resets the field. Check the picker if you see colors not updating — it means your input was rejected.

The surface color toggle

Flip Apply custom surface tint (useSurfaceColor) on when you want a specific card color that isn't a shade of the background. When it's off, BluAuth derives a subtle surface fill from color-mix(in srgb, var(--auth-background) 80%, black 20%) — a slightly darker version of the background. This is usually fine, and it's the default.

Turn it on when:

• Your brand has a specific card color in the design spec (e.g. a lighter neutral over a deep canvas).
• You're using a light theme and need the card to sit above the canvas tonally.
• Your background is an image and you need the card to have a solid, predictable fill.

How surface color interacts with full-bleed backgrounds

When a Full Bleed background image is set, the background canvas behind the card is the image, not the background color. The card still renders with its surface fill on top. If the surface is transparent or low-opacity (glass style), the image shows through. If the surface is solid, the card blocks the image behind it — which is often what you want for text legibility.

Plan accordingly: dark image + glass surface + dark primary = unreadable text. Test with your real image, not a placeholder.

Contrast responsibility

The studio does not enforce WCAG contrast ratios. If you set a primary that can't be seen against your background, or body text that fails 4.5:1 against your surface, no warning fires — the form just renders unreadable. Treat contrast as your job. If you're unsure, validate against WebAIM's contrast checker using your resolved colors.

A rule of thumb: primary vs surface should reach at least 4.5:1 for interactive controls, and body text vs surface should reach 7:1 for small copy. See the design tokens reference for the Precision Curator palette, which is pre-tuned to these ratios.

Font Family Preset

Five presets. Underlying field: fontFamilyPreset.

• system — fastest. The most native feel. Pick this if you don't have a reason not to.
• inter — the neo-grotesque baseline of the Precision Curator system (see design tokens). Loaded from Google Fonts.
• roboto — Android-native feel.
• humanist — softer grotesque, reads warmer than Inter.
• editorial — a serif. Distinct; best paired with editorial / cinematic-split layouts when the brand leans heritage.

Surface Style Preset

Controls the card / form panel finish. Underlying field: surfaceStylePreset.

Matches the "No-Line Rule" in the design tokens reference — boundaries come from tonal shifts, not 1px borders.

Field Style Preset

Controls how inputs look. Underlying field: fieldStylePreset.

• quiet is the best match for editorial aesthetics (split-hero or cinematic-split with elevated surface).
• high-contrast is the right call when your primary has low contrast against the background — the extra border opacity keeps inputs findable.

Button Style Preset

Controls primary CTAs. Underlying field: buttonStylePreset.

• solid is the most clickable. It's the right default for every layout.
• soft reads as gentler and pairs well with minimal.
• outline is the right call for sparse layouts where you want the form to feel less heavy — especially aurora with a dark background where a solid button can look like a hole.

Density Preset

Controls vertical rhythm. Underlying field: densityPreset.

Use compact when:

• You have a lot of supporting copy and the form pushes below the fold.
• You're targeting short viewports (laptops in dock, below-fold-sensitive landing pages).
• You're using cinematic-split --height-contained and want the form to breathe less.

A safe default combo

If you're not sure where to start:

• Layout: split-hero
• Primary: your brand color (not blue — see design tokens)
• Background: #0F172A (deep slate) or your brand dark
• Surface Color: leave off (let BluAuth derive)
• Font: system (or inter if you want the Precision Curator baseline)
• Surface Style: elevated
• Field Style: quiet
• Button Style: solid
• Density: comfortable

That combination lands cleanly for almost every tenant. Iterate from there.

Next

• Concept copy — what the headings, subheadings, and hero fields control.
• Assets and backgrounds — how logo and background image interact with these presets.
• Advanced CSS — when the presets aren't enough.