MyTurtle Style Guide

Complete developer and designer reference with copy-paste code

CSS Variables Reference

All brand design tokens defined as CSS custom properties. Copy these for consistent theming across your project.

Color Variables

Variable	Value	Usage
`--primary`	#1A4231	Primary brand color, buttons, headings
`--accent`	#F4B400	Accent color, CTAs, highlights
`--secondary`	#7D9C8B	Secondary elements, borders
`--text-dark`	#1A4231	Primary text color
`--text-light`	#FFFFFF	Light text on dark backgrounds

Spacing Variables

Variable	Value (rem)	Pixels (16px base)
`--space-1`	0.25rem	4px
`--space-2`	0.5rem	8px
`--space-4`	1rem	16px
`--space-6`	1.5rem	24px
`--space-8`	2rem	32px
`--space-12`	3rem	48px

Color System

MyTurtle brand color palette with accessibility ratings. Click any swatch to copy the HEX value.

#1A4231

Deep Emerald

AAA

#1A4231

26, 66, 49

#F4B400

Gilded Gold

#F4B400

244, 180, 0

#7D9C8B

Muted Spruce

AAA

#7D9C8B

125, 156, 139

#D4C5A0

Sandstone

#D4C5A0

212, 197, 160

#F5F7F5

Mint White

#F5F7F5

245, 247, 245

#E0ECE4

Light Accent

#E0ECE4

224, 236, 228

Typography

Poppins for elegant headings, Montserrat for clean body text, Cairo for Arabic support.

Headings

Heading 1 (.heading-1 or h1)

The Quick Brown Fox Jumps

<h1 className="text-5xl font-heading font-bold">The Quick Brown Fox Jumps</h1>

Heading 2 (.heading-2 or h2)

The Quick Brown Fox Jumps

<h2 className="text-4xl font-heading font-bold">The Quick Brown Fox Jumps</h2>

Body Text

Regular body text for standard content. Readable, clean, and perfectly sized for paragraphs of content.

<p className="text-base">Regular body text for standard content...</p>

Iconography & Graphics

Visual elements, patterns, and graphic style

Icon Style Guidelines

Use simple, geometric icons with rounded corners. Stroke width: 2px. Size: 24px base. Icons should be clear, scalable, and consistent with the brand's clean aesthetic.

Art

Apparel

Shop

Egypt

Eco

Premium

Brand Patterns

Subtle geometric patterns inspired by classic art frames and Egyptian motifs. Use these as backgrounds or overlays at low opacity (5-10%).

Pattern 1

Pattern 2

Pattern 3

Layout & Grid

Structure and alignment fundamentals.

Container & Grid

Our layout system provides a solid structure for consistent alignment across devices.

Grid System (12 Column)

Col 1

Col 6

Col 4

<div className="grid grid-cols-12 gap-4">
  <div className="col-span-6">...</div>
  <div className="col-span-6">...</div>
</div>

Containers

.containerMax-width: 1400px (Centered)

mx-autoCenter block elements

Shadows & Elevation

Depth and hierarchy markers.

Elevation Levels

Shadows are used to create depth and hierarchy. Use sparingly to highlight interactive or floating elements.

shadow-smSubtle elevation for cards

shadow-mdStandard elevation (default)

shadow-lgFloating elements / Modals

shadow-xlHigh elevation / Popovers

<div className="shadow-sm">...</div>
<div className="shadow-md">...</div>
<div className="shadow-lg">...</div>
<div className="shadow-xl">...</div>

Buttons

Three button styles with multiple sizes and states. Hover to see interactions.

Primary Button

variant="primary"

<Button variant="primary">Shop Now</Button>

Secondary Button

variant="secondary"

<Button variant="secondary">Learn More</Button>

Accent Button

variant="accent"

<Button variant="accent">Special Offer</Button>

Button Sizes

Small, Medium, Large

<Button variant="primary" size="sm">Small Button</Button>
<Button variant="primary" size="md">Medium Button</Button>
<Button variant="primary" size="lg">Large Button</Button>

Cards

Flexible card components for content display with hover effects.

Basic Card

Card with Header, Body, and Footer

Card Title

This is a basic card component with header, body, and footer sections. Perfect for feature highlights and content blocks.

