Make Aethel Your Own

No modes

Base collection

Brand, text, surface, border, shade, status and coin colors.

Modes: Tablet · Mobile L · Mobile

Typography

The type scale for every heading and text style.

Modes: Tablet · Mobile L · Mobile

Spacing

Padding and gaps, plus Gutter, Section, Section Gap, Section Plus, Section XL, Container, Hero Top, Page Top, Page Gap, Logo Gap, Panel Top and the two Button Text insets of the form submit.

No modes

Layout

Corner radii, from 2XS to Pill and Round, and border widths, from Hairline to Heavy, plus the two arc widths of the Home process circle.

Change the brand color

1. Open the Variables panel and select Base collection.
2. Click Color/Brand and pick your color.
3. Tune Color/Brand Soft, Color/Glow and the Lilac shades so highlights and the button glow match.

Change the font

1. Add your font in Site settings → Fonts: upload it or pick a Google Font.
2. In the Typography collection, set Font Family/Primary to the new font.
3. Check headings and buttons, then adjust the Font Weight or Letter Spacing variables if needed.

Tag styles

Base text comes from the tag styles, so a new element looks right before you give it a class. All Paragraphs use Font Family/Primary, Font Size/Text XL, Line Height/Relaxed and Color/Text, Bold Text uses Font Weight/Bold, Body and Headings 1–6 use the type variables shown on the Style Guide, and Figure and Figcaption spacing comes from Spacing variables. Select a tag in the Style selector to change every element that has no class of its own.

Focus rings

Everything you can reach with the Tab key shows the same keyboard focus ring: a 2px Color/Brand Soft outline on the Focused (Keyboard) state. Buttons, nav links and dropdown toggles, the menu button, the Services tabs, the Home testimonial tabs, FAQ questions, form fields, cards, swipe rows and the links and rows of the editorial sections all use it, and plain links get it from the All Links tag style. Inside scrolling rows and clipped cards the ring sits just inside the edge (offset −2px), so it is never cut off. Mouse clicks don’t show it. When you add a link, button or field with its own class, give that class the same state.

Edit an animation

Select the element and open the Interactions panel. Each interaction lists its trigger and timeline, where you can change duration, delay and easing. Tickers, the carousel and the menu have separate desktop, tablet and phone versions: edit each one. Loops further down the page (the stats and CTA stripes, the balance cards, the integrations carousel and the phone testimonial rows) use a scroll trigger, so they only play while in view; keep that trigger when you edit them.

Keep tickers seamless

Each ticker track holds the same items twice, side by side, and slides by exactly one copy. When you add, remove or reorder items, do it in both copies, or the loop will jump.

Keep the process height

The process scene is driven by scrolling over a tall section, about four screens high. Keep that height so each step gets enough scroll distance.

Respect reduced motion

Visitors who turn on reduced motion see static end states: content shows right away and loops stay still. Give any new interaction the same reduced-motion setting.

Services tabs

Services use the native Tabs element. To add a service, select the Tabs element, open its settings and click Add Tab. Copy the content of an existing pane into the new one, then edit the text, list and illustration. On tablet the five tabs wrap onto two rows (three and two), so keep tab labels short.

FAQ

Duplicate a closed item and edit the question and answer; the open and close interaction comes with it. The first item starts open.

Images

Assets are sorted into folders: Brand, Coins, Logos, Icons, Illustrations, Decor and Avatars. Every asset has alt text; update it in the Assets panel when you replace an image. Swap the testimonial avatars for photos of your real customers. Images at the top of a page load eagerly so it paints fast: the navbar logo, the Home hero beam and brand mark, the Home 2 hero coin, the About dial and needle, the Token coin, the Blog featured image, the Blog Post cover and the Services card images. The logo and the beam use Image settings → Load: Eager; the others carry a loading = eager custom attribute, which overrides the Load setting (it still reads Lazy there), and the Blog featured image, the post cover and the About dial also carry fetchpriority = high. Every other image loads lazily. If you replace one of these images, keep it eager.

Logo

