Brand
Manual.
The complete identity system for Alaska's most advanced optical lab. Logo, palette, typography, motion and voice — defined so the brand stays coherent wherever it shows up.
What's inside.
Ten chapters covering the full identity. Start with essence, end with how the brand moves.
Global tech.
Local execution. Zero wait.
Custom Eye Lab is Alaska's only lab with full in-house digital freeform surfacing and premium AR coating under one roof. We sell the speed of your neighbor with the quality of the industry leaders — no outsourcing, no shipping to the lower 48, no excuses.
Independent ECPs deserve world-class optics without world-class wait times. So we built the only lab in Alaska that can surface, coat and ship in a single day — in Anchorage, by hand, on Satisloh. Global tech. Local execution. Zero wait.
Return optical manufacturing to Alaska — and return time to the ECPs who serve it.
Independent practices compete against corporate chains every day. We give them the single thing chains can't buy locally: same-day, in-state, in-house lens manufacturing at flagship quality.
Every pair of glasses in Alaska, made in Alaska — faster than anywhere else in the country.
We don't want to be "pretty good for a local lab." The benchmark is Essilor quality at neighborhood speed, applied across every category we make.
Alaska's most advanced optical lab. Full stop.
Category: digital freeform lens manufacturing. Differentiator: the only lab in Alaska with both surfacing and AR coating under one roof. Audience: independent eye-care professionals (ECPs) and the patients they serve.
Precise. Confident. Technical. Proudly Alaskan.
We speak like a lab tech who reads the spec sheet, not a sales rep reading a brochure. Confident never cocky. Numbers over adjectives. Local without being folksy.
One mark.
Zero ambiguity.
The approved identity: six concentric rings forming the Custom Eye Lab mark, paired with a fixed two-line wordmark — CUSTOM over EYE LAB. Read as an iris caught mid-rotation — precision optics, abstracted. This is the only acceptable version of the logo. Every lockup, clear-space rule and misuse case below applies to it, full stop.
Lockups
Three approved arrangements — nothing else. Use Horizontal by default. Switch to Stacked only when the space is square or vertical. Use Mark only when there's no room for type: favicons, app icons, packaging caps.
Construction
The mark is six concentric ellipses rotated in even steps around a shared origin — not a generic unit grid. Every value below is measured directly from the production vector, not estimated.
Clear space & minimum size
Incorrect usage
The full catalog of prohibited modifications. If it's not shown as correct above, assume it's wrong.
Obsidian canvas.
Signal green.
The brand lives on near-black. One brilliant green carries every call-to-action, every highlight, every "live" state. Everything else is a carefully tuned grey — quiet on purpose, so the green always registers.
Core trio
Surface scale · dark UI
Four elevations above Obsidian. Use to separate cards, forms, stickies and overlays without leaving the dark canvas.
Text hierarchy
Green ecosystem
Icon Duotone — logo mark only
The mark's six rings run on two tones, not flat Signal Green — same hue (140°), two lightness steps, so overlapping rings read with depth instead of going flat. Derived from Signal Green; never used outside the icon. Full rationale in Ch. 02.
Product categories & semantic
Only four non-green colors exist in the system. They're reserved for product categorization (Office / Digital) and system states (warning / error). Never use them decoratively.
Every screen, page or asset aims for this split. If green exceeds 10%, reduce it — green only works because it's rare.
Accessibility · WCAG AA
Three typefaces.
One clear voice.
A geometric sans for impact, a neutral sans for reading, and a mono for data. Together they read as technical, confident and modern — never decorative, never soft.
Every headline, product name, section title and CTA. Tight tracking (−2% to −4%) at display sizes. Never used below 14 px.
Paragraphs, descriptions, form fields, button text. Neutral, highly legible, optical sizing 9-40. Normal tracking.
Eyebrows, tags, spec values, measurements, hex codes. Always uppercase with +8 to +10% tracking. Never in paragraphs.
Type scale
clamp(44–92px) · 0.98 · −4%
clamp(32–52px) · 1.08 · −3%
20–28px · 1.15 · −2%
17–18px · 1.65 · 0
14–15px · 1.65 · 0
11–12px · 1.4 · +8%
11–13px · 1.5 · 0
Global tech.
Local execution. Zero wait.
This is the exact rhythm we want in marketing: mono eyebrow → Grotesk display with a single green phrase → DM Sans body. If you can't fit all three, skip the eyebrow — never the contrast.
The kit.
The minimum component set to build brand-faithful screens, decks and print pieces. All built on the same tokens.
Icons sit in a 44 × 44 px container with a 1px green border at 18% opacity and a 6% green tint fill. The symbol itself is Grotesk-weight or a basic geometric glyph. Never use multi-color or skeuomorphic icons.
Primary — green on obsidian, 13px uppercase Grotesk 600, 16×36 padding, 3px radius, green glow on hover.
Secondary — transparent, 1px border, white text.
Tertiary — inline green text + arrow, gap widens on hover.
10 px mono, uppercase, +6% tracking, 2 px radius, 5 × 12 padding. Color maps directly to product category. Never invent new badge colors.
to Custom.
Every major section leads with this: 3px green left border, mono eyebrow, Grotesk headline. Keep the eyebrow to 1-4 words.
Six motifs.
One signature.
These aren't decorations. They're the six visual cues that make any piece recognizably Custom Eye Lab — even without the wordmark.
A 3-pixel signal-green line along the top edge of every digital surface. Non-optional. It's the brand's heartbeat.
A 3-pixel green left border on every major section title. Creates instant rhythm down a long page.
switch.
A pulsing 6px green dot paired with a mono eyebrow label. Signals "live", "current", "in progress". Always above a headline.
A very soft, very diffuse green radial — used only as atmospheric background on closing / footer-adjacent sections. Never behind buttons, never behind type. Its job is to add subtle depth to dark areas, not to draw attention.
Cards and data cells never separate with gaps — they separate with 1px hairlines. Feels machined, precise, lab-grade.
A subtle 60px orthogonal grid layered over hero video/photo. Nearly invisible. Adds technical atmosphere without distraction.
Honest light.
Real hands.
Our photography shows real machines, real lenses, real hands — in Anchorage. Images stay close to natural exposure and live at full clarity wherever they appear as subject. Darker processing is reserved exclusively for when a photo is used as a section background behind text.
Satisloh generators, coating chambers, trays of blocked lenses. Specific equipment, not stock photos.
Technicians at work — cropped tight on hands, gloves, trays. We show craftsmanship, not headshots.
When a photo is the subject (product card, gallery, editorial), keep it close to natural: saturate .85–1.0, brightness .9–1.0. Darken only when the image is acting as a background behind copy.
Soft fade at top & bottom and/or one side to dissolve into the Obsidian canvas. No visible frame.
The signal green lives in the UI, not the shot. A green jacket in a hero would clash with the brand color.
Featured · natural
Product · natural
Detail · natural
Section bg · darkened
Process · natural
Section bg · darkenedFilter recipes
The rule of thumb: if the image is the subject, leave it natural. If the image is behind text, darken it so the text reads.
filter: saturate(.92) brightness(1) contrast(1.02)
Default treatment whenever the photo is what you want people to look at — product cards, editorial layouts, process shots. Essentially natural.
filter: saturate(1) brightness(1) contrast(1.02)
On hover, lens images snap to full saturation and a subtle 1.04 scale. The "wake up when examined" moment.
filter: saturate(.6) brightness(.4) contrast(1.1)
Mid-page cinematic break with a centered headline. Dark enough for white copy to hold, not so dark that the subject vanishes.
filter: saturate(.3) brightness(.12) contrast(1.2)
Sections where the photo is pure atmosphere behind a dense UI layer (ECP platform, testimonials). Image becomes near-texture.
filter: saturate(.5) brightness(.25) contrast(1.15)
Homepage-style hero where large type sits on top of moving footage. Plus a linear dark gradient top & bottom.
Heavy filters on featured / product shots
If there's no text on top of the image, there's no reason to darken it. Crushing a featured product shot makes the lab look lifeless.
1320 at the widest.
48-point gutters.
One container, three breakpoints, four spacing steps. Tight enough to stay disciplined, loose enough to breathe.
Spacing scale · 8px base
We write like the spec sheet.
Declarative. Concrete. Cadenced. Short sentences hit harder. Numbers over adjectives. When in doubt, cut.
Sound like a technician who loves the craft.
Sound like a marketing agency.
Taglines
Local execution.
Zero wait.
Anchorage.
Key messages
Short. Eased.
Never showy.
Motion signals responsiveness, not personality. Every transition is under a second, uses a soft ease and resolves cleanly. We don't bounce, we don't spin, we don't parallax.
.reveal{opacity:0;transform:translateY(28px);
transition:opacity .7s ease,transform .7s ease}