Purposeful
Every visual choice should help people understand the product, company, or idea more clearly.
Brand system · Version 1.0
A shared language for CraftdLab.
The foundations our team uses to keep every CraftdLab experience recognizable, precise, and thoughtfully made.
00 · Foundation
Modern and technical.
Never cold.
CraftdLab should feel intelligent, credible, and design-aware. The system creates structure; the work and language bring the human perspective.
Precise
Use deliberate alignment, restrained color, and clean hierarchy instead of decoration for its own sake.
Human
The system is technical, but the language and imagery should remain direct, useful, and approachable.
01 · Logo
The primary signature.
The wordmark combines a direct company name with the braces that express our connection between design and engineering. Use the supplied artwork without rebuilding or altering it.
Clear space
Give the mark room to work.
Keep at least one brace-stroke height of clear space around the complete wordmark. No text, imagery, or edges should enter this area.
120 px minimumMinimum size
Protect readability.
Do not use the complete wordmark below 120 pixels wide in digital applications. Use a larger size whenever the context allows.
Avoid
Keep the signature consistent.
02 · Color
Neutral by design.
Purple with intent.
Our neutrals carry the interface and content. Purple signals action, selection, and brand identity; it should remain purposeful rather than decorative.
#B46BFA
Accent
--color-accent-brandActions, braces, active states
#FAFAFA
Light background
--color-page-backgroundLight-mode canvas
#0A090B
Dark background
--color-page-backgroundDark-mode canvas
#EEEEEE
Light surface
--color-surface-backgroundLight-mode cards and overlays
#161517
Dark surface
--color-surface-backgroundDark-mode cards and overlays
#0A090B
Light primary text
--color-text-primaryHeadings and key information
#FAFAFA
Dark primary text
--color-text-primaryHeadings and key information
#6A696B
Light secondary text
--color-text-secondarySupporting copy and metadata
#828182
Dark secondary text
--color-text-secondarySupporting copy and metadata
#FFFFFF
Text on accent
--color-text-on-accentText placed on purple
Working ratio
Let neutrals lead.
Begin with page and surface neutrals, establish hierarchy with primary and secondary text, then add the accent only where it improves recognition or interaction.
03 · Typography
Three voices.
One clear system.
Space Grotesk shapes the identity, Inter makes information comfortable to read, and JetBrains Mono adds a precise technical layer for labels and code.
Aa
Space Grotesk
Headings, navigation, buttons, and prominent interface language.
Weight 400–650Aa
Inter
Paragraphs, explanations, long-form content, and supporting interface text.
Weight 400–600{Aa}
JetBrains Mono
Technical labels, metadata, indices, tokens, and code syntax.
Weight 450–600StyleSpecimenDesktop reference
Display
Space GroteskThoughtful products.
- Size
- 72–144 px
- Line
- 0.90
- Weight
- 510
Heading 1
Space GroteskDesign with purpose.
- Size
- 60–96 px
- Line
- 0.94
- Weight
- 510
Heading 2
Space GroteskClear systems scale.
- Size
- 48–72 px
- Line
- 1.00
- Weight
- 510
Heading 3
Space GroteskBuilt for real use.
- Size
- 36–48 px
- Line
- 1.05
- Weight
- 520
Heading 4
Space GroteskProduct direction
- Size
- 28–36 px
- Line
- 1.12
- Weight
- 540
Heading 5
Space GroteskDesign principles
- Size
- 24 px
- Line
- 1.25
- Weight
- 560
Heading 6
Space GroteskSupporting heading
- Size
- 18 px
- Line
- 1.35
- Weight
- 600
Body large
InterWe bring product thinking, design, and engineering together to create clear and useful digital experiences.
- Size
- 18 px
- Line
- 1.70
- Weight
- 430
Body
InterUse the default body style for explanations, project details, and everyday interface copy.
- Size
- 16 px
- Line
- 1.75
- Weight
- 430
Body small
InterSupporting information, notes, captions, and compact descriptions.
- Size
- 14 px
- Line
- 1.60
- Weight
- 440
Navigation
Space GroteskHome · Projects · About · Contact
- Size
- 14 px
- Line
- 1.4
- Weight
- 550
Technical label
JetBrains Mono{ PRODUCT THINKING · DESIGN · ENGINEERING }
- Size
- 11 px
- Line
- 1.5
- Weight
- 520
The hierarchy is a desktop reference. Large styles scale fluidly on smaller screens while preserving their relative contrast and reading order.
04 · Imagery
Show thoughtful work
in context.
Imagery should feel composed, useful, and real. Favor clear subjects, tactile detail, and believable working moments over generic technology visuals.
Temporary sample · Replace laterRecommended direction
Purposeful, tactile, and restrained.
Use authentic product-making moments, controlled neutral environments, and one restrained brand accent. The subject should remain understandable without decorative effects.
Use
- One clear subject or working moment.
- Natural or softly directed light.
- Neutral environments with real texture.
- Negative space that supports nearby copy.
- Purple as a small, intentional detail.
Avoid
- Generic smiling-team stock photography.
- Busy compositions or unclear focal points.
- Heavy neon, glow, or gradient treatments.
- Fake interfaces with unreadable text.
- Random 3D objects used as decoration.
Cropping system
Compose once. Adapt with care.
Keep the subject intact and use consistent squircle corners across every ratio.
3:216:101:1This page currently uses one temporary sample image. Replace it with approved CraftdLab photography when the final imagery library is ready.