The logo is aethel-logo.svg in the Brand folder (170 × 56): the star icon next to the Aethel wordmark, drawn as outlines, so it needs no font. It sits in the Navbar and Footer components and on the password page. To use your own, select it in each place, choose Replace image in its Image settings and update the alt text. Widths are set on the classes, with auto height: cr_nav-logo 169px (138px on tablet, 111px on phones), cr_footer-logo 169px (142px and 126px) and cr_pass-logo 142px; adjust them to your logo’s shape. Keep the navbar logo on Load: Eager.

Forms

The CTA email form and the Contact form are native Webflow forms. Set the notification email in Site settings → Forms, and edit the success and error messages in the form block. Field borders use Color/Highlight, which keeps about 3.7:1 contrast on the dark background, and fields show the 2px Brand Soft focus ring; the password page uses the same field style. Join Now and Send Message are native submit buttons styled to match the Button component, so they stay outside it.

SEO

Open Page settings for each page to set its title, meta description and Open Graph image. Home is titled Aethel - Webflow HTML website template, the other static pages end in | Aethel, and every static meta description is 150–160 characters long; keep that length when you rewrite them. The four CMS templates take their titles from the item name and their meta descriptions from each item’s SEO Description field (keep it 150–160 characters too); the Open Graph description copies the meta description and the Twitter card follows Open Graph. Excerpt on blog posts and Summary on services, jobs and integrations stay on the cards. To use another field, open the template’s Page settings and pick it with + Add Field. Every page except the blog posts uses aethel-social-preview.jpg (1200 × 630) as its Open Graph image; replace it with your own. Licenses and Changelog carry a noindex tag (see 18. Custom code). Add your favicon in Site settings.

Fonts

Inter is uploaded in Site settings → Fonts as a variable font, weights 100–900. To use another font, add it there and update Font Family/Primary.

Coin names and logos

Every coin, token and network in the template is fictional, and so is ATL: Halvren (HVR), Lumvale (LMV), Lumvale Dollar (USDV), Ivora (IVR), Kovara (KVA), Corvane (CVN), Emberly (EMB), Elvanta (ELV), Quillon (QLN), Merrow (MRW), Ferrin (FRN), Velmira (VMR), Zorvia (ZVA), Quarix (QRX), Thessa (THS), Uvella (UVL), Ardella (ADL) and Orrin (ORR). Their marks are in the Brand folder, and the names and tickers are plain text on the canvas: the hero coin row, balance cards, stats card, market tables, staking pools, supported networks and the swap widget. To show real coins, use only names and logos you have the right to use: select each mark, choose Replace image in its Image settings and update its alt text, then edit the names and tickers. The blog covers, the About dial and the two Home menu previews have coins drawn into the image, so export new versions of those too. The three coin badges in the swap widget are inline SVG drawings; replace each with an Image of your own mark.

Team and author photos

The About team cards and the blog authors are the same three people: Jordan Ellis (Founder & CEO), Casey Rowan (Head of Research) and Morgan Reyes (Head of Security). Their portraits are in the Brand folder. To show your own team, replace the three portraits in the About team cards (740 × 782) and update each alt text, which names the person and the role. Author details live on each post in the Blog Posts collection: Author Name, Author Role, Author Avatar (square, 384 × 384 or larger) and Author Bio. Edit them on every post by that author; the author card, the side card and the blog cards all read these fields.

Phone carousels

Below 768px, card groups such as the Services cards, pricing plans, FAQ cards, integration rows, the About team and the More grids become swipe rows. Each row has a right scroll padding (13–19%, the next card’s peek plus the gap), so a card reached with the Tab key scrolls fully into view, and the cards’ focus ring sits inside their edge. If you change a card’s width, adjust its row’s scroll padding to match. To add a card, duplicate one inside the row.

Add a post

Open CMS → Blog Posts → New Blog Post. Fill in every field, write the article in Body with Heading 2 and Heading 3, lists, quotes and links, then publish. Every field has help text that explains what goes in it.

Fields

Name, Slug, Excerpt, SEO Description, Cover, Cover Alt Text, Category, Author Name, Author Role, Author Avatar, Author Bio, Published Date, Read Time, Featured, Takeaway 1–3 and Body. Excerpt is the short text on the blog cards; SEO Description is the post’s meta description (150–160 characters). Covers look best at 1600×1000 (16:10); write the alt text in Cover Alt Text. Author avatars are square, 384 × 384 or larger, so they stay sharp on high-density screens. Takeaway 1–3 fill the Key Takeaways box above the article; leave them empty to hide the box (each row hides on its own). Author Bio is the one-line bio in the author card at the end of the post.

