AStudio View site →
Brand Guidelines · v1.0
AStudio

The complete visual identity for AStudio — a personal creative-tech studio by Abdalla. Premium, futuristic, confident, and built to stay consistent everywhere.

02 — Color

Near-black canvas, electric accents.

A restrained dark palette lets the cyan→violet accent carry the brand. Use accent sparingly for emphasis, CTAs, and the gradient.

InkBackground#07080C
SurfaceCards / panels#0F121B
CyanPrimary accent#22D3EE
VioletSecondary accent#8B5CF6
BlueGradient mid#3B82F6
WhitePrimary text#F2F5FB
GraySecondary text#9AA3B5
Signature gradient · 135°
Accent gradientCyan → Blue → Violet#22D3EE → #8B5CF6
03 — Typography

Space Grotesk & DM Sans.

A tech-forward geometric display face paired with a clean, highly readable text face. Tight tracking on headings, comfortable line-height on body.

Display / Headings
Ag
Space Grotesk
Headlines, logo wordmark, labels, numbers.
Regular 400Medium 500SemiBold 600Bold 700
Body / UI
Ag
DM Sans
Paragraphs, UI text, inputs, captions.
Regular 400Medium 500Bold 700
Eyebrow / Label
Building premium digital experiences
A personal studio with a builder’s mindset
Body copy uses DM Sans at 16px with a 1.6 line-height for comfortable reading. Keep measure to roughly 60–75 characters per line for the cleanest rhythm.
04 — UI Elements

Icons, buttons & motion.

Line icons at a consistent 1.8px stroke. Buttons are pill-shaped; the primary uses the accent gradient. Motion is purposeful and quick.

ReactFigmaAI WorkflowsAutomation

Motion principles

  • Easing — cubic-bezier(.22,.61,.36,1)
  • Micro-interactions — 150–250ms
  • Hover / cards — 250–400ms
  • Section reveal — 700ms, fade + rise
  • Accessibility — honors prefers-reduced-motion
05 — Brand Voice

Confident, clear, human.

AStudio speaks like a skilled builder — direct and warm, never hyped or salesy. Show the work; let quality do the talking.

Confident

Sure of the craft, without bragging.

Clear

Plain language over jargon.

Modern

Current, sharp, forward-looking.

Human

Personal and approachable.

SAY
  • “Designed & built end-to-end.”
  • “Premium, considered, fast.”
  • “Let’s build something great.”
AVOID
  • “World’s #1 / the best ever.”
  • Buzzword stacks & empty hype
  • Over-promising or pushy CTAs
06 — Applications

The identity in use.

Consistent application across touchpoints — from the favicon to the social card.

AStudio
Abdalla · Creative-Tech Studio
abdoosalih346@gmail.com · WhatsApp
Web · UI/UX · AI Workflows
Business card
AStudio favicon
App icon · Social avatar · Favicon