Brand Guidelines

Visual identity system for Arclen. Dark-mode glassmorphism UI with burnt orange accent.

Logo

Wordmark

/logos/arclen-wordmark.webp (light text)/logos/arclen-wordmark.png (light text, fallback)/logos/arclen-wordmark-dark.png (dark text)

Logomark

App icon

SVG mark

Torus (v4)

Hero size — 240px

Compact w/ blue glow — 160px

/images/torus/torus-v4-hero.webp (48KB)/images/torus/torus-v4-compact.webp (12KB)/images/torus/torus-v4-hero.png (fallback)

Logo Rules

✕Don't change the logo colors

✕Don't stretch, rotate, or distort the logo

✕Don't place the logo on busy backgrounds without contrast

✕Don't use the ember dot without the wordmark in marketing

✕Don't use the old torus assets (torusv2, torus-hero) — torus v3 only

Color System

Primary Accent — Ember

Ember

#E85D04 · primary brand

Ember Hover

#F07020 · hover state

Ember Light

#FF8C42 · gradient end

Ember Bright

#FFAA40 · gradient start (CTA)

Ember Mid

#FF8918 · borders, glows

Ember Muted

rgba(232,93,4,0.15) · bg tint

Secondary Accent — Blue

Blue

#0064F0 · accent-blue

Blue Light

#0098F3 · accent-blue-light

Blue Mid

#1A9FF8 · AI / chat surfaces

Blue Bright

#0B93F6 · glow shadows

Navy

#0A2A5C · gradient bridge

Blue Muted

rgba(0,100,240,0.12) · spotlight

Brand Gradients

Three purposeful gradients, each staying in one hue family. Warm and cool tell the brand story compositionally — ember elements next to blue elements — not by blending inside a single surface.

Ember CTA

Primary buttons, hero CTAs, active accents.