Featured post

Switch Featured on for one post to show it in the large card at the top of the Blog page. The grid below lists the nine newest posts by Published Date.

Categories

Category is an Option field: Market Insights, Security, Guides, Staking, DeFi and Company News. Rename or add options in the collection settings.

Article styling

Headings, paragraphs, lists, quotes, links and images inside Body are styled with nested styles on cr_post-body. Select one of them on the Blog Post template to change it for every post. Quotes render as pull quotes, and images inside Body use the figure style (rounded, with a muted centered caption).

Post layout

Each post has a reading-progress bar at the top, a sticky side card on desktop with the author, date, read time, category, follow links and a newsletter prompt (Subscribe scrolls to the CTA form), and an author card after the article. On tablet and phone the side card sits below the article. With reduced motion the progress bar shows as a static accent.

SEO

Each post builds its own SEO: the title is Name | Aethel Blog, the meta description comes from SEO Description, the Open Graph description copies it and the Open Graph image is the Cover. Keep each SEO Description 150–160 characters long, since search results show it; Excerpt stays on the blog cards. To change the pattern, open the Blog Post template’s Page settings and use + Add Field.

Add a service

Open CMS → Services → New Service. Fill in every field, write the details in Body with Heading 2, Heading 3, lists and links, then publish. Every field has help text that explains what goes in it.

Fields

Name, Slug, Summary, SEO Description, Tab Label, Headline, Illustration, Illustration Alt Text, Feature 1–3, Order and Body, plus the service page fields described in Service pages (CMS). Tab Label is the short caption on the cards and in the page hero; Headline is the large title. Describe the image in Illustration Alt Text. Summary shows on the cards; SEO Description is the page’s meta description (150–160 characters).

Order

Both service lists sort by Order, lowest first, and the first card on the Services page is the large featured one. To reorder, change the numbers (for example, swap 1 and 3) and publish. Each Service page lists the other services and skips its own.

Styling and SEO

Text inside Body is styled with nested styles on cr_service-body: select a heading or paragraph on the Service template to change it for every service. The template’s title is Name | Aethel Services and its meta description comes from SEO Description (keep it 150–160 characters), which the Open Graph description copies. Its Open Graph image is the site share image, because social networks don’t show SVG illustrations.

Audience switcher

On the Services page, four buttons (First-Time Buyers, Active Traders, Businesses, Institutions) switch the panels under Find the Right Setup for How You Invest. Each button has its own interaction, Services+ · switcher shows … panel. It shows the matching cr_svcplus-panel (is-buyers, is-traders, is-business, is-inst), hides the other three and moves the is-active combo to the clicked button. The First-Time Buyers panel shows by default, even without JavaScript. To edit a hidden panel, set its Display to Flex while you work, then back to None.

Stats, security and stories

The stats tiles, security rows and customer quotes on the Services page are plain text. Keep their figures in line with the rest of the site: 30K+ active users, $20B+ traded since 2020, 300+ coins and tokens, 99.9% uptime, $1.84B in reserves at a 103.6% ratio, and audits in March and September 2026. The shield animation runs only while it is in view.

Services FAQ

It uses the same FAQ markup and interactions as Home, Pricing and the FAQ page. To add a question, duplicate a closed item, then give its button a new aria-controls value and its answer the same ID, for example svcplus-faq-6.

Service pages (CMS)

Each service page reads the Services collection. Besides Name, Summary, SEO Description, Tab Label, Headline, Illustration, Feature 1–3 and Body, every item has Stat 1–3 Value and Label (the three floating stat chips and the At a Glance card), Feature 1–3 Detail (text on the numbered feature cards), Available On and Best For (the hero facts strip) and Fine Print (small print under the facts and in the card). All are required; keep stat values to about 10 characters.

Writing the service Body

Use Heading 2 for sections (they are numbered 01, 02… automatically), Heading 3 for questions, and numbered or bulleted lists (shown as cards). End with one short paragraph with a link: the last paragraph always renders as a highlighted callout. Styles live on the nested selectors of cr_service-body.