<Card>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
  </Card.Header>
  <Card.Body>
    <p>Card content goes here...</p>
  </Card.Body>
  <Card.Footer>
    <Button variant="primary" size="sm">Learn More</Button>
  </Card.Footer>
</Card>

Form Elements

Accessible, styled form inputs with focus states and validation.

Text Input

Input Component

Full Name

<Input label="Full Name" placeholder="Enter your name" />

Select Dropdown

Select Component

T-Shirt Size

<Select
  label="T-Shirt Size"
  options={[
    { value: 'small', label: 'Small' },
    { value: 'medium', label: 'Medium' },
    { value: 'large', label: 'Large' },
    { value: 'xl', label: 'X-Large' },
  ]}
/>

Textarea

Textarea Component

Message

<Textarea label="Message" placeholder="Enter your message" />

Utility Classes

Quick-apply utility classes for common styling needs.

Text Colors

.text-primary

Primary brand color, buttons, headings

.text-accent

Accent color, CTAs, highlights

.text-muted

Muted secondary text

.text-text-dark

Primary text color

Flexbox Utilities

<!-- Space Between -->
<div className="flex items-center justify-between">
  <span>Left Side</span>
  <span>Right Side</span>
</div>

<!-- Centered with Gap -->
<div className="flex items-center justify-center gap-4">
  <span>Item 1</span>
  <span>Item 2</span>
</div>

<!-- Vertical Column -->
<div className="flex flex-col gap-2">
  <span>Vertical Item 1</span>
  <span>Vertical Item 2</span>
</div>

Animations

Animation & Motion

Timing, easing, and motion principles that bring the MyTurtle brand to life.

Animation Principles

Fast (150ms)

Click to replay

Micro-interactions, hover states, button presses

Base (300ms)

Click to replay

Card reveals, menu transitions, modals

Slow (500ms)

Click to replay

Page transitions, hero animations, complex reveals

Easing Functions

Ease (Default)

transition: all 300ms ease;

Standard smoothness for most interactions

Ease-Out

transition: all 300ms ease-out;

For elements entering the screen

Ease-In

transition: all 300ms ease-in;

For elements exiting the screen

Ease-In-Out

transition: all 300ms ease-in-out;

For elements moving in place

✓Do

Use subtle, purposeful animation
Respect reduced motion preferences
Keep animations under 500ms
Provide visual feedback for interactions

✕Don't

Don't use animation for decoration only
Don't create distracting motion
Don't use different easing for each element
Don't animate too many properties at once

Accessibility Considerations

All animations respect the `prefers-reduced-motion` setting. Users with reduced motion enabled will see instant transitions instead of animations.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Accessibility

Accessibility Guidelines

WCAG standards and inclusive design.

Our Commitment

MyTurtle is committed to **WCAG 2.1 Level AA** compliance. Art should be accessible to everyone, and our digital experiences reflect that principle.

Color Contrast Standards

Text SampleEmerald on White

Ratio8.5:1

RatingAAA

Excellent for body text

Text SampleGold on Dark

Ratio7.2:1

RatingAAA

Safe for all text sizes

Text SampleSpruce on White

Ratio4.8:1

RatingAA

Large text only

Accessibility Checklist

Visual

4.5:1 contrast ratio (AA)
3:1 contrast for large text
Don't rely on color alone
Provide focus indicators
Support dark mode

Interactive

Keyboard accessible
Touch targets min 44x44px
Skip navigation links
Semantic HTML elements
ARIA labels for screen readers

Content

Images have alt text
Videos have captions
Logical heading hierarchy
Descriptive link text
Forms have clear labels

Motion

Respect reduced motion
No auto-playing audio
Pause control for carousels
Avoid flashing content
Pausable animations

Complex Components

Full component examples combining multiple elements.

Hero Section

<div className="hero bg-gradient-to-br from-primary to-secondary text-text-light py-20">
  <div className="container mx-auto px-6">
    <h1 className="text-5xl font-heading font-bold mb-4">Welcome to MyTurtle</h1>
    <p className="text-2xl mb-2">Art Unframed</p>
    <p className="text-lg opacity-90 mb-8">Discover unique, sustainable apparel</p>
    <Button variant="accent" size="lg">Shop Collection</Button>
  </div>
</div>