Who is Arkaes?
A frontend engineer with a deep respect for systems and an obsession with the visual. Every interface decision is deliberate — beauty and function are never separate concerns.
Every interface decision is deliberate. Beauty and function are never separate concerns. The work is finished when nothing can be removed.
Systems thinking underpins every project — scalable, maintainable, and architecturally sound from the first component to the final deployment.
Less, but better. Negative space, typographic discipline, and color used with intention. Secondary color appears only when it clarifies hierarchy.
The Refined Practitioner — authoritative craft, expressed with warmth.
Product teams, design-led companies, and brands who value quality over quantity.
Interfaces that are as well-considered as they are beautiful to use.
Calm. Precise. Quietly confident. Never loud, never generic.
The Palette
The system uses semantic color tokens first. Accent carries brand emphasis; secondary is a restrained counterpoint for structure, confirmation, and contrast.
Use --ark-color-accent and --ark-color-accent-strong for emphasis, active states, highlighted display text, and brand-defining details.
Use --ark-color-secondary sparingly as a counterpoint for structure, success states, rules, and moments that need contrast from the accent family.
Primary copy uses --ark-color-text. Supporting copy uses --ark-color-text-muted or --ark-color-text-subtle only when contrast remains readable.
Use --ark-color-bg for page backgrounds, --ark-color-surface for raised surfaces, and --ark-color-surface-soft for quiet section contrast. Chrome that floats free over the page — the navigation pills, the bottom dock's actions, inline code — uses --ark-color-surface-floating over a --ark-color-border-floating outline. The fill is a light blush tint; the outline is deeper than the default hairline on purpose, because on a fill that light the edge is what makes the control read as a distinct object.
The Type System
Three type roles. No more. Display type carries the brand expression, sans-serif body text carries clarity, and mono labels provide structure. Decorative serif is reserved for large headings only.
Use
--ark-font-display with --ark-weight-thin. Italic is reserved for concise emphasis and the Æ.Use
--ark-text-md through --ark-text-lg, --ark-leading-normal through --ark-leading-relaxed, and --ark-measure-md.Use
--ark-font-mono, --ark-weight-bold, uppercase text, and token letter-spacing.Primary text uses --ark-color-text. Supporting text uses --ark-color-text-muted, which must remain readable on both light and dark surfaces.
Body text uses --ark-font-sans. Decorative serif/display type is reserved for large headings, wordmark moments, and short pull quotes only.
Long-form content should use --ark-measure-md or the .ark-readable utility to keep case studies comfortable to read.
The Wordmark
The Æ ligature is the defining mark of the brand. It is the junction of ARK and ES — the visual shorthand for "architecture meets aesthetics."
Fraunces through --ark-font-display. Use --ark-weight-thin for the wordmark and display headings. Never condense or stretch.
The ae ligature is the defining mark. Use --ark-color-accent-strong on light surfaces and the active dark-theme accent token on dark surfaces. Always italic. Never replaced with "AE".
Use token tracking for labels and restrained custom tracking for the wordmark only. Avoid negative letter-spacing.
Keep the Æ legible at the rendered size. In tight contexts, use the mono variant instead of shrinking the display wordmark past readability.
Minimum clear space = cap height of the A on all four sides. Never crowd the wordmark.
- Use the Æ ligature — never "AE" or "Ae"
- Use
--ark-font-displayand--ark-weight-thin - Use semantic accent tokens for the Æ
- Respect minimum clear space on all sides
- Use the mono variant when Fraunces is unavailable
- Never stretch or condense the wordmark
- Never apply the full wordmark in a single brand color
- Never add drop shadows, gradients, or glow effects
- Never recreate in a different typeface
- Never place on a busy background without sufficient contrast
How Arkaes Speaks
Calm authority. Never loud. Never generic. Confident without being boastful. The work leads — the words follow.
Exact language. No filler phrases. Every word earns its place. If it can be removed without loss, remove it.
Approachable craft — not cold expertise. The work invites, not intimidates. People should want to work with Arkaes.
Thoughtful explanations of why, not just what. Process is visible. Decisions are explained, not just displayed.
The work speaks first. Self-description is minimal and factual. No superlatives, no passion-for-excellence clichés.
Genuine interest in problems. Questions are as valued as answers. Arkaes is always learning — and makes that visible.
"A design system built for a multinational engineering team — 40+ components, zero visual inconsistencies, shipped in 6 weeks."
"I am a passionate and driven developer with a love for creating amazing user experiences that delight users and stakeholders."
"Frontend engineer. Obsessed with the intersection of systems and craft."
"I'm a creative individual who loves bringing ideas to life through the power of technology and innovative design thinking!"
"Let's build something remarkable." — Never "Let's connect!" or "Hire me!"
Brand Across Platforms
Every touchpoint should feel like it belongs to the same quiet, considered creative — regardless of the platform's own visual conventions.
- Semantic token system throughout: accent for emphasis, secondary for restrained counterpoint.
- Fraunces display, Plus Jakarta Sans body, JetBrains Mono token labels.
- Motion: staggered reveals and subtle hero parallax only when it improves orientation.
- Light and dark modes are supported. Both must preserve strong text contrast and readable long-form copy.
- Pointer feedback should be subtle and must preserve the default cursor on touch-first experiences.
- Profile README uses the Arkaes wordmark (text-based, mono variant).
- Bio: "Frontend Engineer. Craft meets architecture. arkaes.dev"
- Pinned repos: design system, AI-powered projects, portfolio source.
- Commit voice: precise, lowercase, imperative mood. No emojis.
- Headline: "Frontend Engineer — UI Architecture, Motion Design & AI Integration"
- Banner: token background with Arkaes wordmark and semantic accent rule.
- About section uses the Arkaes voice — precise, warm, understated.
- Featured section: link to arkaes.dev as primary CTA.
- Only post work reflecting the Arkaes aesthetic — no generic shots.
- Use token background, surface-soft, or accent-soft backgrounds on mockups consistently.
- Caption voice matches the brand: factual, no exclamation marks.
- Shots should feel like excerpts from a unified body of work.
Consistency principle: Every touchpoint should feel like it belongs to the same quiet, considered creative. Platform-native conventions are respected, but the Arkaes voice, tone, and visual restraint remain non-negotiable regardless of where the brand appears.
Brand Integrity
What protects the brand — and what breaks it. These rules exist because the brand's refinement is fragile. One wrong choice dilutes years of consistency.
- Use exact token values — no approximations or eyeballed matches.
- Use Fraunces for large display moments only; use readable sans-serif for body copy.
- Apply grain texture subtly, matching the current implementation opacity.
- Use secondary color as a restrained counterpoint, not as a second dominant accent.
- Use semantic surface tokens instead of hard-coded background hex values.
- Ensure every project shown reflects the Arkaes aesthetic.
- Use
.ark-readablefor case studies and long-form project pages. - Use the Æ ligature in the wordmark — always.
- Keep the Æ legible; use the mono wordmark in tight spaces.
- Never use low-contrast muted text in dark mode. Dark mode is allowed only when text contrast remains strong.
- Never use decorative serif for body paragraphs, small cards, labels, or long-form reading.
- Never use accent and secondary colors at equal visual weight on the same page.
- Never apply drop shadows, gradients, or glow effects on type.
- Never show work that contradicts the refined aesthetic.
- Never stack decorative motion that distracts from content.
- Never use exclamation marks in brand copy.
- Never modify the Æ color outside the brand specification.