Service motion

Eleven native interactions on the Service template cover the hero reveal, the stage loop (orbits, glow, floating art and chips), the feature reveal and micro-visuals, the side card, the security band and the Other Services reveal and hover. Loops pause off-screen and reduced motion shows the end states. Other Services lists four services by Order and leaves out the current one.

Service illustrations

The five service illustrations are plain SVG files in the Illustrations folder (service-<name>.svg), used by the Home service tabs and the Services Illustration field. Replace them with SVG or PNG art at 408 × 386.

Edit a price

Every plan shows its price twice: a monthly block (cr_pricing-price is-monthly, for example $29/month) and a yearly block (is-yearly, $279/year), each with its own note. Change both when you change a plan. The yearly block stays hidden (Display: None) until Yearly is picked, so select it in the Navigator and set Display to Flex while you edit it, then back to None.

Billing toggle

The Monthly / Yearly switch is the Pricing · billing toggle interaction. Clicking Yearly plays its timeline: the knob slides, the monthly prices fade out and the yearly prices fade in. Clicking Monthly reverses it. Keep the data-billing attribute on both buttons, and give any new price block the same classes so the toggle includes it.

Plans and features

Edit plan names, pitches and feature lists right on the canvas. The highlighted Pro card uses the is-featured combo class and carries the Most popular badge. Plan buttons are Button component instances in the Full Width variant: set each one’s Link property. Each plan’s Get Started button sits at the bottom of its card (the action wrapper is pushed down with margin-top auto), so the buttons line up across plans.

Compare table and FAQ

The compare table is a real HTML table with a caption and header cells, so screen readers can follow it. Edit the cells on the canvas; on phones the table scrolls inside its card. The FAQ uses the Home FAQ markup and interaction: duplicate a closed item to add a question.

Token stats

The five metrics under the hero (Presale Price, Raised of $6.0M, Listing Price, Total Supply and Holders) are plain text in the stats card. Edit values and labels on the canvas, and keep them in step with Home 2 and the swap widget; on phones the card shows two columns with Holders on its own row.

Allocation and donut

The allocation table lists each share with its tokens, cliff and vesting. The donut beside it is the Home tokenomics donut, reused with the same classes, arcs and interaction, so a style change shows on both pages. The arcs are fixed shapes: if your split is different, redraw the arc SVGs and keep the labels, the table and the Home section in sync.

Vesting schedule

Each row has a hatched cliff segment and a brand unlock bar on a 48-month track. Their left offset and width are percentages of 48 months (6 months = 12.5%, 12 = 25%, 24 = 50%, 36 = 75%), set on the row’s combo class, for example cr_token-vest-bar is-seed. Update the row text to match. The bars grow in on scroll.

Contract

Replace the sample address in the monospace chip with your token’s contract, update Network, Decimals and Ticker, and point View on explorer at your token’s page on a block explorer. The chip font comes from the Font Family/Mono variable.

How the presets work

Every value (deposit amount, its USD value, the ATL received, its USD value and the fee) sits in three token wrappers, cr_swap-tok is-tok-lmv, is-tok-usdv and is-tok-hvr, and each wrapper holds four amount leaves, cr_swap-amt is-amt-1 to is-amt-4. At rest only LMV with the third amount shows, so the widget reads correctly before any click.

Change rates and amounts

The sample prices are LMV $3,200, USDV $1, HVR $95,000 and ATL $0.024 (the Stage 2 presale price), with a 0.3% swap fee. For each of the 12 combinations, multiply the amount by the token price, take off 0.3%, then divide by the ATL price and round to whole ATL (1 LMV gives 132,933 ATL). Edit the matching leaves, the amount chips and the Rate row of each token (1 LMV = 133,333 ATL), and keep the price note under the widget (Stage 2 presale price · 1 ATL = $0.024) in sync when the price changes.

The nine interactions

Swap · token LMV, USDV and HVR switch the token, Swap · amount 1–4 switch the preset amount, Swap · token menu opens and closes the token picker, and one scroll interaction fades in the widget glow. Each click sets which wrappers are displayed, moves the active classes (is-opt-active, is-chip-active) and fades the new values in.

Token menu and buttons

