Visual Identity System — Version 3.0
Brand
Guide.
The complete reference for everyone who builds, designs, or communicates with the Creative Frontiers brand. Every token, every component, every rule — in one place.
The Palette
Every color in the Creative Frontiers system has a specific role. The signature gradient is the brand's defining visual element — use it with intention.
Usage Guidelines
- Use for interactive elements and hover states
- Section eyebrow text and marker bars
- Focus rings on form inputs (with 12% opacity fill)
- Dashed ghost button text and border-on-hover color
- Active navigation item indicator
White text on near-black (#020202) with cyan border — the primary CTA pattern. Maximum contrast, clearly actionable.
The signature gradient works as a button background for hover and active/pressed states. It adds energy to interactions.
Gradient 3px marker bar before #2FBDF1 uppercase eyebrow text on a light background — the canonical section label pattern.
Never use gradient stop colors (#FF3CAC, #FF8A00) directly as text or UI color outside the gradient. They exist only as gradient stops.
Never introduce off-brand colors (purple, green, red) for UI elements. All interactive color is #2FBDF1 or the signature gradient.
Don't pair the accent cyan with arbitrary dark backgrounds. The approved dark surface is #020202 (near-black), not navy, charcoal, or dark blue.
Don't use generic red/green/yellow for status. Use the brand semantic colors defined in the system to maintain palette cohesion.
Type System
Two typefaces. One purpose each. Playfair Display brings editorial gravitas to headlines. Inter handles every UI task with precision.
abcdefghijklmnopqrstuvwxyz
0123456789 &.,!?
abcdefghijklmnopqrstuvwxyz
0123456789 &.,!?
Tell us about your organization
We'll use this information to personalize your experience and help you get the most out of Creative Frontiers. You can update these details at any time from your settings.
Space & Structure
All spacing is derived from an 8px base unit. Consistent spatial rhythm creates the calm, intentional feel of the Creative Frontiers UI.
UI Components
The building blocks of every Creative Frontiers screen. Each component is designed to its token spec — exact radii, shadows, and spacing.
Visual Effects
The aurora background, brand shadow, and gradient usage rules define the atmosphere of every Creative Frontiers screen.
Aurora Background Effect
Soft, large radial gradients with heavy blur (filter: blur(120px)) create a watercolor/aurora atmosphere behind the content card. Three blobs: cyan top-right, pink bottom-left, orange center.
filter: blur(120px); opacity: 0.18–0.35Brand Shadow
A blue-tinted shadow gives cards subtle depth that ties back to the brand's cyan accent. Used on primary cards and the page header. Never use a neutral black shadow on branded surfaces.
0px 8px 30px rgba(0,117,226,0.1)Progress Bars
Two sizes: 4px page progress (fills with scroll), 3px step bar (discrete segments). Both use the 90deg gradient for completed, solid accent for active, border gray for upcoming.
height: 3–4px · border-radius: 2px (--r-xs)Gradient Usage Map
The 135deg gradient is the brand signature. It is used at 4 scale points: large fills (progress bars), small markers (3px bars), single keyword text treatment (1–2 per viewport max), and thin top-edge card accents.
135deg (decorative) · 90deg (horizontal fills)Logo Usage
The Creative Frontiers logo is the most recognizable element of the brand. Use it consistently and respect its clear space, minimum size, and color rules.
Logo Variants
Clear Space & Minimum Size
Maintain clear space equal to the height of the starburst icon (1x) on all sides. This ensures the logo breathes and maintains its visual integrity.
Logo Misuse
Brand Rules
The most common brand mistakes — and the right way to use Creative Frontiers design elements. Follow these rules to maintain brand integrity.
Use the gradient on 1–2 headline keywords and as decorative bars. The contrast between the black heading and the gradient keyword creates maximum visual impact.
Never use the gradient as a full background or behind paragraph text. It reduces legibility and trivializes the brand's signature element by overusing it.
Playfair Display Bold for the heading, Inter Regular for body copy. The serif/sans contrast creates the editorial tone that defines Creative Frontiers.
Never substitute Playfair Display with Times New Roman, Georgia, or any other serif. Only Playfair Display + Inter are approved. System fonts break the brand character entirely.
Use --sp-4 (32px) padding inside cards and --sp-6 (48px) between form sections. White space is intentional and communicates premium quality.
Never reduce button padding below 10px/20px. The primary CTA requires 12px/24px minimum. Cramped targets break the premium feel and harm accessibility (touch target <44px).
Use the blue-tinted brand shadow (0px 8px 30px rgba(0,117,226,0.1)) on all primary cards. It subtly reinforces the brand color system and differentiates CF from generic white-card UIs.
Only use colors from the CF token set. Purple, red, and green have no role in the Creative Frontiers palette (outside semantic system states). Off-brand colors dilute the visual identity immediately.