The dFlow mark,in public.
Logos, colors, and type for press, partners, and community. Download the files. Keep the sprite as it is drawn.
Accent
#f97316
Display
Space Grotesk
Machine
JetBrains Mono
Clearance
10px
Logo
Lockup, mark, wordmark.
Lockup is the looping sprite plus the outlined wordmark. Mark-only stays static.
Dark
clearance · 10px
Light
clearance · 10px
Mark · optical sizes
Wordmark
Space Grotesk · outlined
Color
Charcoal, then orange.
Five roles per theme. Accent is the same orange in light and dark.
Accent · CTAs, live indicators, the mark
#f97316
Background
#090909
Page
Surface
#141414
Cards, navbar island
Foreground
#f2f2f2
Headings, body
Muted
#a7abb4
Secondary text
Background
#f6f6f6
Page
Surface
#ffffff
Cards, navbar island
Foreground
#141414
Headings, body
Muted
#6b7280
Secondary text
dFlow. Colors, fonts, radius, tracking. Paste into tweakcn Import or your shadcn globals.css.
/* Theme: dFlow — https://dflow.sh/brand */
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
:root {
--background: hsl(0 0% 96.5%);
--foreground: hsl(0 0% 7.8%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(0 0% 7.8%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(0 0% 7.8%);
--primary: hsl(24.6 94.6% 53.1%);
--primary-foreground: hsl(0 0% 100%);
--secondary: hsl(0 0% 94.5%);
--secondary-foreground: hsl(0 0% 15%);
--muted: hsl(0 0% 94.5%);
--muted-foreground: hsl(220 8.9% 46.1%);
--accent: hsl(0 0% 92.2%);
--accent-foreground: hsl(0 0% 7.8%);
--destructive: hsl(0 72% 51%);
--destructive-foreground: hsl(0 0% 100%);
--border: hsl(0 0% 88.6%);
--input: hsl(0 0% 88.6%);
--ring: hsl(24.6 94.6% 53.1%);
--chart-1: hsl(24.6 94.6% 53.1%);
--chart-2: hsl(143.8 61.2% 52%);
--chart-3: hsl(206.7 89% 67.8%);
--chart-4: hsl(174.3 41.8% 50.8%);
--chart-5: hsl(325.5 100% 73.7%);
--sidebar: hsl(0 0% 100%);
--sidebar-foreground: hsl(0 0% 7.8%);
--sidebar-primary: hsl(24.6 94.6% 53.1%);
--sidebar-primary-foreground: hsl(0 0% 100%);
--sidebar-accent: hsl(0 0% 92.2%);
--sidebar-accent-foreground: hsl(0 0% 7.8%);
--sidebar-border: hsl(0 0% 88.6%);
--sidebar-ring: hsl(24.6 94.6% 53.1%);
--font-sans: Space Grotesk, ui-sans-serif, system-ui, sans-serif;
--font-serif: Georgia, serif;
--font-mono: JetBrains Mono, ui-monospace, monospace;
--radius: 1rem;
--tracking-normal: -0.015em;
--spacing: 0.25rem;
}
.dark {
--background: hsl(0 0% 3.5%);
--foreground: hsl(0 0% 94.9%);
--card: hsl(0 0% 7.8%);
--card-foreground: hsl(0 0% 94.9%);
--popover: hsl(0 0% 7.8%);
--popover-foreground: hsl(0 0% 94.9%);
--primary: hsl(24.6 94.6% 53.1%);
--primary-foreground: hsl(0 0% 100%);
--secondary: hsl(0 0% 10%);
--secondary-foreground: hsl(0 0% 85%);
--muted: hsl(0 0% 7.8%);
--muted-foreground: hsl(220 8% 68%);
--accent: hsl(0 0% 12.2%);
--accent-foreground: hsl(0 0% 94.9%);
--destructive: hsl(0 72% 51%);
--destructive-foreground: hsl(0 0% 100%);
--border: hsl(0 0% 12.2%);
--input: hsl(0 0% 12.2%);
--ring: hsl(24.6 94.6% 53.1%);
--chart-1: hsl(24.6 94.6% 53.1%);
--chart-2: hsl(143.8 61.2% 52%);
--chart-3: hsl(206.7 89% 67.8%);
--chart-4: hsl(174.3 41.8% 50.8%);
--chart-5: hsl(325.5 100% 73.7%);
--sidebar: hsl(0 0% 7.8%);
--sidebar-foreground: hsl(0 0% 94.9%);
--sidebar-primary: hsl(24.6 94.6% 53.1%);
--sidebar-primary-foreground: hsl(0 0% 100%);
--sidebar-accent: hsl(0 0% 12.2%);
--sidebar-accent-foreground: hsl(0 0% 94.9%);
--sidebar-border: hsl(0 0% 12.2%);
--sidebar-ring: hsl(24.6 94.6% 53.1%);
--font-sans: Space Grotesk, ui-sans-serif, system-ui, sans-serif;
--font-serif: Georgia, serif;
--font-mono: JetBrains Mono, ui-monospace, monospace;
--radius: 1rem;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
--tracking-normal: var(--tracking-normal);
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
letter-spacing: var(--tracking-normal);
}
}
Type
Two faces. Three roles.
Display and body share Space Grotesk. Machine output is JetBrains Mono.
display-xl
72
dFlow
display-lg
56
Deploy anything
display-md
36
Run it anywhere
body-lg
18
Deploy from git. dFlow builds it and keeps it running.
label
13
repo scan
Use
Keep the sprite intact.
Clear space is one eye-height on every side. Do not invent a second mark.
01
Do not stretch or crop
Keep the aspect ratio. Do not rotate, crop the crests, or squeeze the lockup.
02
Do not recolor the mark
The sprite stays orange. No shadows, gradients, or extra strokes.
- void
03
Do not use retired marks
The purple letterform and the play-triangle stamp are retired. Do not mix them with this kit.
Dflow
DFLOW
dFlow
04
Write dFlow
Preserve that capitalization. Not Dflow, DFLOW, or dflow in a headline.
- lockupmark
05
Mark below 144px
Full lockup needs room. Use the mark alone when the lockup would sit under 144px wide. The mascot is not a favicon.
Downloads
Take the files.
SVG only. Serve as image/svg+xml. Animation files stay out of this kit.