The token pill opens a menu with a transparent backdrop behind it, so picking a token or clicking anywhere else closes it. Never animate cr_swap-stage or any other parent of the menu: a moved parent traps the backdrop inside the widget. Buy ATL under the widget is a Button instance; set its Link property to your exchange or app. The hero Buy ATL button scrolls to this section.

Add a role

Open CMS → Jobs → New Job. Fill in every field, write the role in Body with Heading 2 sections (About the role, Responsibilities, Requirements, Nice to have, What we offer) and bullet lists, then publish. Every field has help text that explains what goes in it.

Fields

Name, Slug, Department, Location, Type, Salary, Summary, SEO Description, Posted Date, Order and Body. Department (Engineering, Design, Security, Marketing, Support, Compliance) and Type (Full-time, Part-time, Contract) are Option fields: rename or add options in the collection settings. Summary shows on the role cards; SEO Description is the job page’s meta description (150–160 characters).

Order and other roles

The open roles list sorts by Order, lowest first. Each Job page shows up to three other roles under the article and leaves out the one you are on. Apply Now buttons are Button instances linked to the Contact page; point their Link property at your hiring form.

Styling and SEO

Text inside Body is styled with nested styles on cr_job-body: select a heading or list on the Job template to change it for every role. The template’s title is Name | Careers at Aethel and its meta description comes from SEO Description (keep it 150–160 characters), which the Open Graph description copies. The hero stats and salary ranges are sample figures, so replace them with your own.

Make it your home page

To launch with Home 2, open the Pages panel, open its page settings and choose Set as home page. Then keep the original Home as a second page or delete it, and check that the Navbar and Footer Home links still point where you want.

Sections

