// brand.system
troels.im brand guide
A dark, technical identity for AI-assisted engineering with senior judgment. The system borrows the Compound Coders surface language: zinc sections, elevated panels, crisp hairlines, mono labels, and a green-first four-color accent rule.
- bg
- #18181B
- surface
- #27272A
- primary
- #5BDE0E
// position
AI coding with human accountability.
troels.im should feel like a working engineer's notebook: practical, skeptical, curious, and warm. The brand sells better judgment around AI work, not blind generation.
narrative
Use the tool. Keep the judgment.
The brand starts from a real pressure: AI can produce more code than a team can comfortably trust. troels.im helps engineers turn that pressure into context, verification, recovery habits, and clear shipping standards.
promise
- 01Treat AI output as a hypothesis.
- 02Make assumptions visible before merge.
- 03Capture reusable workflow lessons.
// operating.values
Values that keep the brand useful.
The system should be direct enough for senior engineers and warm enough that learning still feels alive.
Craft
Care about the quality of the system, not just the speed of the output.
Verification
Make claims testable. Show the checks, evidence, and remaining uncertainty.
Clarity
Write like an engineer explaining a real tradeoff to another engineer.
Curiosity
Keep the playful edge, but make exploration earn its way into practice.
Warmth
Keep the relationship human. Skepticism and encouragement can share a room.
// visual.identity
A small mark, used with restraint.
The production guide templates use the white-on-transparent troels.im mark. On the website brand guide it now appears on the same dark, squared surface language.
/troels.im.svg
logo rules
Keep the mark white on dark.
Use the SVG mark for guide attribution, brand-close references, and the brand guide itself. Pair it with the text wordmark only when the surface needs fast recognition.
wordmark
TROELS.IM
- Do not stretch, rotate, or randomly recolor the mark.
- Use 8px radii on web plates and cards.
- Keep a calm dark field around it.
- Avoid busy photos behind the logo.
// token.map
The current troels.im color system.
Use these exact Compound Coders values for the brand guide and dark web surfaces. Neon green is the primary action color; cyan, purple, and pink follow in order.
Primary background for sections.
Deepest background and dark button text.
Elevated cards, panels, and menus.
Secondary surface for terminal bars and insets.
Borders, dividers, and subtle rule lines.
High-emphasis text and headings.
Body and secondary text.
Muted text, captions, and quiet metadata.
Footers, placeholders, and faint labels.
Primary accent for CTAs, highlights, action links, and // eyebrows.
Secondary accent and the second color in the rule.
Third accent in the four-color rule.
Fourth accent in the four-color rule.
01
Green leads
Use neon green for primary CTAs, active highlights, and the // label signal.
02
Cyan follows
Use neon cyan as the second accent for links, supporting actions, and sequence steps.
03
Purple supports
Use neon purple as the third accent, especially when a note needs contrast on dark surfaces.
04
Pink closes
Use neon pink as the fourth accent for the last item in a color sequence or sparing emphasis.
// type.system
Editorial sans, operational mono, shorts display.
The type system should read like a technical field guide: confident headings, comfortable body copy, mono labels for system state, and Audiowide for short-form captions and hooks.
primary
Satoshi / clean sans
Use the app sans stack for headings, body, buttons, and most UI copy. Keep paragraphs around a readable measure.
Aa Bb Cc 123
AI coding with senior judgment
Use direct language that explains what changed, why it matters, and how the reader can verify it.
accent
Space Mono / system labels
Use mono for labels, file-like strings, token names, command prompts, and small pieces of operational metadata.
// context.ready
> verify guide tokens
bg = #18181B
accent.order = green, cyan, purple, pink
shorts
Audiowide / captions + hooks
Use Audiowide for social media shorts: large hook text, caption emphasis, and punchy overlays. Keep it out of long-form body copy and routine product UI.
Ship the checks
Not just the diff
Audiowide.role = social media shorts captions and hooks
// image.direction
Use real context before abstract atmosphere.
The visual language can use grids, scanlines, terminal framing, and subtle glow, but it should stay grounded in the work: code, tools, learning artifacts, and the person behind them.
do
- +Show real screens, notes, diagrams, and code artifacts.
- +Use dark panels with readable content and clear hierarchy.
- +Let scanlines and grids stay subtle enough to read through.
avoid
- -Generic stock photos or vague neon atmosphere.
- -Low-contrast accent text on dark surfaces.
- -Extra accent colors when hierarchy alone would work.
// voice
Serious about craft, alive in the room.
troels.im should sound like a capable engineer sharing hard-won practice, not a funnel promising magic.
tagline
AI coding with senior judgment.
tone
Say
Show the context, run the checks, keep the judgment.
Do not say
Let AI ship more with no review.
Warmth
Invite experimentation without hiding the tradeoffs.
Proof
Prefer artifacts, examples, and checks over hype.