Skip to content
oneflows.xyz logo

OneFlow

oneflows.xyz

“OneFlow projects a sophisticated, developer-centric aesthetic that balances technical precision with modern elegance. The brand feels like a high-end tool for creators, utilizing a clean, spacious layout and a distinctive purple accent to signal innovation and speed without sacrificing professionalism.”

developer-first
sleek
modern
efficient
technical
clean
purple-accented
minimalist

Color Palette

Colors

#7033ff

primary

#ffffff

background

#fcfcfc

surface

#000000

text

#595959

secondaryText

#595959

muted

#5865f2

accent

Typography

Fonts

Aeonik

body
400
500
600
self-hosted

ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

Aeonik

heading
500
600
700
self-hosted

ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

Aeonik Mono

mono
400
self-hosted

ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

Components

Design System

Websites
secondary
9999px
#ffffff#ffffff
ghost
ghost
9999px
#000000
Create a marketplace landing page
outline
9999px
#ffffff
primary
primary
8px
#7033ff#ffffff
card
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

card
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.18) 0px 24px 70px 0px

navigation
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(252, 252, 252, 0.9) 0px 18px 70px -54px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(250, 219, 95, 0.4) 0px 0px 20px 0px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.7) 0px 12px 30px -20px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.45) 0px 24px 70px -38px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(168, 85, 247, 0.15) 0px 30px 100px -20px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(34, 197, 94, 0.8) 0px 0px 8px 0px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(112, 51, 255, 0.25) 0px 24px 80px -24px

element
box-shadow

rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(88, 101, 242, 0.4) 0px 0px 20px 0px

gradient

radial-gradient(at center top, rgba(112, 51, 255, 0.28), rgba(0, 0, 0, 0) 62%)...

gradient

radial-gradient(at center bottom, rgba(224, 234, 255, 0.36), rgba(112, 51, 255, ...

gradient

linear-gradient(rgba(252, 252, 252, 0.08), rgba(252, 252, 252, 0.55) 52%, rgba(2...

gradient

radial-gradient(circle at 50% -8%, rgba(112, 51, 255, 0.09), rgba(0, 0, 0, 0) 36...

gradient

linear-gradient(90deg, rgb(112, 51, 255), rgb(224, 234, 255))...

gradient

linear-gradient(to right, rgb(250, 219, 95), rgb(247, 183, 51))...

Voice & Tone

Personality

Visual Energy

7/10

Design Era

contemporary-minimal

Emotional Tone

confident-precise

Target Audience

Developers, technical founders, and AI-savvy creators who value speed, code quality, and modern tooling over flashy consumer aesthetics.

Comparable Brands

Vercel
Linear
Stripe
Framer

Brand Rules

Dos & Don'ts

Do

  • Use Aeonik font family exclusively: 500/600/700 weights for headings (Title Case) and 400/500/600 for body text with a strict 24px line-height.
  • Use Aeonik Mono (400 weight) for all code snippets, technical labels, and data displays to reinforce the developer-first identity.
  • Apply primary brand color #7033ff for main CTAs and key interactive elements; use #5865f2 sparingly for secondary accents or hover states.
  • Style primary buttons with 8px border-radius, solid #7033ff background, white text, and zero shadow to maintain a flat, crisp interface.
  • Style secondary/ghost buttons with 9999px (pill) border-radius, transparent or white background, and #e7e7ee border for a softer, navigational feel.
  • Utilize radial gradients subtly in backgrounds (e.g., at-center-top with rgba(112, 51, 255, 0.28)) to create depth without cluttering the UI.
  • Keep shadows minimal or non-existent on cards and UI elements; rely on whitespace and border colors (#e7e7ee) for separation rather than drop shadows.
  • Maintain a base spacing unit of 2px for consistent padding and margin calculations across all components.

Don't

  • Do not use serif fonts or system default sans-serifs; Aeonik and Aeonik Mono are mandatory for brand consistency.
  • Do not use excessive drop shadows or layered depth effects; the design is flat and clean, avoiding the 'glassmorphism' or 'neo-brutalism' heavy shadow styles.
  • Do not use emoji in marketing copy; the brand maintains a serious, professional tone with light or no emoji usage.
  • Do not use sentence case for headings; strictly adhere to Title Case for all H1-H6 elements.
  • Do not use sharp 0px or 4px corners for buttons; primary buttons use 8px, while secondary elements use full pill (9999px) shapes.
  • Do not use bright, saturated colors outside the purple/blue spectrum; avoid reds, greens, or oranges in the primary UI palette.
  • Do not use heavy jargon without context; while the audience is technical, the copy should remain accessible and action-oriented.
  • Do not use exclamations in copy; the tone is matter-of-fact and confident, avoiding hype-driven punctuation.

Design Assets

Visual Elements

OneFlow logo
png384×384
Holographic hummingbird
png585×585
Fullscreen Hero Landing Page for A
png2560×1600
Premium Private Jet Landing Page Hero
png418×261
Single Full-viewport Hero Section in React
png418×261
Full-screen Single-page React Typescript Vite Tailwind
png418×261
Modern High-performance Landing Page Section Using
png418×261
Single-page React Typescript Vite Tailwind Site
png418×261
Amazon
png227×68
HubSpot
png244×68

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/oneflows.xyz \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free