Home 2 runs the hero, the partner logo strip (#partners), Why ATL (#features), Live Markets (#markets), Tokenomics, Earn, Roadmap, How to Buy, Social Channels (#channels), From the Blog (#blog) and the CTA (#community). Social Channels and From the Blog are editorial sections (see 17. Editorial sections). There is no FAQ section: the FAQ page answers every question, so the shared FAQ interactions do not run here.

Live Markets

Trending, Top Gainers and New Listings are buttons with a data-market attribute. Each tab interaction (i-5c0d8ccb, i-fda20a7a, i-df71d5f6) shows its table, moves is-tab-active and updates the selected marker for screen readers; the card reveal is i-03a866a9. Prices are sample data, every Trade link opens the Contact page and the ATL Buy link opens the swap widget.

Earn calculator

The lock chips (data-lock: i-ca7882d3, i-353cd8f7, i-381c6ba5) and amount chips (data-amt: i-607b751c, i-19f23470, i-c7bb6916, i-f40ad304) switch between precomputed rewards for 10K to 500K ATL at 8.2%, 10.6% and 12.4% APY, the same way the swap widget works. If you change a rate or an amount, recalculate the matching values. The section reveal is i-430e8a58.

Roadmap staircase

Each of the five columns has a title, a date, a status and two points. The combos is-done, is-now and is-next on the bar, dots and status set their look, so move is-now to highlight another phase. The column heights grow in from the roadmap interactions. On desktop, pointing at the staircase dims the other phases (is-dim on each column) and lights the hovered one: the hover interaction toggles is-lit on that column only, fades in two overlay spans (cr_home2-stair-dots-lit inside the dots and cr_home2-stair-bar-lit on the bar; the current phase already has that look, so it has none) and turns its date white and its status pill violet. To restyle the lit look, edit those two overlay classes. Tablets and phones skip it.

Social Channels

Telegram, X and Discord are three link rows (cr_ed-linkrow) that open in a new tab. Point each one at your own channel in its link settings, and update the member counts and the 280K+ in the heading. On desktop the arrow fills in on hover.

From the Blog

Three Collection Lists on the Blog Posts collection, all newest first: the first shows the newest post’s cover, the second its category, title, excerpt, author and date beside the heading, and the third lists the next three posts as rows, starting at item 2. New posts show up here on their own. View all articles opens the Blog page.

Presale numbers

The hero chips (audits, liquidity lock, staking APY and holders), the ATL row in Live Markets, the staking pools and calculator and the tokenomics figures are sample data: edit them on the canvas and keep them in step with the Token page. Buy ATL opens the swap widget on the Token page.

CTA copy

The CTA component has Caption and Heading text properties. Home 2 sets them to Presale Alerts and Get Notified Before Every Presale Stage Closes, while every other page keeps the default copy. Select any CTA instance to give it its own text.

Interactions

The 35 Home 2 interactions are named Home 2 · … in the Interactions panel: the hero intro, ambient loops and mouse parallax, the Why ATL card reveals and their chart, vote, fee, shield and cross-chain animations, Live Markets, Earn, the tokenomics facts and donut label, the roadmap build-up and hover, the how-to-buy hexagons, and the Social Channels and blog reveals and hovers. The shared Tokenomics, Testimonials logo strip and Preloader interactions also run on Home 2. Loops pause outside the viewport, and reduced motion shows the end states. The hero subtitle stays visible before the interactions start, so the first paint never shows an empty hero.

Mouse parallax

On desktop the hero coin, rings and chips follow the pointer at different depths. The effect relies on an invisible 1 px span, cr_home2-pointer, inside the coin stage: keep it in place, or the interaction logs a warning in the browser console. The soft glow behind the coin is a radial-gradient disc (cr_home2-coin-halo); keep it a gradient, because Chrome can clip a very large box-shadow into a hard-edged rectangle.

Add a question

Duplicate a closed cr_faq-item inside a group and edit the question and answer. Give its button a new aria-controls value and its answer the same ID, for example faqpage-general-6, so screen readers link them. The open and close interaction comes with the button’s data-faq attribute.

Add or rename a topic

Each topic is a cr_faqpage-group with a data-group value and an anchor span whose ID the hero chips and topic links point to (#general, #trading and so on). The anchor sits a little above the heading so the navbar never covers it. To add a topic, duplicate a group, change its data-group, anchor ID and heading, then add a matching chip and topic link.

Active topic

On desktop the topic of the group in view lights up. Each group has its own interaction, named FAQ page · topic 1 (General) active… and so on, which tints the link with the matching data-topic value. For a new topic, duplicate one and point its trigger and target at the new values.

Links and support

Answers have no links: a closed answer is collapsed, but a link inside it could still take keyboard focus. Each group heading carries one related link instead. The support cards below link to the support email, the Contact page and your community channel, so update them with your own details.

Bento cards

Each card has a small animated visual: candles and volume bars, a token swap, a coin stack, a bar chart, a multi-chain hub and a security shield. Edit labels and values on the canvas. Bars grow from their own transform origin, so keep that setting when you restyle them. On phones the cards become a swipeable carousel.

Detail rows

The Pro Tools, Staking and Analytics rows pair a text block with a visual card. The lengths of the depth bars, period fills and allocation bar are set in their classes, and the interactions only grow them in from zero, so change the class to change the value. The space between the rows is the Spacing/Section Plus variable (150px on desktop, 90px on tablet, 60px on phones).

Comparison table

The table is a real HTML table with a caption and header cells, and every check or cross has a text label for screen readers. It is marked as illustrative and names no real exchange: keep it that way, or replace it with claims you can back up. On phones it scrolls inside its card.

Interactions

The 19 Features interactions run the hero intro and floating chips, the bento reveals and micro-animations, the detail rows, the security cards, the table and the integrations marquee. Loops pause outside the viewport, and reduced motion shows the end states. On this page the navbar pill rests under Features.

Testimonials page

The page shows the rating hero, Mia Chen’s story, the stats band, the Testimonials Wall and the customer logo marquee. Edit the wall’s cards in the Testimonials Wall component. Home quotes three of the same customers in its own testimonials section (see 17. Editorial sections).

Logo marquee

The marquee holds the same eight logos twice, and the second group is hidden from screen readers; keep both groups identical so the loop stays seamless. The same strip sits under the Home 2 hero, where the is-home2 combo on cr_testipage-logos adds extra space above it.

Motion

Seven interactions named Testimonials · … run on this page. Three reveal the hero, the story and the stats; two fade in the logo strip and loop its marquee only while it is in view, and also run on Home 2; two run the wall’s tickers.

Roadmap board

Edit each quarter card's chip (Done, In progress, Upcoming), its milestone rows and its progress label. To change a row's state, swap the combo on cr_roadmap-mark (is-done, is-live, is-soon) and its hidden status text. The bar length comes from the cr_roadmap-bar-fill combo (is-done 100%, is-live 25%).

Journey timeline

Duplicate a cr_roadmap-item and alternate is-left and is-right on the item, its year and its card. The center line fills as you scroll (one of the Roadmap · Journey interactions), so new milestones need no extra setup.

Roadmap motion

Eleven interactions named Roadmap · … run the hero intro, live dots, board, journey, principles and callout. The page is listed in the Nav · pill rests under Pages interaction, so the pill rests under Pages there; if you give Roadmap its own navbar link, move it to a pill rest of its own.

Fields

Name, Slug, Category (Wallets, Trading & Liquidity, Tax & Accounting, Portfolio & Analytics, Payments or Developer Tools), Icon (48×48, with alt text), Summary, SEO Description, Connection Type, Setup Time, Featured, Order, Feature 1–3 and Body. Summary shows on the cards; SEO Description is the page’s meta description (150–160 characters).

Add an integration

Open CMS → Integrations → New item, fill in every field and publish.

Popular and category lists

Featured items fill Popular Integrations (the first four), and Order sets each item's position, lowest first. Each category block is a Collection List filtered by one Category option: for a new category, add the option, duplicate a block, change its filter and add a jump link.

Integration pages

The template shows a hero with a connection visual, three highlights (Feature 1–3), the Body next to an At a Glance card and More Integrations with three other apps. Connect buttons go to the Contact page. Each page’s title is Name Integration | Aethel; its meta description comes from SEO Description (150–160 characters) and the Open Graph description copies it.

Motion

Native interactions only: reveals, an orbit loop that runs only while it is in view and card hovers (off on phones). Reduced motion shows the end states.

Home · Home 2

The section system

Each section is a cr_ed-section with a cr_ed-wrap inside (the same 1350px width and gutters as the site’s wide container). From the Blog and each testimonial pane use a 12-column cr_ed-grid whose children are placement wrappers: in the blog, cr_ed-side (columns 1–5) holds the heading, the cover list (cr_ed-cover) fills columns 6–12 and the story list (cr_ed-story) sits under the heading, then cr_ed-wide (6–12) holds the post rows and cr_ed-narrow (1–4) the View all articles link. Social Channels uses cr_ed-headgrid for its heading and lead and cr_ed-linklist for the rows. Put content inside a wrapper instead of giving one element both a placement class and a content class, and use at most two classes on an element, the base and one combo such as cr_ed-row is-post: a third class creates a combo chain with no styles.

Tablet · Phone

Phone order

Below 992px every cr_ed-grid becomes one column, and its children stack in the order they have in the Navigator, with an even gap between them. The Navigator order is the phone order: in the blog that is the heading, the cover, the story, the rows and the link. Desktop positions come from the wrapper classes, so the desktop layout stays the same when you reorder for phones.

Home 2

Links and rows

Section labels are the Section Caption component (Left variant), and section titles use cr_section-title inside cr_section-head is-left, as in every other section, so they follow the H2 tag style. Secondary actions are text links (cr_ed-link, with an arrow and a hairline underline): extra padding above the text, offset by a negative margin, gives each link a tap target of at least 44px without moving it. Lists are hairline-divided rows that are whole links: the blog’s cr_ed-row is-post rows and the Social Channels cr_ed-linkrow rows. Links, rows and the testimonial tabs all show the 2px Color/Brand Soft focus ring.

Home

Home testimonials

Home’s testimonials use the native Tabs element: each customer name is a Tab Link (cr_ed-tab) that opens a pane with a portrait and one quote. To add a customer, select the Tabs element, open its settings and click Add Tab, copy the grid of an existing pane into the new pane, then replace the portrait (Replace image in its Image settings, with alt text that names the person) and edit the quote and the name and company in the new tab. Leave the panes without a class. On desktop the quote starts at the top of the portrait and the names end at its bottom edge; a longer quote makes the row taller instead of running into the names. The open name’s look is the Current state of cr_ed-tab, and the arrow keys move between names. The section title, What Our Users Say, is an H2 hidden visually for screen readers (cr_roadmap-sr), and one interaction, Testimonials (editorial) · portrait, quote and names rise on scroll, reveals the section.