06 / Light
Elegant at display size. Too fragile at 16px.
SVG ↓Founder-selected synthesis
Structure,
with intention.
A practical identity for Kraftgrid.
Engineered in its construction. Editorial in its expression.
StructuredClear hierarchy, useful grids.
ConsideredSpace before ornament.
DependableSimple enough to reproduce.
No AI shorthand.
No mascot. No noise.
01 / Identity
Precision, made visible.
A frame is a useful boundary. Two open frames create a relationship: reusable structure, deliberate connection, room for what comes next.
MASTER / 64 × 64
8u weight / 12u offset / 4u terminal gap
ONE INK / REVERSE
No color required. No hidden effects.
FORMTwo open, opposing frames. Square terminals. A 180° rotational relationship.
SPACE12u clear space beyond visible edges. Leave the center empty; never add initials.
SCALE16px minimum for the micro mark. Use outlined assets; never stretch or redraw.
Weight, not decoration.
Same geometry and offset. Three tested weights.
08 / Selected
Balanced authority. Open gaps. Crisp at 16px.
SelectedSVG ↓
10 / Heavy
Strong fill; less breathing room at the returns.
SVG ↓
The right amount of separation.
Same 8u weight. Three tested offsets.
08u / Compact
Tighter lock. Inner return becomes crowded.
SVG ↓
12u / Selected
Clear rhythm between frame, gap, and return.
SelectedSVG ↓
16u / Open
More separation. The two parts feel disconnected.
SVG ↓
Small-size proof
Recognizable at the edge.
The dedicated 16-unit micro SVG matches the master on whole pixels.
02 / Wordmark & lockups
A clear counterpart.
Instrument Sans Semibold. Native kerning plus −0.025em tracking. No custom letter cuts: consistent, reproducible, and easy to maintain.
Lockup discipline
Let the name
do the speaking.
- Use horizontal first; stacked when the canvas is narrow.
- Keep a 16u mark-to-word gap in the 64u horizontal master.
- Minimum widths: 144px horizontal; 112px stacked for the configured short name.
- Below those sizes, use the mark alone.
- Preserve the configured name’s case. No slogan inside the lockup.
- All export wordmarks are paths. No missing-font surprises.
Messaging hierarchy
One master tagline. Flexible editorial headlines.
Official master tagline
Software that fits. Systems that connect.
Persistent brand-level line. Keep this exact wording and punctuation wherever the brand-level line is used.
Editorial / campaign headlines
Flexible campaign/page-level copy. These examples may vary by page or campaign:
- “Structure, with intention.”
- “Useful software. Precisely built.”
- “Built with intent.”
Never treat editorial headlines as replacement taglines. Keep the master tagline separate from the unchanged logo lockups. The existing editorial examples remain headlines, not alternate taglines.
03 / Color system
Quiet foundation.
One clear signal.
Bone and Carbon carry the identity. Steel adds technical precision. Signal Yellow directs attention—one decision, not the whole page.
Bone#F3F0E8
Primary canvas
Documents, light interfaces, and generous negative space. Warm, not nostalgic.
Carbon#111315
Structure & language
Primary text, frame mark, rules, and dark application surfaces. Never use pure black as a substitute.
Signal Yellow#F2C94C
A point of attention
One action, routing point, or short emphasis. Aim for 2–5% of a typical composition; never a wash or gradient.
Steel#8A9199
Technical support
Construction lines, dividers, and secondary text on Carbon. Not small text on Bone.
LIGHT / EVERYDAY
Useful by design.
Carbon text on Bone. Clear spacing and a small, purposeful signal.
View applications CARBON / BONE · 16.35:1DARK / FOCUSED
Built to stay useful.
Bone headlines, Steel supporting text, and Signal Yellow only where action belongs.
View applications BONE / CARBON · 16.35:111.73:1Carbon on Signal
Approved for action text.
5.84:1Steel on Carbon
Approved for supporting copy.
2.80:1Steel on Bone
Not for small text. Use Carbon.
1.39:1Signal on Bone
Not for text. Use as a fill or accent.
Contrast ratios use WCAG relative luminance. Palette swatches show the colors, not their layout proportions. As a working rule, keep Signal Yellow to about 2–5% of a typical page. It is never the entire background, wordmark, or a gradient.
04 / Typography
Systematic.
Not sterile.
One working family, one editorial accent, one annotation voice. Local font files are included; no remote font request is needed.
01 / PRIMARY
Instrument Sans
Aa Bb Cc
0123456789
400 Regular · 500 Medium · 600 Semibold
Headlines, navigation, body, proposals, wordmark.
02 / EDITORIAL ACCENT
Newsreader
A little
perspective.
400 Italic only.
One short phrase or line. Never the whole interface.
03 / TECHNICAL VOICE
IBM Plex Mono
FRAME / 01
BUILD → RUN
400 Regular.
Labels, dimensions, versions, and brief annotations.
Build with intent.
One clear proposition. 44px on small screens.
Structure that serves.
Section rhythm. 30px on small screens.
From idea to operation.
Card titles and short subheads.
Useful software connects a real need with a dependable way forward. Clarity is part of the product.
Useful, direct sentences. Aim for 45–70 characters per line.
A considered foundation. Ready for what comes next.
Supporting context, not essential instructions.
SYSTEM / V1.0 / READY TO BUILD
Short labels, versions, dimensions, and annotations only.
Precisely built.
One phrase or short line. Never a full UI, wordmark, body, or navigation font.
05 / Mini application board
One identity.
Real working surfaces.
The application studies are reference examples; the homepage is a separate marketing page. These are reusable starting points, not invented customers, projects, or product screenshots.
Kraftgridkraftgrid.io
FAVICON / 16–64PX
Use the micro mark. No wordmark, tiny text, or yellow-only silhouette.
Download ICO ↓
The banner reserves the lower-left profile-photo area. Platform crops vary: preview before upload. Proposal fields are intentional placeholders. Replace them with actual project details; do not imply an existing client relationship.
06 / Motion principle
Connect. Lock.
Then stop.
An 8-unit offset resolves into the final frame over 640ms. The motion explains connection; it is not entertainment or a loading state.
THE ONLY MOTION RULE
Purpose before movement.
Toggle to connect or separate the two frames. Use the connecting movement once for an intentional reveal or a meaningful user action. After it resolves, the mark stays still.
- Duration
- 640ms
- Travel
- 8u horizontal / 8u vertical
- Easing
- cubic-bezier(.2,.7,.2,1)
- Reduced motion
- Instant final state
No looping, overshoot, morphing, particles, pulsing, spins, or sound. Never distort the wordmark.
07 / Handoff
Small kit.
Clear decisions.
Use the masters, not a screenshot. Keep geometry, spacing, palette, and typography together. Reproduce the system before adding to it.
Start with the essentials.
- Horizontal lockup for most uses. Mark alone for small contexts.
- Bone + Carbon first. Signal Yellow for one focal action.
- Instrument Sans for the system; Newsreader for an accent.
- Use 4/8/12/16/24/32/48/64 spacing and intentional margins.
- Check small sizes, contrast, and circular crops before release.
- External logo/trademark similarity screening must be completed before the identity is considered publicly cleared.
Before a public identity launch: complete trademark and similarity clearance, test print proofs, and confirm the final wordmark at its real placement sizes. This kit is a measured design proposal, not a claim of legal exclusivity. The application studies are reference examples; the homepage is a separate marketing page.