Progress over perfection
Celebrate work in motion. Unfinished does not mean unworthy of sharing.
DevLog / Visual System
Built formotion.
The visual language behind DevLog — an editorial, developer-first system designed around progress, clarity, and work that is still taking shape.
Visual system / 2026
01Editorial
02Technical
03Human
04In motion
Foundations
Principles before pixels.
The visual system can evolve. These principles should continue guiding how DevLog feels and behaves.
Calm over noise
Create hierarchy through type, spacing, and contrast before adding decoration.
Community over vanity
Design for useful conversations and shared learning, not inflated metrics.
Builders over consumers
Every experience should encourage developers to create, document, and return.
Color
Color should guide attention.
DevLog uses a warm neutral foundation, deep ink, and a restrained teal brand accent. Semantic colors communicate state without competing with the identity.
Background#F3F0E8 / bg-background
Foreground#171916 / bg-foreground
Card#F8F5EE / bg-card
Primary#1E7A6F / bg-primary
Gold#D9A45F / #E2B66F · bg-accent-warm
Secondary#E6E3DA / bg-secondary
Accent#DCE8E5 / bg-accent
Muted#E6E3DA / bg-muted
Border#CBC7BC / bg-border
Success#327A50 / bg-success
Success Subtle#DCEADE / bg-success-subtle
Destructive#B42318 / bg-destructive
Brand
Primary actions, active states, links, focus, motion accents, and DevLog identity.
Neutral
Page foundations, surfaces, borders, quiet states, and supporting information.
Success
Published, deployed, connected, completed, verified, and healthy states.
Destructive
Errors, deletions, failed actions, dangerous operations, and critical warnings.
Brand rule
Teal is an accent, not a wallpaper.
Use the brand color to guide attention and create recognition. Success and destructive colors should only appear when they carry semantic meaning.
Typography
Type has a job.
Anton carries DevLog's bold display voice, Manrope handles the interface, Source Code Pro provides structure, IBM Plex Mono carries technical metadata, and Times New Roman adds an editorial voice for explanation and storytelling.
Display / Anton
Build inmotion.
Heading / Manrope
Projects show what you built.Posts show how you got there.
Body / Manrope
DevLog gives developers a place to document progress, share unfinished work, and follow projects from the first commit to launch.
Section marker
02 / Community
Source Code Pro is used for numbered chapters, action labels, and editorial markers.
Technical metadata
@alishacreates · 12m · #nextjs
IBM Plex Mono is reserved for timestamps, tags, IDs, code-adjacent labels, and technical context.
Interface
Publish Post
Manrope stays readable across navigation, forms, buttons, cards, and product UI.
Editorial / Explanation
The decisions, bugs, lessons, experiments, and small wins are part of the story too.
Times New Roman is reserved for explanatory, reflective, and story-driven content where DevLog needs a more editorial voice.
Type rule
Display type creates identity. Interface type creates clarity. Editorial type gives the story a voice.
Actions
Actions should feel deliberate.
DevLog uses clear pill actions, restrained secondary controls, and semantic destructive states.
Action hierarchy
Primary actions carry the strongest emphasis. Secondary actions stay visible without competing for attention.
Navigation actions
Navigation should remain explicit. Use text labels when an icon alone would make the destination unclear.
Primary
Use one dominant action per decision area.
Secondary
Use borders or quieter text when an action should remain available without competing.
Icon only
Use icon-only controls only when the meaning is familiar and an accessible label is provided.
Forms
Forms should feel structured, not heavy.
DevLog groups related fields into calm surfaces, keeps validation close to the input, and gives the primary action clear visual priority.
Field patterns
Keep it short and specific.
Enter a valid URL.
Post details
Related fields should live together in a clearly defined section.
DevLog
Improved developer discovery
Media
Screenshots and visual progress belong in their own section.
Tags
Keep supporting metadata visually quieter than core content.
Project visibility applies
Supporting information should explain behavior without competing with the form.
Group related fields
Use rounded content sections to break longer forms into understandable pieces.
Validate locally
Field-specific errors stay beside the field instead of becoming toast notifications.
One primary action
Creation and save actions receive the strongest emphasis. Cancel remains secondary.
Social content
Core post pattern
Posts are the heart of DevLog. They should feel social while retaining useful project context.
AM
Alisha@alishacreates·12m
Finished the first DevLog landing-page direction today. It still needs refinement, but the product is starting to feel real.
DevLog#nextjs#typescript#design
Avatar, identity, timestamp, and lightweight overflow action
Readable post copy with comfortable line length
Project context and technical tags
Quiet social actions without oversized vanity metrics
Discovery
Discovery should feel immediate.
Search and recommendations should help developers find relevant people quickly without turning the interface into a directory.
Live search
Suggestions appear while typing. Keep the list short and make every result easy to scan.
ali
A
Alisha
@alishacreates
Next.js · Node.js · MongoDB
AM
Ali Malik
@alibuilds
React · TypeScript
AR
Alex Roy
@alexcodes
Backend · APIs
See all results for "ali"
Suggested developers
Recommendations should prioritize useful connections and relevant technical context.
PK
Priya Kapoor
@priyacodes
ReactTypeScript
RS
Rohan Shah
@rohanbuilds
Node.jsMongoDB
MS
Maya Singh
@mayamakes
Next.jsUI
Search early
Live suggestions can begin from the first character when the result set is small enough to remain useful.
Keep it compact
Autocomplete should show only a small set of likely matches before offering the full results page.
Show context
Names and usernames come first. Bio or technology context helps users identify the right developer.
Profiles and projects
Supporting content patterns
Profiles and projects support the social feed without turning DevLog into a dashboard-heavy product.
AM
Alisha
@alishacreates
Full-stack developer documenting the process of building DevLog from idea to production.
Next.jsTypeScriptMongoDB
DevLog
Social platform for developers who build in public.
Latest milestone
Initial landing page direction completed
Updated 12 minutes ago
12 updates3 contributorsNext.js
Status
Badges and system language
Status labels should be short, semantic, and easy to scan.
Product statuses
BuildingIn progressLearningPlanningDeployed
Feedback states
Update published
Your progress is now visible to the community.
Upload failed
Try again or choose a smaller image.
Loading and empty states
System states
Every screen should account for waiting, absence, success, and failure.
Loading post
No posts yet
Share the first step, lesson, or small win from your project.
Feedback
Toast notifications
Toasts communicate the result of an action without interrupting the user's workflow. Use them for action-level feedback, not field validation.
Success
Use when an action completes successfully.
Error
Use when an action fails or cannot be completed.
Neutral
Use for lightweight informational feedback.
Use toast for
Publishing posts, saving changes, deleting content, following developers, uploads, comments, and unexpected action failures.
Don't use toast for
Required fields, invalid URLs, character limits, or other field-specific validation. Keep those messages beside the field.
Responsive
The product should collapse gracefully.
DevLog is social and should feel natural on mobile. Wide layouts add context, while smaller screens preserve the content and actions that matter most.
Desktop
xl and aboveUse the full three-column feed: personal context on the left, posts in the center, and discovery on the right.
Tablet
lgReduce supporting content. The left sidebar may remain while discovery moves out of the persistent layout.
Mobile
below lgUse one primary content column. Sidebars disappear and important actions remain available through navigation and page-level controls.
Feed behavior
Desktop
Personal context, feed, and discovery can coexist.
Tablet
Remove lower-priority discovery before reducing the feed.
Mobile
Content becomes the interface. Supporting columns disappear.
Content first
Never shrink the main feed just to preserve secondary sidebars.
Touch targets
Interactive controls should remain comfortably tappable on mobile.
Flexible media
Images should scale with their container and never introduce horizontal overflow.
Preserve actions
Creation, navigation, search, and profile access must remain available when sidebars disappear.
Responsive rule
Remove supporting context before reducing primary content. The feed, post, or project should always remain the focus.
Spacing and shape
Layout rules
DevLog uses a small set of container, spacing, and radius patterns so the interface feels consistent across feed, posts, projects, and forms.
App shell
max-w-[1440px]
Used for wide application layouts such as the community feed with supporting sidebars.
Focused content
max-w-3xl / max-w-4xl
Used for post detail, forms, project detail, and other focused reading experiences.
Surface radius
rounded-2xl
Primary content surfaces use generous, consistent rounding. Feature cards may use slightly larger custom radii.
Content surfaces
Use rounded-2xl for cards, grouped form sections, empty states, and major content containers.
Pill controls
Use rounded-full for compact actions, status, tags, filters, and primary creation buttons.
Large feature cards
Use larger radii such as rounded-[26px] or rounded-[28px] only when the component needs stronger visual presence.
Spacing scale
Prefer the existing Tailwind spacing scale and repeat common gaps instead of introducing arbitrary spacing values.
2
3
4
5
6
8
10
12
Layout rule
Use rounded surfaces for content. Reserve pills for compact controls and actions.
Reference
Interface voice
Copy should sound direct, encouraging, and developer-aware without becoming corporate or overdramatic.
Prefer
What are you building today?
Avoid
Create a new content publication.
Prefer
Publish a post
Avoid
Submit post
Prefer
No posts yet. Share the first step.
Avoid
There is no data available.