YDIN brand and component library.
Design tokens, components, and patterns used across ydin.com. This page renders the same source that builds the rest of the site. Use it as the canonical reference when adding new surfaces.
What YDIN is.
A team of senior AI consultants. Some software is your Core, we help you build it. The rest is Context, we take it off your plate. A small senior core team, backed by 20+ independent senior AI consultants. AI agents are how we work, not what we sell.
Build your Core capabilities.
We advise your team, build with you and hand it over, or fill a key role while you hire. The Core capability ends up yours.
Focus on your Core.
We build, run, and keep improving your Context, so it costs less to operate and your team stays free for the work only you can do.
Specialists on call.
Independent senior consultants we know and trust, from every field of AI. We bring in the right one at the right time.
The cube inside the grid.
The blue cube is Core. The grid is Context. This is the only non-negotiable visual element. Never restyle the cube into another shape, and never color it anything but YDIN blue.
logo-dark.svg · primary
mono-light · on dark
mono-dark · on light
favicon · 32px
YDINlogo + wordmark · header lockup
breathing · 4s ease-in-out opacity oscillation
Dark theme, one accent.
One brand accent. No purples, no greens, no warning yellows in marketing surfaces. The cube blue is reserved for the cube and brand-flagged moments.
Brand · cube blue
Neutrals
Newsreader and Familjen Grotesk.
Newsreader (serif) carries headlines and pull quotes. Familjen Grotesk (sans) does the body, nav, button, label work. Geist Mono is reserved for code and metric numerals.
Wordmark
Familjen Grotesk 600 · uppercase · +0.12em tracking. Use the component, never retype YDIN as ordinary text.
<Wordmark /> · default and large
Solid, hairline, no drop shadow.
The dominant content unit on marketing pages. On hover the border brightens to border-strong. No lift, no shadow expansion.
Consultant / Operator / Expert Network
Expert Network
Independent senior specialists we bring in at the right time, rather than carrying a large bench.
Read moreService icons
Advise
Senior on call.
Coach
Pair and review.
Audit
A second pair of eyes.
Build
Working software.
Operate
We run it.
Maintain
Fixes and upkeep.
Stat card
Feature card · larger padding, xl radius
Core vs Context.
Some of your software is Core: it sets you apart. The rest is Context: it just has to work. The two need different treatment.
How we workTag, label, capability.
Accent chips are for the named services (Core, Context). Default chips for everything else. Add a cube dot for Available chips.
default · text-fg-muted, bg-bg-elev-2
accent · named services only
Hairline border, blue focus ring.
Label sits above. Focus state uses the cube blue with a 3px halo ring. No floating labels, no inline icons.
One per surface, ideally.
Beyond the logo, the cube appears as a small brand-flagged marker. Use it for live-status indicators and the leading dot on announce chips. Don't use it for hover states, dividers, or anywhere you'd otherwise reach for an emoji.
inline cube dot · ydin-cube-dot class
Section, footer, hero.
The top nav and footer on every YDIN page are the canonical lockups. Section heads pair an accent eyebrow with a serif h2 and an optional lead paragraph.
Section head
Need a Consultant or an Operator?
Depending on whether it's Core or Context, we help in one of two ways.
Arrow link
ArrowLink · for read-more affordances
Top nav and footer
The nav and footer on this page are the live components. Scroll for the nav's blur transition; the footer is at the bottom of every route.
Components added for the homepage.
Six atoms built for the long-form landing page. Use these for any new long-form marketing surface; they assume the 96/160px section rhythm and the cube-dot eyebrow treatment.
CubeGridMotif
The Core/Context diagram. variant="core" glows, variant="context" sits quiet. Use it on the Core/Context section and nowhere else.
core (left) and context (right) variants · default size 88
GridBackdrop
Full-bleed grid + soft radial glow shared by the hero and finale sections. Drop it into a relative overflow-hidden parent.
SectionHeader
Landing-page section head: cube-dot eyebrow, large serif title (max 22ch), optional blurb. Larger and more editorial than SectionHead; use this on the marketing homepage, not on inner pages.
Core vs Context?
Some of your software is Core: it sets you apart. The rest is Context: it just has to work. The two need different treatment.
PrincipleCard
Numbered principle. Used on the “How we work” section in a 3-up grid.
The people you meet do the work.
No account layer, no deck team. A senior consultant leads every engagement end to end.
AI agents are how we work.
Not what we sell. They do parts of the work under review, and we label which is which.
Fixed-price by default.
You pay for the outcome, not the hours. You see the number before you commit.
Stat
Big serif number + small label. Wrap in a bordered grid cell to match the Network section pattern; the component itself ships no border.
Accordion
FAQ accordion. Single-open by default with item 0 expanded; pass defaultOpen={-1} for all closed.
Clear, plain, doesn’t oversell.
Short sentences. Concrete nouns. No em dashes. No revolutionary, unlock, supercharge. Sentence case everywhere except YDIN, named services, and proper nouns.
Some software is your Core, we help you build it.
Concrete, second-person, no filler.
Unlock the transformative power of AI to revolutionise your business.
Overselling, abstract, no one believes it.