background: radial-gradient(ellipse 70% 80% at 15% 25%, rgba(255,211,122,0.5), transparent 60%), linear-gradient(135deg, #FFAA40 0%, #FF8C42 30%, #F07020 65%, #E85D04 100%);

Blue Accent

AI surfaces, Build tier, secondary brand moments.

background: radial-gradient(ellipse 60% 80% at 15% 30%, rgba(122,200,255,0.45), transparent 60%), linear-gradient(135deg, #4AB4FF 0%, #0098F3 30%, #0064F0 65%, #0A2A5C 100%);

Glass Surface

Subtle glass card fill. Pairs with the 1px white/[0.08] border.

linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%)

Surfaces

Arclen is dark-first but now supports light editorial passages on the homepage and marketing pages. Use dark surfaces for app/dashboard and hero moments; light surfaces for stat grids, comparison tables, and long-form editorial content.

Dark — App, Dashboard, Hero

Background

#0A0A0A · page bg

Dark Bridge

#09090B · section transition

Surface

#0D0D0D · bg-surface

Card

#141414 · bg-card

Elevated

#1E1E1E · bg-elevated

Light — Editorial, Comparison, Stats

Pure White

#FFFFFF · canvas

Soft Warm White

#F7F7F8 · section bg

Light Editorial

#F3F3F5 · stat + quote cards

Layering rule. Light sections use all three together: #FFFFFF as the section canvas, #F7F7F8 as the page/table bg, #F3F3F5 for cards/stats that sit on top. Never flat white — always layered.

Ambient Depth Presets — Dark

bg-depth-rich

Marketing sections — black base with warm ember undertone + soft white highlights. Use as a full-section background.

@utility bg-depth-rich — globals.css

bg-depth-muted

Dashboard / app pages — quieter black wash with minimal ember warmth. Use when content should feel focused, not atmospheric.

@utility bg-depth-muted — globals.css

Text

Primary

#FFFFFF · text-primary

Secondary

rgba(255,255,255,0.7)

Muted

rgba(255,255,255,0.4)

Semantic

Success Warning✕ Error AI / Build

Success

#22C55E

Warning

#F59E0B

Error

#EF4444

Never Use

✕orange-500 / orange-400 / orange-600 — use ember tokens instead

✕text-base as a color — it's Tailwind's font-size utility

✕rgba() for borderColor in @react-pdf — renders bright green

Typography

Headings

Space Grotesk

400 · 500 · 600 · 700

Body

Geist Sans

400 · 500 · 600

Code

Geist Mono

400 · 500

Usage Rules

Space Grotesk— h1, h2, h3 only — auto-applied via @layer base in globals.css

Geist Sans— Everything else: body, nav, buttons, labels, descriptions

Geist Mono— Code blocks, data values, monospaced content

✕Use Inter — removed from codebase entirely

✕Apply font-display to buttons, nav, body text, or labels

✕Import fonts directly — use CSS variables

Button Hierarchy

Primary CTA

GlowButton (ember variant)

Ember gradient fill, dimensional reflex, outer ember glow, hover lift + press scale.
Use for: hero CTAs, "Start Scan", "Get Started"

Secondary CTA

LiquidGlassButton (default state)

Frosted glass with 6-layer inset reflex, drop shadow elevation, hover lift + press scale.
Use for: "Learn More", "Work With Us", secondary actions

Dashboard Navigation

db-nav-item / db-nav-item-active CSS

Ad Diagnosis

Page Diagnosis

Builder

Glass-ember active state, left accent bar, top highlight.

Dashboard Tabs

db-tab / db-tab-active CSS

Glass-ember active state, bottom ember bar with 3s pulse.

Brand Button System

GlowButton (ember) — Primary CTA

Diagnose / sign up / hero actions

GlowButton (blue) — AI / Build CTA

AI features, Build tier, secondary brand moments

LiquidGlassButton — Secondary action

Learn more / view pricing / quieter actions

DashNavItem

Ad Diagnosis

Page Diagnosis

Builder

DashTab

Summary

Audit

Rewrite

Strategy

Bottom ember bar with 3s pulse animation

LiquidGlassButton (default / active / pill / rounded)

Apple-style frosted glass with 6-layer inset reflex shadow stack — same aesthetic family as LiquidGlassSwitcher

Icon Buttons

Use GlassIconButton for icon-only actions: settings, search triggers, close, social links. Sizes 32 / 40 / 48 (default) / 56. Default and accent variants.

Never

✕Mix button styles within the same row

✕Use accent GlassIconButton as a primary CTA — pair it with a labeled GlowButton instead

✕Use the legacy GlassButton component on new pages — use GlowButton (primary) or LiquidGlassButton (secondary)

Badges

Default Accent SuccessDangerSmallSmall Accent

OpaqueOpaque AccentRoundedRounded Accent

Form Controls

Inputs

Toggles

Default Off

Accent On

Sliders

Conversion Score65%

Page Speed40%

Progress Bars

Default65%

Accent65%

Cards

GlassCard — interactive primitive with cursor-tracked spotlight, hover lift, and press scale. Use for clickable feature tiles. Four variants: default, ember accent, blue accent, and clear (see-through for overlays / rich-backdrop moments).

Page Diagnosis

AI-powered analysis

Get a complete conversion audit of your landing page with specific, actionable fixes.

Ad Diagnosis

Creative analysis

Analyze your ad creatives against proven frameworks. Identify why ads underperform.

Live

AI Builder

Ship pages 10× faster

Describe what you want, AI builds it. Fine-tune with the visual editor.

AI / Build

Build Pro

Popular

$97/mo

GlassPanel — static pricing tile

2 LP scans / month

500 AI credits

Custom domains

Clear variant — minimal tint + lighter blur. Use when you want the backdrop to read through (overlays, cards on rich imagery, modals).

Clear card

See the glow behind?

Minimal tint means the backdrop breathes through. Still frosted enough to read text cleanly.

No hover

Static overlay mode

Pass hover={false} for non-interactive contexts like modals.

Brand Card & Effect System

GlassPanel Primitive

Frosted glass content surface with subtle top specular + masked top-left (white) + bottom-right (brand) borders. Reusable — wrap anything. Use for pricing tiles, feature cards, sidebar panels.

Reusable surface

Drop content inside — premium beveled edges, rich frost, and subtle corner catchlights give the glass real dimension.

GlassOverlayCard Showpiece

Layered card: solid brand gradient behind, frosted glass overlay on top with background-clip text reveal. Use for hero moments (about / brand / blog header). Not for repeating content. Two variants: blue (default) and ember.

Transforming technology to serve the people

ARCarclen.com

Transforming technology to serve the people

ARCarclen.com

LiquidGlassSwitcher

iOS-style segmented theme/option pill with SVG displacement filter.

GlassFeatureCard

Hero feature card with three wobbling accent cards behind, two rotating ring ornaments, and a top light bar.

Design Smarter, Not Harder

Unlock powerful tools to create pixel-perfect designs in record time.

Get Started

NeonGlassMenu

Command-palette menu with noise-masked conic-gradient neon glow corners (dual-hue: ember + blue). Try it: ⌘Kto toggle, ↑↓to navigate, type to filter.

Effects

Noise Texture

Without noise

Clean

Standard glass surface

With noise (8%)

Frosted

Physical grain texture

Shimmer Sweep

Hover Me

Light sweep on interaction

Continuous loop

Fetching analysis results

Skeleton Loaders

Spacing & Radii

Spacing Scale

--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

Border Radii

8px

12px

16px

card

20px

2xl

24px

pill

9999px

Critical Warnings

orange-500 in Tailwind→ Use text-ember, bg-ember

text-base as color→ Use bg-base CSS class or explicit color

GlassButton variant='accent' as primary CTA→ Use GlowLink / glow-btn

font-display on body text→ Only h1/h2/h3 — body stays font-sans

Inter font reference→ Use Geist Sans (font-sans)

rgba() in @react-pdf borderColor→ Use solid hex values

Hardcoded px for spacing→ Use var(--space-N)

'base' as Tailwind color token→ Defined as CSS utility class instead

Composition Example — Score Card

Overall Score

out of 100

Headline Clarity62

CTA Strength35

Social Proof28

Page Speed71

Motion Path — Animated Tracks

Dark variant — ember dot on muted ember track.

Light variant — ember dot on near-black track for editorial / print surfaces.

Internal brand guidelines — do not distribute