One system, every page.
Every colour, size and component on this page comes from Automatic.css settings and the kit's component classes. Change a setting and the whole kit follows. This kit is the app-style flow: white, washes, pills, tiles, and ACSS 4's animation classes.
Colour
White page, ink text, six percent washes instead of borders. Teal is the only accent, on links, focus and the mark. Five pastel tints colour the specialty tiles.
- –whitePage
- –neutral-ultra-lightLight bands, washes
- –neutral-semi-lightFaint text
- –baseInk, buttons, footer
- –primaryTeal, links and the mark
- –primary-lightTeal on ink
- –tint-mintTile tint
- –tint-skyTile tint
- –tint-peachTile tint
- –tint-lilacTile tint
- –tint-sandTile tint
Heading on ultra-light
Body text and a button take their colours from the band, not from the component.
Book a visitHeading on light
Body text and a button take their colours from the band, not from the component.
Book a visitHeading on ultra-dark
Body text and a button take their colours from the band, not from the component.
Book a visitType
Care that fits into your day.
Find the right care in seconds.
Two ways to be seen
Card titles and labels
Lead text sits under a headline and says the one thing the section is about.
Body text is Geist at 16px and weight 300, line height 1.4, like the reference. Headings are the same family at 650 with tight tracking and a line height of one. Inline links look like this link to the services page.
Small text for captions, meta lines and the disclaimer.
Eyebrow label, the literal section headingPills, chips, segmented control
Every control is a pill. Primary is ink, secondary is a hairline outline. Pills lift 8px with a soft shadow on hover (ACSS on-hover–float and on-hover–shadow). Chips are washes; the segmented control slides a white thumb.
App tiles
The specialty tiles work like app icons: a tint, a glyph, a label. The glyph is a mask, so one prop picks the icon and the colour follows the tint.
Cards
Visit cards, grow on hover
Sick visit, Pearl District$0 copayToday 2:40 pm- Skin check, BeavertonFrom $95Tomorrow 9:00 am
- Physio assessmentFrom $120Today 3:30 pm
Doctor, location, plan and testimonial cards
- Single visitPay per visit$95per visit
Any clinician, any clinic Video or in person Results in the app
Book a visit - MemberFor one person$29per month
Same-day access Unlimited messaging No copays on visits Home draws and vaccines Annual plan review
Join as a member - FamilyUp to five people$49per month
Everything in Member Pediatrics included Shared records for children One bill Priority Saturday slots
Start a family plan
Booked at 8, seen at 9:40, prescription at the pharmacy by 10. I did not think a clinic could work like this.
Our pediatrician answers messages herself. Twice she has saved us a visit by looking at a photo.
The results came with a note I could actually understand. That alone is worth the membership.
Video visit from my kitchen at lunch. Fifteen minutes, done, back to work.
Motion, from ACSS 4
Sections use on-enter-all–float with on-enter–stagger (scroll-driven), the hero uses on-visible-all–float (observer-driven), the tiles around the stats use on-enter–parallax, buttons on-hover–float and on-hover–shadow, cards on-hover–grow. All of it is switched on in the ACSS dashboard and off under reduced motion. The marquee below is the kit's own keyframe.
- Scroll-driven entrance
This grid rises and fades in as it enters, one card after another.
- Parallax
Tiles around the numbers drift at three speeds as you scroll past.
- Hover
Pills float, cards grow, the segmented thumb slides. All 0.3s, snappy.
Media and details
Images sit in figures with fixed ratios and 16 to 24px corners. Captions in small muted text.
Do you take my insurance?
Most major plans, yes. Add your card in the app and it tells you the copay before you book. Plans without insurance pay the single-visit price.
How fast can I be seen?
Video visits usually within the hour. In-clinic sick visits the same day most days. Specialists within a week; dermatology sometimes two.
